Variable Font And Cursor

1"use client"
2 
3import React, { ElementType, useCallback, 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 * Interface for defining a single font variation axis.
11 * Each axis represents a dimension of variation in a variable font. You should check the font variation settings of the font you are using to see the available axes.
12 */
13interface FontVariationAxis {
14  /**
15   * The name of the font variation axis (e.g., "wght" for weight, "slnt" for slant).
16   * This corresponds to the OpenType variation axis tags, but can be arbitrary. Make sure to check the font variation settings of the font you are using to see the available axes.
17   */
18  name: string
19 
20  /**
21   * The minimum value for this axis.
22   * Applied when the cursor is at the left edge (for x-axis) or top edge (for y-axis).
23   */
24  min: number
25 
26  /**
27   * The maximum value for this axis.
28   * Applied when the cursor is at the right edge (for x-axis) or bottom edge (for y-axis).
29   */
30  max: number
31}
32 
33/**
34 * Interface for mapping cursor position to font variation settings.
35 * Allows independent control of two font variation axes based on cursor movement.
36 */
37interface FontVariationMapping {
38  /**
39   * Font variation axis controlled by horizontal cursor movement.
40   */
41  x: FontVariationAxis
42 
43  /**
44   * Font variation axis controlled by vertical cursor movement.
45   */
46  y: FontVariationAxis
47}
48 
49/**
50 * Props for the VariableFontAndCursor component.
51 */
52interface TextProps extends React.HTMLAttributes<HTMLElement> {
53  /**
54   * The text content to display and animate.
55   * Required prop with no default value.
56   */
57  children: React.ReactNode
58 
59  /**
60   * HTML Tag to render the component as.
61   * @default "span"
62   */
63  as?: ElementType
64 
65  /**
66   * Mapping configuration that defines how cursor position affects font variation settings.
67   * Maps x and y cursor positions to specific font variation axes and value ranges.
68   * Required prop with no default value.
69   */
70  fontVariationMapping: FontVariationMapping
71 
72  /**
73   * Reference to the container element for mouse tracking.
74   * The cursor position will be calculated relative to this container's bounds.
75   * Required prop with no default value.
76   */
77  containerRef: React.RefObject<HTMLDivElement | null>
78}
79 
80const VariableFontAndCursor = ({
81  children,
82  as = "span",
83  fontVariationMapping,
84  className,
85  containerRef,
86// … truncated