Scramble Button
A button that scrambles its text on hover using the scramble GSAP effect. Automatically installs the scramble effect as a dependency.
'use client'
import * as React from 'react'
import { ScrambleButton } from '@/components/scramble-button'
import { Switch } from '@/components/ui/switch'
function ScrambleButtonDemo() {
const [scrambled, setScrambled] = React.useState(false)
return (
<div className="flex min-h-48 flex-col items-center justify-center gap-8 overflow-hidden p-8 font-mono">
<div className="flex flex-col items-center gap-3 sm:flex-row">
<ScrambleButton
text="GET STARTED"
scramble={scrambled}
variant="default"
/>
<ScrambleButton
text="LEARN MORE"
scramble={scrambled}
chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
variant="secondary"
/>
<ScrambleButton
text="SUBSCRIBE"
scramble={scrambled}
chars="01"
variant="outline"
/>
</div>
{/* Mobile fallback: switch to trigger scramble */}
<label className="flex cursor-pointer items-center gap-3 sm:hidden">
<Switch checked={scrambled} onCheckedChange={setScrambled} />
<span className="text-muted-foreground text-xs tracking-wider uppercase">
Toggle scramble
</span>
</label>
</div>
)
}
export default ScrambleButtonDemo
Installation
This automatically installs the Scramble effect.
Usage
import { ScrambleButton } from '@/components/scramble-button'
;<ScrambleButton
text="GET STARTED"
className="bg-primary text-primary-foreground rounded-md px-4 py-2 font-mono text-sm"
/>Custom Characters
<ScrambleButton text="BINARY" chars="01" />
<ScrambleButton text="CLEAN" chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ" />Programmatic Control
Use the scramble prop for touch devices or custom triggers:
const [active, setActive] = React.useState(false)
<ScrambleButton text="TOGGLE ME" scramble={active} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to display and scramble on hover |
chars | string | — | Custom character set for the scramble animation |
duration | number | 0 | Duration in seconds. 0 = auto-scale with text length |
cycles | number | — | Randomization cycles per character before resolving (higher = more chaotic) |
chance | number | — | Probability (0–1) that each character scrambles |
overflow | boolean | — | Show all character positions from the start rather than growing in |
scramble | boolean | — | Programmatically trigger the scramble (useful for touch devices) |