Text Scramble
Characters that scramble through random glyphs and resolve, left to right, into the text. It plays when the text changes, or on mount, and shows the text at once with reduced motion.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text it resolves into. A change plays it again. |
| duration | number | — | The longest the scramble may take, in milliseconds. |
| glyphs | string | "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/" | The characters it scrambles through. |
| scrambleOnMount | boolean | false | Also plays on first render, not only when text changes. |
| style | CSSProperties | — | Inline styles for the text. |
| className | string | — | Classes for the root element. |