use-glass-pointer

1"use client";
2 
3import { useMotionValue, useSpring } from "motion/react";
4import * as React from "react";
5import { GLASS_SPECULAR, GLASS_SPRING } from "../lib/glass/config";
6 
7const IDLE_X = 50;
8const IDLE_Y = 32;
9 
10/**
11 * Writes the lighting inputs straight to the node as CSS custom properties, so
12 * neither ever costs a React render:
13 *
14 * `--pane-mx` / `--pane-my` — pointer position in percent, for the glint that
15 * rides the rim under the cursor.
16 *
17 * `--pane-spin` — angle of the specular arcs around the border. Glass catches
18 * the light from a fixed direction, so the angle follows where the surface sits
19 * in the viewport (scrolling travels the light around the rim) and the pointer
20 * takes over while it's on the surface.
21 *
22 * Everything is spring-smoothed, and the angle is unwrapped before the spring
23 * so a pointer crossing due-left takes the short way round.
24 */
25export function useGlassPointer<T extends HTMLElement>() {
26  const ref = React.useRef<T | null>(null);
27  const [active, setActive] = React.useState(false);
28 
29  const mx = useMotionValue(IDLE_X);
30  const my = useMotionValue(IDLE_Y);
31  const spin = useMotionValue(GLASS_SPECULAR.angle);
32  const smoothX = useSpring(mx, GLASS_SPRING.hover);
33  const smoothY = useSpring(my, GLASS_SPRING.hover);
34  const smoothSpin = useSpring(spin, GLASS_SPRING.drag);
35 
36  React.useEffect(() => {
37    const node = ref.current;
38    if (!node) return;
39 
40    node.style.setProperty("--pane-mx", `${IDLE_X}%`);
41    node.style.setProperty("--pane-my", `${IDLE_Y}%`);
42    node.style.setProperty("--pane-spin", `${GLASS_SPECULAR.angle}deg`);
43 
44    const unsubX = smoothX.on("change", (value) => {
45      node.style.setProperty("--pane-mx", `${value}%`);
46    });
47    const unsubY = smoothY.on("change", (value) => {
48      node.style.setProperty("--pane-my", `${value}%`);
49    });
50    const unsubSpin = smoothSpin.on("change", (value) => {
51      node.style.setProperty("--pane-spin", `${value}deg`);
52    });
53 
54    /** shortest way round: keeps the spring from unwinding the long arc */
55    const setSpin = (target: number) => {
56      const current = spin.get();
57      spin.set(current + wrapDelta(target - current));
58    };
59 
60    /** angle the light comes from, as a function of viewport position */
61    const spinFromScroll = (rect: DOMRect) => {
62      const viewport = window.innerHeight || 1;
63      const progress = clamp01((rect.top + rect.height / 2) / viewport);
64      return GLASS_SPECULAR.angle + (progress - 0.5) * GLASS_SPECULAR.travel;
65// … truncated