Browse components
Slide Text
On hover every letter rolls out of view and a fresh copy slides in behind it, in a staggered wave.
Installation
npx shadcn@latest add @glint-ui/slide-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/slide-text.json
Usage
import { SlideText } from "@/components/ui/slide-text";
<a href="/contact"><SlideText text="Let's talk" hoverColor="#a3e635" /></a>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Let's talk" | Text to render. |
| hoverColor | string | "#a3e635" | Color of the incoming letters. |
| direction | "up" | "down" | "up" | Direction the letters travel. |
| from | "start" | "center" | "end" | "start" | Where the stagger starts. |
| stagger | number | 25 | Delay between letters, in ms. |
| duration | number | 500 | Slide duration of each letter, in ms. |
| active | boolean | false | Keep the swapped state, e.g. for an active link. |
| className | string | — | Extra classes for the root element. |