"use client"; import { useEffect, useRef, useState, type PointerEvent } from "react"; import { motion, useMotionValue, animate, useReducedMotion } from "motion/react"; import { useSound } from "@web-kits/audio/react"; import type { SoundDefinition } from "@web-kits/audio"; // AlignUI toggle geometry (Figma 197728-11715 / -11709), scaled 2×. // Exact Figma ratios: track 32:18, thumb 14 (0.778 of track height), pad 2. const TRACK_W = 64; const TRACK_H = 36; const THUMB = 28; const OFFSET = 4; const TRAVEL = TRACK_W - THUMB - OFFSET * 2; // 28 // Fluid deformation happens ONLY on press (no hover change). const PRESS_EXTEND = 7; // press widens the thumb const PRESS_SHRINK = 7; // press squashes it vertically const DRAG_DEAD_ZONE = 4; // springs.moderate — the spring fluidfunctionalism uses. const SPRING = { type: "spring" as const, duration: 0.16, bounce: 0.15 }; // Smooth, soft pops (not mechanical). ON a touch higher than OFF. const ON_SOUND: SoundDefinition = { layers: [ { source: { type: "sine", frequency: 480 }, envelope: { attack: 0.006, decay: 0.12 }, gain: 0.14 }, { source: { type: "sine", frequency: 720 }, envelope: { attack: 0.005, decay: 0.08 }, gain: 0.05 }, ], }; const OFF_SOUND: SoundDefinition = { layers: [ { source: { type: "sine", frequency: 360 }, envelope: { attack: 0.007, decay: 0.14 }, gain: 0.14 }, { source: { type: "sine", frequency: 540 }, envelope: { attack: 0.006, decay: 0.1 }, gain: 0.05 }, ], }; export default function ToggleSwitch() { const reduce = useReducedMotion(); const [on, setOn] = useState(false); const [pressed, setPressed] = useState(false); const dragging = useRef(false); const didDrag = useRef(false); const pointerStart = useRef<{ clientX: number; originX: number } | null>(null); const motionX = useMotionValue(on ? OFFSET + TRAVEL : OFFSET); const playOn = useSound(ON_SOUND); const playOff = useSound(OFF_SOUND); // Thumb deforms only while pressed — the growing edge stays pinned. const thumbWidth = pressed ? THUMB + PRESS_EXTEND : THUMB; const thumbHeight = pressed ? THUMB - PRESS_SHRINK : THUMB; const thumbY = pressed ? OFFSET + PRESS_SHRINK / 2 : OFFSET; const extraWidth = thumbWidth - THUMB; const thumbX = on ? OFFSET + TRAVEL - extraWidth : OFFSET; // Spring the thumb to its resting x on state change (unless mid-drag). // initial={false} keeps the mount from animating. useEffect(() => { if (dragging.current) return; animate(motionX, thumbX, reduce ? { duration: 0 } : SPRING); }, [thumbX, motionX, reduce]); function flip(next: boolean) { setOn(next); if (next) playOn(); else playOff(); } function onPointerDown(e: PointerEvent) { if (e.pointerType === "mouse" && e.button !== 0) return; setPressed(true); dragging.current = false; didDrag.current = false; pointerStart.current = { clientX: e.clientX, originX: motionX.get() }; e.currentTarget.setPointerCapture(e.pointerId); } function onPointerMove(e: PointerEvent) { if (!pointerStart.current) return; const delta = e.clientX - pointerStart.current.clientX; if (!dragging.current) { if (Math.abs(delta) < DRAG_DEAD_ZONE) return; dragging.current = true; } const dragMax = TRACK_W - OFFSET - (THUMB + PRESS_EXTEND); const rawX = pointerStart.current.originX + delta; motionX.set(Math.max(OFFSET, Math.min(dragMax, rawX))); } function onPointerUp() { if (!pointerStart.current) return; setPressed(false); if (dragging.current) { dragging.current = false; didDrag.current = true; const dragMax = TRACK_W - OFFSET - (THUMB + PRESS_EXTEND); const midpoint = (OFFSET + dragMax) / 2; const shouldBeOn = motionX.get() > midpoint; if (shouldBeOn !== on) flip(shouldBeOn); else animate(motionX, on ? OFFSET + TRAVEL : OFFSET, reduce ? { duration: 0 } : SPRING); requestAnimationFrame(() => { didDrag.current = false; }); } pointerStart.current = null; } return ( { if (!didDrag.current) flip(!on); }} style={{ touchAction: "none" }} className="relative inline-flex rounded-full bg-[#f7f7f7] p-1.5 outline-none focus-visible:ring-2 focus-visible:ring-black/25" > {/* Inner track */} {/* Thumb — gradient pebble with a soft bevel + drop shadow (no icon when off) */} {/* red curved check (on) — the exact Figma asset path */} ); }

Interactions

Switch