Variable Proximity

Letter styling changes continuously with pointer distance mapping.

Default

Move the pointer over the text. Every prop is wired to the controls underneath. The component loads Roboto Flex from Google Fonts, a variable font with weight and optical size axes.

Customize

Radius100px

Falloff

API Reference

VariableProximity

Prop	Type	Default	Description
`label`	`string`	`""`	The text content to display.
`fromFontVariationSettings`	`string`	`'wght' 400, 'opsz' 9`	The starting variation settings.
`toFontVariationSettings`	`string`	`'wght' 800, 'opsz' 40`	The variation settings to reach at cursor proximity.
`containerRef`	`HTMLElement \| Ref<HTMLElement>`	`undefined`	Reference to container for relative calculations.
`radius`	`number`	`50`	Proximity radius to influence the effect.
`falloff`	`'linear' \| 'exponential' \| 'gaussian'`	`"linear"`	Type of falloff for the effect.

Accessibility

Keyboard shortcuts and ARIA behavior.

Letters are aria-hidden and the full label is repeated in a visually hidden span, so screen readers read it once.
The effect follows the pointer only, so touch and keyboard users see the base weight (touch drag is tracked).

True Focus Warp Text