Glass Button

1"use client";
2 
3import {
4  GlassSurface,
5  type GlassSurfaceHandle,
6} from "@/components/ui/glass-surface";
7import {
8  glassEase,
9  MotionValue,
10  PRESS_DURATION,
11  prefersReducedMotion,
12  RELEASE_DURATION,
13  tween,
14} from "@/components/ui/glass-motion";
15import { cn } from "@/lib/utils";
16import { type ComponentProps, useCallback, useEffect, useRef } from "react";
17 
18const PRESS_SCALE = 0.92;
19const PRESS_LIFT = -0.2;
20 
21interface GlassButtonProps extends ComponentProps<"button"> {
22  size?: number;
23  tint?: number;
24  tintColor?: string;
25  variant?: "icon" | "capsule";
26}
27 
28function GlassButton({
29  size = 44,
30  tint = 0.2,
31  tintColor,
32  variant = "icon",
33  className,
34  style,
35  children,
36  type = "button",
37  onPointerDown,
38  onPointerUp,
39  onPointerCancel,
40  onPointerLeave,
41  onKeyDown,
42  onKeyUp,
43  ...props
44}: GlassButtonProps) {
45  const innerRef = useRef<HTMLSpanElement | null>(null);
46  const surfaceHandle = useRef<GlassSurfaceHandle | null>(null);
47  const scale = useRef(new MotionValue(1));
48  const lift = useRef(new MotionValue(0));
49  const pressed = useRef(false);
50  const frame = useRef(0);
51 
52  const apply = useCallback(() => {
53    frame.current = 0;
54    const inner = innerRef.current;
55    if (inner) {
56      const s = scale.current.get();
57      inner.style.transform = s === 1 ? "" : `scale(${s})`;
58    }
59    surfaceHandle.current?.setTintLift(lift.current.get());
60  }, []);
61 
62  const schedule = useCallback(() => {
63    if (frame.current === 0) {
64      frame.current = requestAnimationFrame(apply);
65    }
66  }, [apply]);
67 
68  useEffect(() => {
69    const subs = [scale.current.on(schedule), lift.current.on(schedule)];
70    return () => {
71      for (const off of subs) {
72        off();
73      }
74      cancelAnimationFrame(frame.current);
75    };
76  }, [schedule]);
77 
78  const press = useCallback(() => {
79    if (pressed.current) {
80      return;
81    }
82    pressed.current = true;
83    const d = prefersReducedMotion() ? 0 : PRESS_DURATION;
84    tween(scale.current, PRESS_SCALE, d, glassEase);
85    tween(lift.current, PRESS_LIFT, d, glassEase);
86  }, []);
87 
88  const release = useCallback(() => {
89    if (!pressed.current) {
90      return;
91    }
92    pressed.current = false;
93    const d = prefersReducedMotion() ? 0 : RELEASE_DURATION;
94    tween(scale.current, 1, d, glassEase);
95    tween(lift.current, 0, d, glassEase);
96  }, []);
97 
98  return (
99    <button
100      className={cn(
101// … truncated