AceUi

Text Scramble

A hover effect that scrambles characters and animates them back to the original text.

Scramble Me!
The TextScramble component creates an engaging hover effect that scrambles text characters with random symbols before smoothly revealing the original text, perfect for interactive headings and eye-catching UI elements.

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/text-scramble.json"

Usage

1import { TextScramble } from "@/components/ui/text-scramble"; 
2

3export default function ScrambleExample() {
4return (
5 <div className="flex justify-center items-center h-screen bg-gray-900 text-white">
6   <TextScramble 
7     className="text-blue-400"
8     speed={30}
9     duration={800}
10   >
11     Hover Over This Text
12   </TextScramble>
13 </div>
14);
15}

Features

  • Character scrambling animation on hover
  • Customizable animation speed and duration
  • Responsive text sizing with Tailwind breakpoints
  • Smooth transition effects
  • TypeScript support with full type safety
  • Uses Jost font for modern typography

Props

PropTypeDefaultDescription
childrenstring"Scramble Me!"The text content to be scrambled
speednumber50Animation speed in milliseconds between frames
durationnumber1000Total duration of the scramble effect in milliseconds
classNamestring""Additional CSS classes for styling

Examples

Basic Usage

1<TextScramble>
2Welcome to our site
3</TextScramble>

Custom Speed and Duration

1<TextScramble 
2speed={25} 
3duration={1500}
4className="text-green-400 hover:text-green-300"
5>
6Fast Scramble Effect
7</TextScramble>

Large Heading

1<TextScramble className="text-6xl font-black text-gradient">
2AMAZING TITLE
3</TextScramble>