Proximity Text
A headline whose letters swell, lift and light up as the cursor gets close, like a magnifying wave. Stays real, indexable text.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/proximity-textProps
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | The text. |
as | "h1" | "h2" | "h3" | "p" | "span" | "h2" | Element to render. |
radius | number | 140 | Reach of the effect in px. |
maxScale | number | 1.45 | Scale of the letter under the cursor. |
lift | number | 10 | How far the nearest letter rises, in px. |
accentColor | string | "#8b5cf6" | Colour letters take on near the cursor. |
weight | number | 600 | Font weight away from the cursor. Use this rather than a font-* class. |
weightBoost | number | 300 | Extra weight near the cursor; smooth with a variable font such as Inter. |
className | string | - | Extra classes for the text element. |
...props | React.HTMLAttributes<HTMLElement> | - | Any other attributes, passed to the text element. |