Proximity Text

1"use client";
2 
3import React, { useEffect, useRef } from "react";
4 
5const ProximityText = ({ text }) => {
6  const wordRef = useRef([]);
7  const isHoverRef = useRef(false);
8  const rectsRef = useRef([]);
9 
10  const cacheRects = () => {
11    rectsRef.current = wordRef.current.map((el) => el.getBoundingClientRect());
12  };
13 
14  const resetWeights = () => {
15    wordRef.current.forEach((el) => (el.style.fontWeight = "400"));
16  };
17 
18  useEffect(() => {
19    const handleMouse = (e) => {
20      if (!isHoverRef.current) return;
21      const mouseX = e.clientX;
22      const maxDistance = 30;
23 
24      rectsRef.current.forEach((rect, i) => {
25        const centerX = rect.left + rect.width / 2;
26        const distance = Math.abs(mouseX - centerX);
27        const weight = Math.max(
28          400,
29          Math.round(900 - (distance / maxDistance) * 500)
30        );
31        wordRef.current[i].style.fontWeight = String(weight);
32      });
33    };
34 
35    window.addEventListener("mousemove", handleMouse);
36    return () => window.removeEventListener("mousemove", handleMouse);
37  }, []);
38 
39  return (
40    <span
41      onMouseEnter={() => {
42        isHoverRef.current = true;
43        cacheRects();
44      }}
45      onMouseLeave={() => {
46        isHoverRef.current = false;
47        resetWeights();
48      }}
49      className="cursor-pointer inline-flex"
50    >
51      {text.split("").map((letter, i) => (
52        <span
53          ref={(el) => {
54            if (el) wordRef.current[i] = el;
55          }}
56          key={i}
57          className="transition-all duration-150 font-[family-name:var(--font-inter)]"
58        >
59          {letter === " " ? "\u00A0" : letter}
60        </span>
61      ))}
62    </span>
63  );
64};
65 
66export default function Demo() {
67  return (
68    <div className="flex items-center justify-center text-4xl text-white">
69      <ProximityText text="Hover over me" />
70    </div>
71  );
72}
73