KQ-173 · GRADIENT/TITLE
Gradient Title
A heading painted with a sheen that follows the pointer. The gradient is clipped to the glyphs and oversized, so moving the pointer only slides its position — one motion value, no re-render — while the weight leans heavier under your hand and eases back when you leave.
KQ-173 · GRADIENT/TITLE
Move your pointer across the sheen.
Sheen tracks the pointer
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/gradient-title
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The heading text. |
| as | "span" | "p" | "h1" | "h2" | "h3" | "h2" | The semantic wrapper element. |