Text Scramble

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add text-scramble

npx @motion-core/cli add text-scramble

Import the component

Import the component into your Svelte file:

import { TextScramble } from "$lib/motion-core";

import { TextScramble } from "$lib/motion-core";

Usage

Props

Duration

0.600s

Stagger

0.030s

Cycles

Characters

<script lang="ts">
	import { TextScramble } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof TextScramble>>;

	let hoverTarget = $state<HTMLElement | null>(null);
	let {
		scrambleDuration = 0.6,
		stagger = 0.03,
		cycles = 12,
		characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*",
	}: Props = $props();
</script>

<button
	bind:this={hoverTarget}
	class="h-8 gap-1.5 rounded-sm bg-background-muted px-3 text-xs font-medium tracking-wide text-foreground uppercase card"
>
	<TextScramble
		class="font-mono"
		{hoverTarget}
		{scrambleDuration}
		{stagger}
		{cycles}
		{characters}>Hover Me</TextScramble
	>
</button>

<script lang="ts">
	import { TextScramble } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof TextScramble>>;

	let hoverTarget = $state<HTMLElement | null>(null);
	let {
		scrambleDuration = 0.6,
		stagger = 0.03,
		cycles = 12,
		characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*",
	}: Props = $props();
</script>

<button
	bind:this={hoverTarget}
	class="h-8 gap-1.5 rounded-sm bg-background-muted px-3 text-xs font-medium tracking-wide text-foreground uppercase card"
>
	<TextScramble
		class="font-mono"
		{hoverTarget}
		{scrambleDuration}
		{stagger}
		{cycles}
		{characters}>Hover Me</TextScramble
	>
</button>

Props

TextScramble

Prop	Type	Default
`children`	`Snippet`	`—`
`hoverTarget`	`HTMLElementnull`	`null`
`scrambleDuration`	`number`	`0.6`
`stagger`	`number`	`0.03`
`cycles`	`number`	`12`
`characters`	`string`	`"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*"`
`class`	`string`	`""`