Variable Proximity⁽⁰³¹⁾

Variable font weight and optical size fluidly responding to cursor distance.

Hover

Requires:motion

Loading…

Installation

$npx kibo add variable-proximity

Usage

1import { VariableProximity } from "@/components/kibo/variable-proximity/component";
2 
3export default function Example() {
4  return (
5    <VariableProximity />
6  );
7}

Props Reference

Prop	Type	Default	Description
`label`	`string`	-	Controls the label for the component animation.
`fromFontVariationSettings`	`string`	-	Controls the from font variation settings for the component animation.
`toFontVariationSettings`	`string`	-	Controls the to font variation settings for the component animation.
`containerRef`	`MutableRefObject<HTMLElement \| null>`	-	Controls the container ref for the component animation.
`radius`	`number`	-	Effect calculation radius in pixels from cursor position.
`falloff`	`'linear' \| 'exponential' \| 'gaussian'`	-	Falloff curve calculation mode ('linear', 'exponential', 'gaussian').
`className`	`string`	-	Additional CSS classes for styling and layout.
`onClick`	`() => void`	-	Controls the on click for the component animation.
`style`	`CSSProperties`	-	Controls the style for the component animation.