/* 4글자 태그 + 숫자 값, 쉼표로 구분 */
font-variation-settings: 'wght' 650, 'wdth' 120, 'ital' 0.5;

span.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${ital}`;

@font-face {
  font-family: 'Compressa VF';
  src: url('https://res.cloudinary.com/.../CompressaPRO-GX.woff2');
  font-style: normal;
}

const chars = text.split('');
const spansRef = useRef<(HTMLSpanElement | null)[]>([]);

// 렌더링: 각 글자를 독립 span으로 분리
{chars.map((char, i) => (
  <span
    key={i}
    ref={el => { spansRef.current[i] = el; }}
    data-char={char}  // stroke 모드에서 ::after 콘텐츠용
    style={{ display: 'inline-block' }}
  >
    {char}
  </span>
))}

const mouseRef = useRef({ x: 0, y: 0 });   // 보간된 위치 (부드러운 값)
const cursorRef = useRef({ x: 0, y: 0 });   // 실제 커서 위치 (즉시 업데이트)

// rAF 루프 내부
mouseRef.current.x += (cursorRef.current.x - mouseRef.current.x) / 15;
mouseRef.current.y += (cursorRef.current.y - mouseRef.current.y) / 15;

const dist = (a, b) => Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2);

const getAttr = (distance, maxDist, minVal, maxVal) => {
  const val = maxVal - Math.abs((maxVal * distance) / maxDist);
  return Math.max(minVal, val + minVal);
};

마우스 거리 → wght: getAttr(d, maxDist, 100, 900)  → 100~1000
마우스 거리 → wdth: getAttr(d, maxDist, 5, 200)    → 5~205
마우스 거리 → ital: getAttr(d, maxDist, 0, 1)      → 0~1

useEffect(() => {
  let rafId: number;
  const animate = () => {
    // lerp 업데이트
    mouseRef.current.x += (cursorRef.current.x - mouseRef.current.x) / 15;

    spansRef.current.forEach(span => {
      if (!span) return;
      const rect = span.getBoundingClientRect();
      const d = dist(mouseRef.current, { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 });

      const wdth = width ? Math.floor(getAttr(d, maxDist, 5, 200)) : 100;
      const wght = weight ? Math.floor(getAttr(d, maxDist, 100, 900)) : 400;
      const italVal = italic ? getAttr(d, maxDist, 0, 1).toFixed(2) : '0';

      const newSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`;

      // 값이 바뀐 경우에만 DOM 업데이트
      if (span.style.fontVariationSettings !== newSettings) {
        span.style.fontVariationSettings = newSettings;
      }
    });

    rafId = requestAnimationFrame(animate);
  };
  animate();
  return () => cancelAnimationFrame(rafId);
}, [width, weight, italic, alpha]);

mousemove → cursorRef 즉시 업데이트
           ↓
rAF 루프 → mouseRef lerp 보간 (1/15씩 접근)
           ↓
         → 각 span과의 거리 계산 (dist)
           ↓
         → 거리 → 축 값 변환 (getAttr)
           ↓
         → span.style.fontVariationSettings 직접 설정

const setSize = useCallback(() => {
  const { width: containerW } = containerRef.current.getBoundingClientRect();

  // 컨테이너 너비를 글자 수로 나눠 폰트 크기 결정
  let newFontSize = containerW / (chars.length / 2);
  newFontSize = Math.max(newFontSize, minFontSize);

  setFontSize(newFontSize);
}, [chars.length, minFontSize, scale]);

useEffect(() => {
  const debouncedSetSize = debounce(setSize, 100);
  debouncedSetSize();
  window.addEventListener('resize', debouncedSetSize);
  return () => window.removeEventListener('resize', debouncedSetSize);
}, [setSize]);

<svg viewBox="0 0 1440 120">
  <defs>
    <path id="curve" d="M0,60 Q720,200 1440,60" fill="none" />
  </defs>
  <text>
    <textPath href="#curve" startOffset="0px">
      곡선 위의 텍스트
    </textPath>
  </text>
</svg>

M-100,40 Q500,440 1540,40

const uid = useId();
const pathId = `curve-${uid}`;
const pathD = `M-100,40 Q500,${40 + curveAmount} 1540,40`;

// SVG 구조
<defs>
  <path id={pathId} d={pathD} fill="none" stroke="transparent" />
</defs>
<text>
  <textPath ref={textPathRef} href={`#${pathId}`} startOffset={offset + 'px'}>
    {totalText}
  </textPath>
</text>

// 숨겨진 <text>로 실제 렌더링 길이를 측정
useEffect(() => {
  if (measureRef.current) setSpacing(measureRef.current.getComputedTextLength());
}, [text, className]);

// 경로를 빈틈 없이 채우기 위한 반복 횟수
const totalText = textLength
  ? Array(Math.ceil(1800 / textLength) + 2).fill(text).join('')
  : text;

Math.ceil(1800 / 300) + 2 = 6 + 2 = 8번 반복

useEffect(() => {
  if (!spacing || !ready) return;
  let frame = 0;
  const step = () => {
    if (!dragRef.current && textPathRef.current) {
      const delta = dirRef.current === 'right' ? speed : -speed;
      const currentOffset = parseFloat(
        textPathRef.current.getAttribute('startOffset') || '0'
      );
      let newOffset = currentOffset + delta;

      // wrap 처리: 텍스트 한 단위 길이로 순환
      const wrapPoint = spacing;
      if (newOffset <= -wrapPoint) newOffset += wrapPoint;
      if (newOffset > 0) newOffset -= wrapPoint;

      textPathRef.current.setAttribute('startOffset', newOffset + 'px');
    }
    frame = requestAnimationFrame(step);
  };
  frame = requestAnimationFrame(step);
  return () => cancelAnimationFrame(frame);
}, [spacing, speed, ready]);

speed=2, direction='left'일 때:
프레임 0: offset = -300 (초기값)
프레임 1: offset = -302
프레임 2: offset = -304
...
offset <= -spacing → offset += spacing (순환)

const onPointerDown = (e: PointerEvent) => {
  dragRef.current = true;
  lastXRef.current = e.clientX;
  velRef.current = 0;
  (e.target as HTMLElement).setPointerCapture(e.pointerId);
};

const onPointerMove = (e: PointerEvent) => {
  if (!dragRef.current || !textPathRef.current) return;
  const dx = e.clientX - lastXRef.current;
  lastXRef.current = e.clientX;
  velRef.current = dx;  // 속도 기록
  // dx만큼 오프셋 이동
  let newOffset = currentOffset + dx;
  // ... wrap 처리
};

const endDrag = () => {
  dragRef.current = false;
  // 마지막 속도의 방향으로 자동 스크롤 방향 결정
  dirRef.current = velRef.current > 0 ? 'right' : 'left';
};

pointerdown → dragRef = true, rAF 루프 일시정지
            ↓
pointermove → dx 계산 → startOffset 직접 이동 + velRef 기록
            ↓
pointerup   → dragRef = false, velRef 방향으로 dirRef 설정
            ↓
            → rAF 루프 재개 (새 방향으로)