TextScramble Hover
Scramble Hover
Text component that animates by scrambling its letters on hover, then resolves to the original text. Useful for headings, buttons, and interactive UI.
Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/scramble-hover.json"
Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/scramble-hover-demo.json"
How to use
Demo.tsx
"use client"
import ScrambleHover from "@/components/smoothui/ui/ScrambleHover"
export default function ScrambleHoverDemo() {
return (
<div className="relative max-w-md space-y-6">
<div>
<ScrambleHover>Hover over this text!</ScrambleHover>
<div>
<ScrambleHover
duration={1200}
speed={50}
className="text-brand font-mono text-lg"
>
Custom duration and speed example
</ScrambleHover>
</div>
<div>
<ScrambleHover className="text-2xl font-semibold">
Try me too!
</ScrambleHover>
</div>
</div>
</div>
)
}
Props
Prop | Type | Default |
---|---|---|
children | string | - |
duration? | number | 600 |
speed? | number | 30 |
className? | string | - |