Browse components
Layered Text
Colored copies hide behind each letter and fan out in a springy cascade on hover, then stack back.
Installation
npx shadcn@latest add @glint-ui/layered-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/layered-text.json
Usage
import { LayeredText } from "@/components/ui/layered-text";
<LayeredText text="STACKED" offset={6} angle={45} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "STACKED" | Text to render. |
| colors | string[] | ["#a3e635","#22d3ee","#818cf8","#f472b6"] | One color per layer, nearest first. |
| offset | number | 6 | Distance between layers when fanned out, in px. |
| angle | number | 45 | Fan-out direction in degrees (0 = right, 90 = down). |
| stagger | number | 30 | Delay between letters, in ms. |
| duration | number | 700 | Transition duration, in ms. |
| active | boolean | false | Keep the layers fanned out. |
| className | string | — | Extra classes for the root element. |