Browse components
Masked Heading
A big heading wiped into view by a feathered mask sweep, with a gradient or photo flowing through the letters.
Installation
npx shadcn@latest add @glint-ui/masked-headingFirst 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/masked-heading.json
Usage
import { MaskedHeading } from "@/components/ui/masked-heading";
<MaskedHeading text="Made to be seen" colors={["#bef264", "#22d3ee", "#a78bfa"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Made to be seen" | Heading text. |
| colors | string[] | ["#bef264","#22d3ee","#a78bfa","#f472b6"] | Gradient stops flowing through the letters. |
| image | string | "" | Image URL to fill the letters with instead of the gradient. |
| revealDuration | number | 1.8 | Seconds for the reveal sweep. |
| flowDuration | number | 6 | Seconds per gradient or image-pan cycle. |
| trigger | "view" | "loop" | "view" | Reveal once on view, or sweep in and out forever. |
| outline | boolean | true | Faint ghost of the letters before they are revealed. |
| as | "h1" | "h2" | "h3" | "p" | "span" | "div" | "h2" | Element to render. |
| className | string | — | Extra classes for the root element. |