Motion Core

typography

Text Scramble

A hover-triggered SplitText effect that scrambles characters before revealing the original string.

gsap

Installation

Install the component

Run the following command to install the component and its dependencies:
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

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

	let hoverTarget = $state<HTMLElement | null>(null);
</script>

<button
	bind:this={hoverTarget}
	class="h-8 w-26 gap-1.5 rounded-lg border border-border bg-background px-3 text-xs font-medium tracking-wide text-foreground uppercase shadow-sm"
>
	<TextScramble class="font-display" {hoverTarget}>Hover Me</TextScramble>
</button>

Props

TextScramble

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