"use client"; import type React from "react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { animate } from "motion/react"; import "./chips.css"; /* ------------------------------------------------------------------ props -- */ export type ChipsProps = { /** Chip radius, clamped to 0–40px. */ corner?: number; /** How far the cast shadow is thrown, 0–100. */ shadow?: number; /** Rows of four chips: 2, 3 or 4. */ rows?: 2 | 3 | 4 | "2" | "3" | "4"; /** "light" chips on paper, or "dark" chips on graphite. */ theme?: "light" | "dark"; /** Synthesised press, release, select and hover cues. */ sound?: boolean; /** The chip selected on first render; `null` for none. */ defaultValue?: string | null; /** Fired with the selected chip's id, or `null` once it is deselected. */ onChange?: (value: string | null) => void; }; /* ---------------------------------------------------------------- springs -- */ const SOFT = { type: "spring", stiffness: 420, damping: 30, mass: 0.7 } as const; const SNAP = { type: "spring", stiffness: 900, damping: 26, mass: 0.5 } as const; const POP = { type: "spring", stiffness: 700, damping: 18, mass: 0.6 } as const; const ENTRY = { type: "spring", stiffness: 260, damping: 22, mass: 0.9 } as const; /** How far a chip is still lifted while held down, in px. */ const DOWN = 1; const PER_ROW = 4; /* ------------------------------------------------------------------ sound -- */ /** * Synthesised, so nothing has to be downloaded. A click is a noise transient * through a bandpass (the plastic) plus a pitched body that drops fast (the * travel); that is what reads as tactile rather than as a beep. Kept quiet — * it should sit under the interaction. */ function useChipSound(enabled: boolean) { const engine = useRef<{ ctx: AudioContext; master: GainNode; noise: AudioBuffer } | null>(null); const on = useRef(enabled); on.current = enabled; const lastHover = useRef(0); const ensure = useCallback(() => { if (typeof window === "undefined") return null; if (!engine.current) { const AC = window.AudioContext ?? (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (!AC) return null; const ctx = new AC(); const master = ctx.createGain(); master.gain.value = 0.34; master.connect(ctx.destination); const len = Math.floor(ctx.sampleRate * 0.4); const noise = ctx.createBuffer(1, len, ctx.sampleRate); const data = noise.getChannelData(0); for (let i = 0; i < len; i += 1) data[i] = (Math.random() * 2 - 1) * (1 - i / len); engine.current = { ctx, master, noise }; } if (engine.current.ctx.state === "suspended") void engine.current.ctx.resume(); return engine.current; }, []); useEffect(() => () => void engine.current?.ctx.close().catch(() => {}), []); const voice = useCallback( ({ f = 200, f2 = 100, dur = 0.06, type = "triangle" as OscillatorType, g = 0.3, noise = 0.7, nf = 3000, q = 1.2, delay = 0, } = {}) => { if (!on.current) return; const e = ensure(); if (!e) return; const { ctx, master } = e; const t0 = ctx.currentTime + delay; if (noise > 0) { const src = ctx.createBufferSource(); src.buffer = e.noise; /* never twice the same */ src.playbackRate.value = 0.8 + Math.random() * 0.5; const bp = ctx.createBiquadFilter(); bp.type = "bandpass"; bp.frequency.value = nf; bp.Q.value = q; const ng = ctx.createGain(); ng.gain.setValueAtTime(0.0001, t0); ng.gain.exponentialRampToValueAtTime(Math.max(0.001, noise * g), t0 + 0.003); ng.gain.exponentialRampToValueAtTime(0.0001, t0 + dur * 0.8); src.connect(bp).connect(ng).connect(master); src.start(t0); src.stop(t0 + dur + 0.08); } const o = ctx.createOscillator(); o.type = type; o.frequency.setValueAtTime(f, t0); o.frequency.exponentialRampToValueAtTime(Math.max(30, f2), t0 + dur); const og = ctx.createGain(); og.gain.setValueAtTime(0.0001, t0); og.gain.exponentialRampToValueAtTime(Math.max(0.001, g), t0 + 0.004); og.gain.exponentialRampToValueAtTime(0.0001, t0 + dur); o.connect(og).connect(master); o.start(t0); o.stop(t0 + dur + 0.08); }, [ensure], ); return useRef({ unlock: () => { if (on.current) ensure(); }, /* a chip going down onto its edge */ press: () => voice({ f: 240, f2: 110, dur: 0.055, g: 0.26, noise: 0.8, nf: 3100, q: 1.1 }), /* it coming back up — lighter, brighter */ release: () => voice({ f: 330, f2: 220, dur: 0.034, g: 0.11, noise: 0.55, nf: 5400, q: 1.5 }), /* the chip that just became the selected one */ select: () => { voice({ f: 250, f2: 105, dur: 0.06, g: 0.27, noise: 0.78, nf: 2900, q: 1.1 }); voice({ f: 560, f2: 300, dur: 0.13, g: 0.08, noise: 0.12, nf: 2200, type: "sine", delay: 0.014 }); }, hover: () => { const now = performance.now(); if (now - lastHover.current < 110) return; lastHover.current = now; voice({ f: 1500, f2: 1250, dur: 0.015, g: 0.018, noise: 0.35, nf: 7200, q: 3 }); }, }).current; } /* ------------------------------------------------------------------ icons -- */ const ICONS: Record = { start: ( <> ), type: ( <> ), layout: ( <> ), color: ( <> ), style: ( <> ), imagery: ( <> ), elements: ( <> ), tactics: ( <> ), motion: ( <> ), grid: ( <> ), spacing: ( <> ), depth: ( <> ), voice: ( <> ), craft: ( ), flow: ( <> ), ship: ( <> ), }; const ITEMS = [ "Start", "Type", "Layout", "Color", "Style", "Imagery", "Elements", "Tactics", "Motion", "Grid", "Spacing", "Depth", "Voice", "Craft", "Flow", "Ship", ].map((label) => ({ id: label.toLowerCase(), label })); /* -------------------------------------------------------------- component -- */ /** * A list of 3D chips with a real press. * * Each chip is extruded: its lip is a hard box-shadow `--lift` px deep, and * pressing it drives the chip down by exactly that much while the lip shrinks * to match — so it travels onto its own edge rather than just shrinking. The * soft ground shadow squashes as it goes down. The selected chip stays pressed * in, inverted, one pixel proud of the surface. * * Every transform is Motion's; React only owns which chip is selected. */ export default function Chips({ corner = 20, shadow = 50, rows = 2, theme = "light", sound = true, defaultValue = "start", onChange, }: ChipsProps) { const sfx = useChipSound(sound); const rootRef = useRef(null); const chipRefs = useRef(new Map()); const [selected, setSelected] = useState(defaultValue); const selectedRef = useRef(selected); selectedRef.current = selected; const rowCount = Math.min(4, Math.max(2, Number(rows) || 2)); const visible = ITEMS.slice(0, rowCount * PER_ROW); /* the press travel, from the stylesheet — it is smaller at phone width */ const edge = useCallback(() => { /* declared on the list, which is inside the container its size is queried from */ const list = rootRef.current?.querySelector(".pchips__list"); if (!list) return 7; return parseFloat(getComputedStyle(list).getPropertyValue("--pchips-edge")) || 7; }, []); const isOn = (el: HTMLElement) => el.dataset.selected === "true"; const restY = useCallback((el: HTMLElement) => (isOn(el) ? edge() - DOWN : 0), [edge]); const depth = useCallback( (el: HTMLElement, px: number, transition: object = SNAP) => { const full = edge(); animate(el, { y: full - px }, transition); el.style.setProperty("--lift", `${px}px`); const ground = el.querySelector(".pchips__ground"); if (ground) { animate( ground, { opacity: 0.25 + (px / full) * 0.75, scaleX: 0.84 + (px / full) * 0.16 }, { duration: 0.18 }, ); } }, [edge], ); /* every chip straight to its resting state, no animation */ const settle = useCallback(() => { const full = edge(); chipRefs.current.forEach((el) => { const on = isOn(el); animate(el, { y: on ? full - DOWN : 0, scale: 1, opacity: 1 }, { duration: 0 }); el.style.setProperty("--lift", `${on ? DOWN : full}px`); const ground = el.querySelector(".pchips__ground"); if (ground) animate(ground, { opacity: on ? 0.36 : 1, scaleX: on ? 0.86 : 1 }, { duration: 0 }); }); }, [edge]); /* entrance: the rows drop in, chip by chip — and again whenever the row count changes */ useLayoutEffect(() => { settle(); const chips = visible.map((item) => chipRefs.current.get(item.id)).filter(Boolean) as HTMLButtonElement[]; chips.forEach((el, i) => { el.style.opacity = "0"; animate(el, { opacity: [0, 1] }, { duration: 0.22, delay: i * 0.055, ease: "easeOut" }); animate(el, { y: [restY(el) - 28, restY(el)], scale: [0.9, 1] }, { ...ENTRY, delay: i * 0.055 }); }); /* a hidden tab never runs those frames — never leave a chip stranded */ const rescue = window.setTimeout(() => { chips.forEach((el) => { if (el.style.opacity === "0") el.style.opacity = ""; }); }, 1400); return () => window.clearTimeout(rescue); /* the entrance belongs to the row count, not to every render */ }, [rowCount]); /* keep the press depth right when the chips change size */ useEffect(() => { const root = rootRef.current; if (!root || typeof ResizeObserver === "undefined") return; let last = edge(); const observer = new ResizeObserver(() => { const next = edge(); if (next !== last) { last = next; settle(); } }); observer.observe(root); return () => observer.disconnect(); }, [edge, settle]); function select(id: string) { const prev = selectedRef.current; const next = prev === id ? null : id; selectedRef.current = next; setSelected(next); if (next) sfx.select(); else sfx.release(); chipRefs.current.forEach((el, chipId) => { const icon = el.querySelector(".pchips__icon"); /* written now rather than on the next render, so `depth` reads the new state */ el.dataset.selected = String(chipId === next); if (chipId === next) { depth(el, DOWN); animate(el, { scale: [0.97, 1.02, 1] }, { duration: 0.34, ease: [0.2, 0.8, 0.2, 1] }); if (icon) animate(icon, { rotate: [-14, 0], scale: [1.25, 1] }, SNAP); } else if (chipId === prev) { depth(el, edge(), POP); animate(el, { scale: 1 }, SOFT); if (icon) animate(icon, { rotate: 0, scale: 1 }, SOFT); } }); onChange?.(next); } function wire(item: { id: string }) { const held = { current: false }; const el = () => chipRefs.current.get(item.id); const icon = () => el()?.querySelector(".pchips__icon") ?? null; const canHover = () => typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches; return { onPointerEnter: () => { const chip = el(); if (!chip || !canHover() || held.current || isOn(chip)) return; sfx.hover(); animate(chip, { y: -3, scale: 1.015 }, SOFT); const i = icon(); if (i) animate(i, { rotate: -7, scale: 1.14 }, SOFT); }, onPointerLeave: () => { const chip = el(); if (!chip || !canHover() || held.current || isOn(chip)) return; animate(chip, { y: 0, scale: 1 }, SOFT); const i = icon(); if (i) animate(i, { rotate: 0, scale: 1 }, SOFT); }, onPointerDown: (event: React.PointerEvent) => { if (event.button !== 0) return; const chip = el(); if (!chip) return; sfx.unlock(); held.current = true; try { chip.setPointerCapture(event.pointerId); } catch { /* capture is a nicety */ } sfx.press(); depth(chip, DOWN); animate(chip, { scale: 0.975 }, SNAP); const i = icon(); if (i) animate(i, { rotate: 0, scale: 0.94 }, SNAP); }, release: () => { const chip = el(); if (!chip || !held.current) return; held.current = false; if (isOn(chip)) return; sfx.release(); depth(chip, edge(), POP); animate(chip, { scale: 1 }, SOFT); const i = icon(); if (i) animate(i, { scale: 1 }, SOFT); }, }; } /* the handlers hold a little per-chip state, so they are made once per chip */ const handlers = useRef(new Map>()); const handlersFor = (item: { id: string }) => { let h = handlers.current.get(item.id); if (!h) { h = wire(item); handlers.current.set(item.id, h); } return h; }; function onKeyDown(event: React.KeyboardEvent, index: number) { const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0; if (!step) return; event.preventDefault(); const next = visible[(index + step + visible.length) % visible.length]; if (next) chipRefs.current.get(next.id)?.focus(); } const v = Math.min(100, Math.max(0, shadow)) / 100; const style = { "--corner": `${Math.min(40, Math.max(0, corner))}px`, "--shade": (v * 2).toFixed(3), "--cast": (0.04 + v * 0.58).toFixed(3), } as React.CSSProperties; const lines: (typeof ITEMS)[] = []; for (let r = 0; r < rowCount; r += 1) lines.push(visible.slice(r * PER_ROW, r * PER_ROW + PER_ROW)); return (

); }

Chips — Pin UI Component