18:I[55681,["/_next/static/immutable/chunks/0n1e3sa98ofw1.js","/_next/static/immutable/chunks/08d5fd10hv216.js","/_next/static/immutable/chunks/0flz64rcijipw.js","/_next/static/immutable/chunks/1xn4tjfk8re4z.js","/_next/static/immutable/chunks/0le58q90h2df-.js"],"default"] 19:T4ba8,"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 (

); } 1a:T1362,/* =========================================================================== Chips — a selection list of 3D chips with a real press. Each chip is extruded: the lip is a hard shadow `--lift` px deep, and the press drives the chip down by exactly that much while the lip shrinks to match. The component sizes itself off its own width (a container query), so it is the same component in a sidebar, a stage or a phone. Two themes: light chips on paper, and graphite chips on near-black. The selected chip is the inverse of the rest in both. =========================================================================== */ .pchips { --corner: 20px; --cast: 0.33; --shade: 1; --pchips-face-top: #ffffff; --pchips-face-bottom: #f4f2ee; --pchips-ink: #111111; --pchips-lip: #d8d4cc; --pchips-sheen: rgb(255 255 255 / 0.9); --pchips-edge-line: rgb(0 0 0 / 0.04); --pchips-cast-rgb: 40 36 28; --pchips-on-top: #35332f; --pchips-on-bottom: #191817; --pchips-on-ink: #ffffff; --pchips-on-lip: #0c0c0b; --pchips-focus: #1b1b1b; container-type: inline-size; width: min(100%, 60rem); font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } .pchips[data-theme="dark"] { --pchips-face-top: #34332f; --pchips-face-bottom: #242320; --pchips-ink: #f4f2ee; --pchips-lip: #0d0d0c; --pchips-sheen: rgb(255 255 255 / 0.09); --pchips-edge-line: rgb(0 0 0 / 0.35); --pchips-cast-rgb: 0 0 0; --pchips-on-top: #ffffff; --pchips-on-bottom: #e9e6e0; --pchips-on-ink: #111111; --pchips-on-lip: #a9a49a; --pchips-focus: #f4f2ee; } .pchips__list { /* the press travel; the component reads it back, so the two cannot disagree */ --pchips-edge: 7px; /* the block sits centred in whatever holds it; the rows stay left-aligned */ width: fit-content; max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; } .pchips__row { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; } /* ---- the 3D chip -------------------------------------------------------- */ .pchips__chip { --lift: 7px; --lip-color: var(--pchips-lip); position: relative; display: inline-flex; align-items: center; gap: 13px; margin: 0; padding: 15px 26px 15px 20px; border: 0; border-radius: var(--corner); background: linear-gradient(180deg, var(--pchips-face-top) 0%, var(--pchips-face-bottom) 100%); color: var(--pchips-ink); font-family: inherit; font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; will-change: transform; box-shadow: inset 0 1px 0 var(--pchips-sheen), 0 var(--lift) 0 0 var(--lip-color), 0 calc(var(--lift) + 2px) 0 0 var(--pchips-edge-line), 0 calc(var(--lift) + 9px * var(--shade)) calc(18px * var(--shade)) -7px rgb(var(--pchips-cast-rgb) / var(--cast)); transition: box-shadow 0.16s ease, background 0.28s ease, color 0.28s ease; } /* pixel pointing-hand cursor */ @media (hover: hover) { .pchips__chip { cursor: url("data:image/svg+xml;utf8,") 6 2, pointer; } } .pchips__chip:focus-visible { outline: 3px solid var(--pchips-focus); outline-offset: 5px; } .pchips__chip[data-selected="true"] { --lip-color: var(--pchips-on-lip); background: linear-gradient(180deg, var(--pchips-on-top) 0%, var(--pchips-on-bottom) 100%); color: var(--pchips-on-ink); } .pchips__icon { display: block; flex: none; width: 30px; height: 30px; } /* soft ground shadow, squashed while the chip is held down */ .pchips__ground { position: absolute; left: 5%; right: 5%; bottom: -13px; z-index: -1; height: 16px; border-radius: 50%; background: rgb(var(--pchips-cast-rgb) / calc(0.2 * var(--shade))); filter: blur(9px); pointer-events: none; } .pchips__label { display: block; } /* ---- narrow: the same chips, a size down -------------------------------- */ @container (max-width: 760px) { .pchips__list { --pchips-edge: 5px; gap: 18px; } .pchips__row { gap: 14px; } .pchips__chip { --lift: 5px; gap: 9px; padding: 11px 17px 11px 13px; font-size: 19px; } .pchips__icon { width: 22px; height: 22px; } .pchips__ground { bottom: -9px; height: 12px; filter: blur(7px); } } @media (prefers-reduced-motion: reduce) { .pchips__chip { transition: none; } } 10:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Chips — Pin UI\",\"description\":\"A selection list of 3D chips that press into the surface. Every chip is extruded: its lip is a hard shadow as deep as the chip travels, and a press drives it down by exactly that much while the lip shrinks to match, so it lands on its own edge instead of just shrinking. The selected chip stays press\",\"url\":\"https://pinui.xyz/components/chips\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://pinui.xyz/#components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Chips\",\"item\":\"https://pinui.xyz/components/chips\"}]}"}}]],["$","$L18",null,{"entry":{"slug":"chips","name":"Chips","isNew":true,"tagline":"A selection list of 3D chips that press into the surface.","blurb":"Every chip is extruded: its lip is a hard shadow as deep as the chip travels, and a press drives it down by exactly that much while the lip shrinks to match, so it lands on its own edge instead of just shrinking. The selected chip stays pressed in, inverted, a pixel proud of the surface.","highlights":["A real press, not a scale","Light and dark","Synthesised clicks","Arrow-key navigation"],"clip":"/clips/loop/chips.mp4","poster":"/clips/loop/chips.jpg","sound":true,"zoom":0.94,"stage":"#edeae4","stageDark":"#121211","wide":true,"usage":"import Chips from \"@/components/library/Chips\";\n\n","props":[{"name":"corner","type":"number","fallback":"20","note":"Chip radius, clamped to 0–40px."},{"name":"shadow","type":"number","fallback":"50","note":"How far the cast shadow is thrown, 0–100."},{"name":"rows","type":"2 | 3 | 4","fallback":"2","note":"Rows of four chips. Changing it drops the new set in."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"Paper chips, or graphite. The selected chip is the inverse in both."},{"name":"sound","type":"boolean","fallback":"true","note":"Press, release, select and hover clicks, synthesised at play time."},{"name":"defaultValue","type":"string | null","fallback":"\"start\"","note":"The chip selected on first render."},{"name":"onChange","type":"(value) => void","note":"Fired with the selected chip's id, or null once it is deselected."}],"files":[{"name":"Chips.tsx","lang":"tsx"},{"name":"chips.css","lang":"css"}],"info":{"paragraphs":["Each chip is a little block with depth. Its lip is a hard shadow exactly as deep as the chip can travel, so pressing it drives the chip down onto its own edge while the lip shrinks to match — the soft ground shadow squashes with it. Hover lifts the chip a few pixels and tips its icon; letting go springs it back up with a pop.","Selecting a chip leaves it pressed in and inverted; selecting it again lets it back up. Every click is synthesised — a noise transient through a bandpass for the plastic, and a pitched body that drops fast for the travel — so there is nothing to download, and no two clicks are quite the same. The component sizes itself off its own width, so the same chips work on a stage, in a sidebar or on a phone."]},"origin":{"label":"Chips"}},"panes":[{"name":"Chips.tsx","lang":"tsx","code":"$19"},{"name":"chips.css","lang":"css","code":"$1a"}],"registryUrl":"https://pinui.xyz/r/chips.json"}]]

Chips — Pin UI Component