Variable Proximity

Hover me! And then star Shoora UI on GitHub, or else...

Customize Variable Proximity

Label

From Font Variation Settings

To Font Variation Settings

Interaction Radius100px

Falloff

Custom ClassName

Property	Type	Default	Description
label	`string`	`""`	The text content to display.
fromFontVariationSettings	`string`	`'wght' 400, 'opsz' 9`	The starting variation settings.
toFontVariationSettings	`string`	`'wght' 1000, 'opsz' 40`	The variation settings to reach at cursor proximity.
containerRef	`RefObject<HTMLDivElement>`	-	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.

framer-motion

Created with ❤️ by Cybershoora