Browse components
Fancy Text
Outlined letters that lift and fill with a sweeping gradient, one after another, on hover.
Installation
npx shadcn@latest add @glint-ui/fancy-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/fancy-text.json
Usage
import { FancyText } from "@/components/ui/fancy-text";
<FancyText text="Hover to fill" colors={["#a3e635", "#22d3ee", "#a78bfa"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Hover to fill" | Text to render. |
| colors | string[] | ["#a3e635","#22d3ee","#a78bfa"] | Gradient stops for the filled state. |
| strokeWidth | number | 1.5 | Outline width, in px. |
| lift | number | 0.08 | How far each letter rises on hover, in em. |
| stagger | number | 40 | Delay between letters, in ms. |
| duration | number | 600 | Duration of each letter's sweep, in ms. |
| active | boolean | false | Keep the filled state on, e.g. to drive it from a parent. |
| strokeColor | string | — | Outline color in the resting state. Defaults to a faint foreground. |
| className | string | — | Extra classes for the root element. |