Text Cursor Proximity

1"use client"
2 
3import React, { CSSProperties, ElementType, forwardRef, useRef, useMemo } from "react"
4import {
5  motion,
6  useAnimationFrame,
7  useMotionValue,
8  useTransform,
9} from "motion/react"
10 
11import { useMousePositionRef } from "@/hooks/use-mouse-position-ref"
12import { cn } from "@/lib/utils"
13 
14// Helper type that makes all properties of CSSProperties accept number | string
15type CSSPropertiesWithValues = {
16  [K in keyof CSSProperties]: string | number
17}
18 
19interface StyleValue<T extends keyof CSSPropertiesWithValues> {
20  from: CSSPropertiesWithValues[T]
21  to: CSSPropertiesWithValues[T]
22}
23 
24interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
25  /**
26   * The content to be displayed and animated
27   */
28  children: React.ReactNode
29 
30  /**
31   * HTML Tag to render the component as
32   * @default span
33   */
34  as?: ElementType
35 
36  /**
37   * Object containing style properties to animate
38   * Each property should have 'from' and 'to' values
39   */
40  styles: Partial<{
41    [K in keyof CSSPropertiesWithValues]: StyleValue<K>
42  }>
43 
44  /**
45   * Reference to the container element for mouse position calculations
46   */
47  containerRef: React.RefObject<HTMLDivElement | null>
48 
49  /**
50   * Radius of the proximity effect in pixels
51   * @default 50
52   */
53  radius?: number
54 
55  /**
56   * Type of falloff function to use for the proximity effect
57   * @default "linear"
58   */
59  falloff?: "linear" | "exponential" | "gaussian"
60}
61 
62const TextCursorProximity = forwardRef<HTMLSpanElement, TextProps>(
63  (
64    {
65      children,
66      as,
67      styles,
68      containerRef,
69      radius = 50,
70      falloff = "linear",
71      className,
72      ...props
73    },
74    ref
75  ) => {
76    const MotionComponent = useMemo(() => motion.create(as ?? "span"), [as])
77    const letterRefs = useRef<(HTMLSpanElement | null)[]>([])
78    const mousePositionRef = useMousePositionRef(containerRef)
79 
80    // Convert children to string for letter processing
81    const text = React.Children.toArray(children).join("")
82 
83    // Create a motion value for each letter's proximity
84    const letterProximities = useRef(
85      Array(text.replace(/\s/g, "").length)
86        .fill(0)
87        .map(() => useMotionValue(0))
88    )
89 
90    const calculateDistance = (
91      x1: number,
92      y1: number,
93      x2: number,
94      y2: number
95    ): number => {
96      return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
97    }
98 
99    const calculateFalloff = (distance: number): number => {
100// … truncated