A simple text scramble effect that reveals characters from left to right.
npx atelier-ui add simple-scrambleimport { SimpleScramble } from "@/components/SimpleScramble"<SimpleScramble>
Hello world
</SimpleScramble>| Name | Type | Default | Description |
|---|---|---|---|
| duration | number | 1 | Total duration of the reveal in seconds. |
| playOnMount | boolean | true | Plays the scramble animation on mount. |
| playOnHover | boolean | true | Replays the scramble animation on hover. |
| as | React.ElementType | "span" | Polymorphic tag: render as any HTML element. |
| characters | string | "abcdefghijkl mnopqrstuv wxyz!@#$%^&*()_+" | Characters to scramble. |
Yugop Nakamura
Original text scramble effect
use-scramble
A react hook for text scrambling by tolis