ComponentsCursor
Variable proximity
Weight and width swell near the cursor.
Installation
$ npx shadcn@latest add @textlab/variable-proximityNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { VariableProximity } from "@/components/textlab/variable-proximity/variable-proximity";
<VariableProximity as="h1" text="Variable type" variant="width" />Variants
weightwidthslantProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "weight" | "width" | "slant" | "weight" | Which variable axis responds. |
| from | number | axis default | Axis value far from the cursor. |
| to | number | axis default | Axis value under the cursor. |
| radius | number | 3 | Reach in em. |
| font | string | var(--tl-font-flex) | A variable font with the axis. Roboto Flex has weight, width and slant. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Type foundries, design tools and editorial heroes.
- Showing off a variable font.
Skip it
- Fonts without the axis; nothing will change.
- Layouts that cannot tolerate letters changing width.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the text is read once.
- Weight and width change the letters' footprint, so neighbours move slightly; keep it to headlines.
Motion
- Each letter eases toward its own target with damping.
- Updates stop once every letter has settled.
Reduced motion. Static text at the resting axis value.
Performance
- Writes font-variation-settings only while values change; text reflow is limited to the line.