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

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	-

Typewriter Text

Animates text as if being typed out, letter by letter. Supports custom speed and looping.