Components
Variable Font Cursor Proximity
A text component that animates the font variation settings of letters based on the cursor proximity. Works only with variable fonts.
The VariableFontCursorProximity splits its text into letters, that respond to cursor movement by adjusting their font variation settings, based on the distance between the letter and cursor distance. This component works only with variable fonts.
- Splitting text into individual letters
- Tracking cursor position relative to each letter
- Smoothly transitioning font variations based on proximity
- Supporting multiple falloff patterns for the effect
This component requires the use of variable fonts to function properly. Otherwise it will not work.
Loading preview...
import { useRef } from "react";
import { cn } from "@/lib/utils";
import { VariableFontProximity } from "@/components/ui/variable-font-cursor-proximity";
const texts = ["Overstimulated", "Underutilized", "Familiar", "Extraordinary"];
function Preview() {
const containerRef = useRef<HTMLDivElement>(null);
return (
<div
className="w-full h-full flex min-h-[500px] items-center rounded-lg items-center justify-center font-overusedGrotesk bg-[#ff5941] cursor-pointer relative overflow-hidden"
ref={containerRef}
>
<div className="w-full h-full flex flex-col items-center justify-center gap-4 text-white">
{texts.map((text, i) => (
<VariableFontProximity
key={i}
label={text}
className={cn("text-4xl md:text-6xl lg:text-8xl leading-none")}
fromFontVariationSettings="'wght' 400, 'slnt' 0"
toFontVariationSettings="'wght' 900, 'slnt' -10"
radius={200}
containerRef={containerRef}
/>
))}
</div>
</div>
);
}
export { Preview };