|
| 1 | +"use client"; |
| 2 | +import { type ComponentProps, type RefObject, useMemo, useRef } from "react"; |
| 3 | +import { motion, useAnimationFrame } from "motion/react"; |
| 4 | +import { useMouse } from "@/cuicui/hooks/use-mouse"; |
| 5 | + |
| 6 | +interface TextProps { |
| 7 | + children: string; |
| 8 | + fromFontVariationSettings?: string; |
| 9 | + toFontVariationSettings?: string; |
| 10 | + containerRef: RefObject<HTMLDivElement | null>; |
| 11 | + radiusZoomingZone?: number; |
| 12 | + falloff?: "linear" | "exponential" | "gaussian"; |
| 13 | +} |
| 14 | + |
| 15 | +export const VariableFontCursorProximity = ({ |
| 16 | + children, |
| 17 | + fromFontVariationSettings = "'wght' 400, 'slnt' 0", |
| 18 | + toFontVariationSettings = "'wght' 900, 'slnt' -10", |
| 19 | + containerRef, |
| 20 | + radiusZoomingZone = 50, |
| 21 | + falloff = "linear", |
| 22 | + className, |
| 23 | + onClick, |
| 24 | + ref, |
| 25 | + ...props |
| 26 | +}: TextProps & ComponentProps<"span">) => { |
| 27 | + const letterRefs = useRef<(HTMLSpanElement | null)[]>([]); |
| 28 | + const interpolatedSettingsRef = useRef<string[]>([]); |
| 29 | + |
| 30 | + const [mousePosition, _] = useMouse(containerRef); |
| 31 | + |
| 32 | + // Parse the font variation settings strings. see the docs or the demo on how one should look like |
| 33 | + const parsedSettings = useMemo(() => { |
| 34 | + const fromSettings = new Map( |
| 35 | + fromFontVariationSettings |
| 36 | + .split(",") |
| 37 | + .map((s) => s.trim()) |
| 38 | + .map((s) => { |
| 39 | + const [name, value] = s.split(" "); |
| 40 | + return [name.replace(/['"]/g, ""), Number.parseFloat(value)]; |
| 41 | + }), |
| 42 | + ); |
| 43 | + |
| 44 | + const toSettings = new Map( |
| 45 | + toFontVariationSettings |
| 46 | + .split(",") |
| 47 | + .map((s) => s.trim()) |
| 48 | + .map((s) => { |
| 49 | + const [name, value] = s.split(" "); |
| 50 | + return [name.replace(/['"]/g, ""), Number.parseFloat(value)]; |
| 51 | + }), |
| 52 | + ); |
| 53 | + |
| 54 | + return Array.from(fromSettings.entries()).map(([axis, fromValue]) => ({ |
| 55 | + axis, |
| 56 | + fromValue, |
| 57 | + toValue: toSettings.get(axis) ?? fromValue, |
| 58 | + })); |
| 59 | + }, [fromFontVariationSettings, toFontVariationSettings]); |
| 60 | + |
| 61 | + const calculateDistance = ( |
| 62 | + x1: number, |
| 63 | + y1: number, |
| 64 | + x2: number, |
| 65 | + y2: number, |
| 66 | + ): number => { |
| 67 | + return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); |
| 68 | + }; |
| 69 | + |
| 70 | + const calculateFalloff = (distance: number): number => { |
| 71 | + const normalizedDistance = Math.min( |
| 72 | + Math.max(1 - distance / radiusZoomingZone, 0), |
| 73 | + 1, |
| 74 | + ); |
| 75 | + |
| 76 | + switch (falloff) { |
| 77 | + case "exponential": |
| 78 | + return normalizedDistance ** 2; |
| 79 | + case "gaussian": |
| 80 | + return Math.exp(-((distance / (radiusZoomingZone / 2)) ** 2) / 2); |
| 81 | + // case "linear": |
| 82 | + default: |
| 83 | + return normalizedDistance; |
| 84 | + } |
| 85 | + }; |
| 86 | + |
| 87 | + useAnimationFrame(() => { |
| 88 | + if (!containerRef.current) { |
| 89 | + return; |
| 90 | + } |
| 91 | + const containerRect = containerRef.current.getBoundingClientRect(); |
| 92 | + |
| 93 | + letterRefs.current.forEach((letterRef, index) => { |
| 94 | + if (!(mousePosition.elementX && mousePosition.elementY)) { |
| 95 | + return; |
| 96 | + } |
| 97 | + if (!letterRef) { |
| 98 | + return; |
| 99 | + } |
| 100 | + |
| 101 | + const rect = letterRef.getBoundingClientRect(); |
| 102 | + const letterCenterX = rect.left + rect.width / 2 - containerRect.left; |
| 103 | + const letterCenterY = rect.top + rect.height / 2 - containerRect.top; |
| 104 | + |
| 105 | + const distance = calculateDistance( |
| 106 | + mousePosition.elementX, |
| 107 | + mousePosition.elementY, |
| 108 | + letterCenterX, |
| 109 | + letterCenterY, |
| 110 | + ); |
| 111 | + |
| 112 | + if (distance >= radiusZoomingZone) { |
| 113 | + if ( |
| 114 | + letterRef.style.fontVariationSettings !== fromFontVariationSettings |
| 115 | + ) { |
| 116 | + letterRef.style.fontVariationSettings = fromFontVariationSettings; |
| 117 | + } |
| 118 | + return; |
| 119 | + } |
| 120 | + |
| 121 | + const falloffValue = calculateFalloff(distance); |
| 122 | + |
| 123 | + const newSettings = parsedSettings |
| 124 | + .map(({ axis, fromValue, toValue }) => { |
| 125 | + const interpolatedValue = |
| 126 | + fromValue + (toValue - fromValue) * falloffValue; |
| 127 | + return `'${axis}' ${interpolatedValue}`; |
| 128 | + }) |
| 129 | + .join(", "); |
| 130 | + |
| 131 | + interpolatedSettingsRef.current[index] = newSettings; |
| 132 | + letterRef.style.fontVariationSettings = newSettings; |
| 133 | + }); |
| 134 | + }); |
| 135 | + |
| 136 | + const words = children.split(" "); |
| 137 | + let letterIndex = 0; |
| 138 | + |
| 139 | + return ( |
| 140 | + <span |
| 141 | + ref={ref} |
| 142 | + className={`${className} inline`} |
| 143 | + onClick={onClick} |
| 144 | + {...props} |
| 145 | + > |
| 146 | + {words.map((word, wordIndex) => ( |
| 147 | + <span |
| 148 | + // biome-ignore lint/suspicious/noArrayIndexKey: <explanation> |
| 149 | + key={`${wordIndex}-letter-effect`} |
| 150 | + className="inline-block whitespace-nowrap" |
| 151 | + > |
| 152 | + {word.split("").map((letter) => { |
| 153 | + const currentLetterIndex = letterIndex++; |
| 154 | + return ( |
| 155 | + <motion.span |
| 156 | + key={currentLetterIndex} |
| 157 | + ref={(el: HTMLSpanElement | null) => { |
| 158 | + letterRefs.current[currentLetterIndex] = el; |
| 159 | + }} |
| 160 | + className="inline-block" |
| 161 | + aria-hidden="true" |
| 162 | + style={{ |
| 163 | + fontVariationSettings: |
| 164 | + interpolatedSettingsRef.current[currentLetterIndex], |
| 165 | + }} |
| 166 | + > |
| 167 | + {letter} |
| 168 | + </motion.span> |
| 169 | + ); |
| 170 | + })} |
| 171 | + {wordIndex < words.length - 1 && ( |
| 172 | + <span className="inline-block"> </span> |
| 173 | + )} |
| 174 | + </span> |
| 175 | + ))} |
| 176 | + <span className="sr-only">{children}</span> |
| 177 | + </span> |
| 178 | + ); |
| 179 | +}; |
| 180 | + |
| 181 | +VariableFontCursorProximity.displayName = "VariableFontCursorProximity"; |
| 182 | +export default VariableFontCursorProximity; |
0 commit comments