Browse components
Split Text
Reveals text character by character or word by word when it scrolls into view.
Installation
npx shadcn@latest add @glint-ui/split-textFirst 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/split-text.json
Usage
import { SplitText } from "@/components/ui/split-text";
<SplitText text="Components that move you" variant="blur" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Components that move you" | Text to animate. |
| splitBy | "chars" | "words" | "chars" | Animate each character or each word. |
| variant | "slide" | "blur" | "fade" | "slide" | Entrance style. |
| stagger | number | 35 | Delay between pieces, in ms. |
| duration | number | 600 | Duration of each piece, in ms. |
| as | "p" | "h1" | "h2" | "h3" | "span" | "div" | "p" | Element to render. |
| className | string | — | Extra classes for the root element. |