Browse components
Variable Proximity
Letters grow bolder, larger and brighter the closer the pointer gets, with a tunable radius and falloff.
Installation
npx shadcn@latest add @glint-ui/variable-proximityFirst 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/variable-proximity.json
Usage
import { VariableProximity } from "@/components/ui/variable-proximity";
<VariableProximity text="Every letter leans in" radius={140} falloff="gaussian" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Every letter leans in when you come close" | Text to render. |
| radius | number | 140 | Px from the pointer where letters react. |
| falloff | "linear" | "exponential" | "gaussian" | "gaussian" | Response curve from the pointer outwards. |
| fromWeight | number | 400 | Weight far from the pointer. |
| toWeight | number | 900 | Weight under the pointer. |
| scale | number | 1.15 | Scale under the pointer. |
| activeColor | string | "#bef264" | Tint near the pointer. Empty to disable. |
| as | "p" | "h1" | "h2" | "h3" | "span" | "div" | "p" | Element to render. |
| className | string | — | Extra classes for the root element. |