Variable Font Cursor Proximity

1"use client"
2 
3import React, { ElementType, forwardRef, useMemo, useRef } from "react"
4import { motion, useAnimationFrame } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7import { useMousePositionRef } from "@/hooks/use-mouse-position-ref"
8 
9/**
10 * Props for the VariableFontCursorProximity component.
11 */
12interface TextProps extends React.HTMLAttributes<HTMLElement> {
13  /**
14   * The text content to display and animate.
15   * Each letter will respond individually to cursor proximity.
16   * Required prop with no default value.
17   */
18  children: React.ReactNode
19 
20  /**
21   * HTML Tag to render the component as.
22   * @default "span"
23   */
24  as?: ElementType
25 
26  /**
27   * Default font variation settings applied when cursor is outside the radius.
28   * Should be a CSS font-variation-settings string (e.g., "'wght' 400, 'slnt' 0").
29   * You should check the font variation settings of the font you are using to see the available axes.
30   * Required prop with no default value.
31   */
32  fromFontVariationSettings: string
33 
34  /**
35   * Target font variation settings applied when cursor is at the center of a letter.
36   * Should be a CSS font-variation-settings string (e.g., "'wght' 900, 'slnt' 15").
37   * Make sure to check the font variation settings of the font you are using to see the available axes.
38   * Required prop with no default value.
39   */
40  toFontVariationSettings: string
41 
42  /**
43   * Reference to the container element for mouse tracking.
44   * The cursor position will be calculated relative to this container's bounds.
45   * Required prop with no default value.
46   */
47  containerRef: React.RefObject<HTMLDivElement | null>
48 
49  /**
50   * The radius in pixels within which letters respond to cursor proximity.
51   * Letters outside this radius will use the default font variation settings.
52   * @default 50
53   */
54  radius?: number
55 
56  /**
57   * The falloff function that determines how the effect diminishes with distance.
58   * - "linear": Linear interpolation (straight line falloff)
59   * - "exponential": Quadratic falloff (more dramatic near cursor)
60   * - "gaussian": Bell curve falloff (smooth, natural feeling)
61   * @default "linear"
62   */
63  falloff?: "linear" | "exponential" | "gaussian"
64}
65 
66const VariableFontCursorProximity = forwardRef<HTMLElement, TextProps>(
67  (
68    {
69      children,
70      as = "span",
71      fromFontVariationSettings,
72      toFontVariationSettings,
73      containerRef,
74      radius = 50,
75      falloff = "linear",
76      className,
77      ...props
78    },
79    ref
80// … truncated