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

PropTypeDefault
children
string
-
duration?
number
600
speed?
number
30
className?
string
-