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.

Hover over this text!
Custom duration and speed example
Try me too!

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

PropTypeDescription
childrenstringThe text to scramble on hover.
duration?numberTotal animation duration in milliseconds (default: 600).
speed?numberInterval between scrambles in milliseconds (default: 30).
className?stringOptional additional class names for styling.
Typewriter Text
Animates text as if being typed out, letter by letter. Supports custom speed and looping.