Scramble Text
Free
Text that decodes from random glyphs, left to right, on hover or focus.
Hover or focus the text
Customize
700ms
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/scramble-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/scramble-text.tsx.
Usage
import { ScrambleText } from "@/components/ui/scramble-text";
<ScrambleText text="Decrypting launch plan" duration={700} />Props
3 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The final text. |
| duration | number | 700 | Milliseconds for the whole decode. |
| className | string | — | Extra classes for the text. |
Dependencies: motion