Browse components
Stagger Chars
Hover and a wave of bouncing, tilting characters ripples through the text with a flash of accent color.
Installation
npx shadcn@latest add @glint-ui/stagger-charsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/stagger-chars.json
Usage
import { StaggerChars } from "@/components/ui/stagger-chars";
<StaggerChars text="Hover me, gently" effect="wave" direction="center" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Hover me, gently" | Text to animate. |
| effect | "wave" | "bounce" | "spin" | "flip" | "wave" | Motion each character performs. |
| direction | "start" | "end" | "center" | "edges" | "random" | "start" | Where the wave starts. |
| stagger | number | 35 | Delay between characters, in ms. |
| duration | number | 700 | Duration of each character's motion, in ms. |
| accent | string | "#a3e635" | Color flashed at the peak of the motion. |
| className | string | — | Extra classes for the root element. |