16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T476b,'use client'; import { useEffect, useId, useRef } from 'react'; import { deckActivity, deckClamp, deckCylinder, deckHit, deckKeys, deckMatrix, deckOrder, deckProject, deckSpring, deckStep, } from './deck-math'; export type DeckProps = { colors?: readonly [string, string, string, string]; springSpeed?: number; speed?: number; autoPlay?: boolean; elevation?: number; compact?: boolean; paused?: boolean; className?: string; }; const defaults = ['#bdde83', '#5ee7d3', '#a791f4', '#e6ce84'] as const; const valid = (color: string | undefined, fallback: string) => color && /^#[\da-f]{6}$/i.test(color) ? color : fallback; const keyCorners = [ [-12.5, -12.5], [12.5, -12.5], [12.5, 12.5], [-12.5, 12.5], ]; const circuits = [ [-231, -231, 231, 231], [-222, -222, 222, 222], [-211, -211, 211, 211], ]; function perimeter(a: number, b: number, c: number, d: number) { return [deckProject(a, b), deckProject(c, b), deckProject(c, d), deckProject(a, d)] .map((p) => p.join(',')) .join(' '); } function Icon({ bank, index }: { bank: number; index: number }) { if (bank === 0) return ; if (bank === 1) return ( <> ); if (bank === 2) return ( <> ); return ( <> {Array.from({ length: (index % 3) + 1 }, (_, i) => ( ))} ); } function Knob() { const base = deckCylinder(39, 24), top = deckCylinder(26, 34); return ( ); } export default function Deck({ colors = defaults, springSpeed = 1, speed = 1, autoPlay = true, elevation = 1, compact = false, paused = false, className = '', }: DeckProps) { const host = useRef(null), svg = useRef(null), knob = useRef(null), pad = useRef(null), faces = useRef<(SVGGElement | null)[]>([]), lights = useRef<(SVGGElement | null)[]>([]), projections = useRef<(SVGGElement | null)[]>([]), pulses = useRef<(SVGCircleElement | null)[]>([]), sync = useRef<() => void>(() => {}), id = useId().replace(/:/g, ''); const options = useRef({ springSpeed, speed, autoPlay, elevation, paused }); options.current = { springSpeed, speed, autoPlay, elevation, paused }; useEffect(() => sync.current(), [springSpeed, speed, autoPlay, elevation, paused]); useEffect(() => { const root = host.current!, surface = svg.current!, media = matchMedia('(prefers-reduced-motion: reduce)'), heights = deckKeys.map(() => deckSpring()), brightness = deckKeys.map(() => deckSpring()), position = { x: deckSpring(), y: deckSpring(), z: deckSpring(76) }, padLight = deckSpring(); let raf = 0, last = 0, time = 0, active: number | null = null, pinned: number | null = null, entered = 0, inside = false, visible = true, gone = false, box = surface.getBoundingClientRect(), samples = 0, sampleStart = 0, down: { x: number; y: number; key: number | null } | null = null; function draw(dt = 0) { const o = options.current, still = media.matches, current = active ?? pinned, age = time - entered, activity = deckActivity( current, age, time, o.autoPlay && !still && !inside, pinned !== null, ), lift = deckClamp(o.elevation, 0.3, 1.8), rate = deckClamp(o.springSpeed, 0.35, 2); for (const key of deckKeys) { const z = deckStep( heights[key.id], activity.lifts[key.id] * lift, dt, rate, still, ), light = deckClamp( deckStep(brightness[key.id], activity.lights[key.id], dt, rate, still), 0, 1, ), face = faces.current[key.id], projection = projections.current[key.id]; face?.setAttribute('transform', `translate(0 ${(-z).toFixed(3)})`); lights.current[key.id]?.setAttribute('opacity', light.toFixed(3)); if (projection) { projection.setAttribute( 'opacity', (deckClamp(z / 20, 0, 1) * 0.44).toFixed(3), ); const lines = projection.querySelector('path')!; lines.setAttribute( 'd', keyCorners .map(([dx, dy]) => { const p = deckProject(key.x + dx, key.y + dy); return `M${p[0].toFixed(3)},${p[1].toFixed(3)}v${(-Math.max(0, z)).toFixed(3)}`; }) .join(''), ); } } const x = deckStep(position.x, activity.x, dt, rate * 0.42, still), y = deckStep(position.y, activity.y, dt, rate * 0.42, still), z = deckStep(position.z, activity.z * lift, dt, rate * 0.42, still), p = deckProject(x, y, z); knob.current?.setAttribute( 'transform', `translate(${p[0].toFixed(3)} ${p[1].toFixed(3)})`, ); pad.current?.setAttribute( 'opacity', deckClamp(deckStep(padLight, activity.pad, dt, rate, still), 0, 1).toFixed(3), ); pulses.current.forEach((node, i) => { if (!node) return; const u = ((time * 0.07 + i * 0.23) % 1) * 4, a = -231 + i * 9, b = 231 - i * 9, side = Math.floor(u), f = u % 1, point = side === 0 ? deckProject(a + (b - a) * f, a) : side === 1 ? deckProject(b, a + (b - a) * f) : side === 2 ? deckProject(b - (b - a) * f, b) : deckProject(a, b - (b - a) * f); node.setAttribute('cx', point[0].toFixed(3)); node.setAttribute('cy', point[1].toFixed(3)); }); root.dataset.active = activity.selected === null ? 'none' : String(activity.selected); root.dataset.pinned = pinned === null ? 'none' : String(pinned); root.dataset.knob = `${x.toFixed(3)},${y.toFixed(3)},${z.toFixed(3)}`; root.dataset.time = time.toFixed(3); root.dataset.ready = 'true'; } function stop() { cancelAnimationFrame(raf); raf = 0; } function tick(now: number) { raf = 0; if (gone || !root.isConnected || !visible || document.hidden) return; if (options.current.paused || media.matches) { draw(); return; } const elapsed = now - last; if (elapsed < 1000 / 60 - 0.5) { raf = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, elapsed / 1000); last = now; time += dt * deckClamp(options.current.speed, 0.3, 2); draw(dt); samples++; if (now - sampleStart >= 750) { root.dataset.fps = ((samples * 1000) / (now - sampleStart)).toFixed(1); sampleStart = now; samples = 0; } raf = requestAnimationFrame(tick); } function wake() { if (!gone && !raf && visible && !document.hidden) { last = sampleStart = performance.now(); samples = 0; raf = requestAnimationFrame(tick); } } function changed() { stop(); draw(); wake(); } sync.current = changed; function select(next: number | null) { if (next !== active) { active = next; entered = time; } if (media.matches) draw(); else wake(); } function point(event: PointerEvent) { const scale = Math.min(box.width / 1000, box.height / 760); if (!scale) return null; return deckHit( (event.clientX - box.left - (box.width - 1000 * scale) / 2) / scale, (event.clientY - box.top - (box.height - 760 * scale) / 2) / scale, ); } function move(event: PointerEvent) { if (options.current.paused) return; inside = true; select(point(event)); } function leave() { inside = false; select(null); } function press(event: PointerEvent) { if (options.current.paused || compact) return; const next = point(event); down = { x: event.clientX, y: event.clientY, key: next }; active = next; entered = time; surface.focus({ preventScroll: true }); if (media.matches) draw(); else wake(); } function release(event: PointerEvent) { if ( down && !options.current.paused && Math.hypot(event.clientX - down.x, event.clientY - down.y) < 8 && point(event) === down.key ) { pinned = down.key === pinned ? null : down.key; entered = time; } down = null; if (media.matches) draw(); else wake(); } function cancel() { down = null; leave(); } function key(event: KeyboardEvent) { if ( options.current.paused || compact || ![ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' ', 'Escape', ].includes(event.key) ) return; event.preventDefault(); const current = active ?? pinned ?? 0; if (event.key === 'Escape') { pinned = null; select(null); } else if (event.key === ' ' || event.key === 'Enter') { pinned = pinned === current ? null : current; entered = time; select(current); } else { const next = event.key === 'Home' ? 0 : event.key === 'End' ? 64 : deckClamp( current + (event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : event.key === 'ArrowUp' ? -4 : 4), 0, 64, ); select(next); } if (media.matches) draw(); else wake(); } function measure() { box = surface.getBoundingClientRect(); } function visibility() { stop(); wake(); } const resize = new ResizeObserver(measure), observer = new IntersectionObserver(([e]) => { visible = e.isIntersecting; visibility(); }); resize.observe(surface); observer.observe(root); surface.addEventListener('pointermove', move); surface.addEventListener('pointerdown', press); surface.addEventListener('pointerup', release); surface.addEventListener('pointerleave', cancel); surface.addEventListener('pointercancel', cancel); surface.addEventListener('keydown', key); surface.addEventListener('blur', cancel); window.addEventListener('scroll', measure, true); document.addEventListener('visibilitychange', visibility); media.addEventListener('change', changed); draw(); wake(); return () => { gone = true; stop(); sync.current = () => {}; resize.disconnect(); observer.disconnect(); surface.removeEventListener('pointermove', move); surface.removeEventListener('pointerdown', press); surface.removeEventListener('pointerup', release); surface.removeEventListener('pointerleave', cancel); surface.removeEventListener('pointercancel', cancel); surface.removeEventListener('keydown', key); surface.removeEventListener('blur', cancel); window.removeEventListener('scroll', measure, true); document.removeEventListener('visibilitychange', visibility); media.removeEventListener('change', changed); }; }, [compact]); const gradient = `url(#${id}-spectrum)`, halo = `url(#${id}-halo)`; return (

); } const styles = `.deck{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center;overflow:hidden;background:#08080a;container-type:size;user-select:none}.deck>svg{display:block;width:100%;height:100%;max-height:100%;outline:none;touch-action:pan-y}.deck svg *{vector-effect:non-scaling-stroke}.deck svg:focus-visible{outline:1px solid #fff;outline-offset:-5px}.deck-knob{stroke-opacity:.66}`; 18:T142b,import { spring } from 'motion'; export type DeckPoint = [number, number]; export type DeckKey = { id: number; bank: number; row: number; column: number; x: number; y: number; }; export const deckClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export const deckProject = (x: number, y: number, z = 0): DeckPoint => [ 500 + ((x - y) * Math.sqrt(3)) / 2, 425 + (x + y) / 2 - z, ]; export const deckKeys: DeckKey[] = Array.from({ length: 64 }, (_, id) => { const bank = Math.floor(id / 16), local = id % 16, row = Math.floor(local / 4), column = local % 4; return { id, bank, row, column, x: (bank % 2 ? 142 : -142) + (column - 1.5) * 32, y: (bank < 2 ? -142 : 142) + (row - 1.5) * 32, }; }); export const deckOrder = [...deckKeys].sort( (a, b) => a.x + a.y - b.x - b.y || a.id - b.id, ); export const deckMatrix = (x: number, y: number) => { const p = deckProject(x, y); return `matrix(.8660254 .5 -.8660254 .5 ${p[0].toFixed(3)} ${p[1].toFixed(3)})`; }; /** Inverse projection tests the stationary footprint, so a raised key cannot * lose hover merely because it has moved away from the pointer. */ export function deckHit(px: number, py: number): number | null { const a = (px - 500) / (Math.sqrt(3) / 2), b = (py - 425) * 2, x = (a + b) / 2, y = (b - a) / 2; if (Math.abs(x) <= 72 && Math.abs(y) <= 72) return 64; const key = deckKeys.find((k) => Math.abs(k.x - x) <= 15 && Math.abs(k.y - y) <= 15); return key?.id ?? null; } export function deckActivity( active: number | null, elapsed: number, time: number, autoPlay: boolean, pinned = false, ) { let selected = active, age = elapsed, automatic = false; if (selected === null && autoPlay) { const cycle = time % 18; automatic = true; if (cycle < 5.4) { selected = [5, 10, 22][Math.floor(cycle / 1.8)]; age = cycle % 1.8; } else { selected = 64; age = cycle - 5.4; } } const lifts = new Float32Array(64), lights = new Float32Array(64); for (const key of deckKeys) { if (selected !== null && selected < 64) { const origin = deckKeys[selected], distance = Math.hypot(key.column - origin.column, key.row - origin.row); if (key.bank === origin.bank) { lights[key.id] = Math.max(0, 1 - distance * 0.36); if (key.id === selected) lifts[key.id] = 30; } } const cascade = selected === 64 || (pinned && age > 0.6); if (cascade) { const offset = selected === 64 ? age : age - 0.6, local = key.row * 4 + key.column, delay = key.bank * 1.65 + local * 0.085, phase = (offset - delay + 9) % 9; if (offset >= delay && phase < 1.05) { const envelope = phase < 0.62 ? 1 : Math.max(0, 1 - (phase - 0.62) / 0.43); lifts[key.id] = Math.max(lifts[key.id], 27 * envelope); lights[key.id] = Math.max(lights[key.id], envelope); } } } const target = selected !== null && selected < 64 ? deckKeys[selected] : { x: 0, y: 0 }; return { selected, automatic, lifts, lights, x: target.x, y: target.y, z: selected === 64 ? 87 : selected === null ? 76 : 94, pad: selected === 64 ? 1 : 0, }; } export type DeckSpring = { value: number; velocity: number; target: number; speed: number; elapsed: number; generator: ReturnType | null; }; export const deckSpring = (value = 0): DeckSpring => ({ value, velocity: 0, target: value, speed: 1, elapsed: 0, generator: null, }); /** Framer Motion's analytic spring generator is sampled by one shared 60Hz * clock; target changes retain velocity instead of restarting the movement. */ export function deckStep( state: DeckSpring, target: number, dt: number, speed = 1, instant = false, ) { const rate = deckClamp(speed, 0.35, 2); if (instant) { state.value = state.target = target; state.velocity = 0; state.generator = null; return target; } if (target !== state.target || rate !== state.speed) { state.generator = spring({ keyframes: [state.value, target], velocity: state.velocity, stiffness: 145 * rate * rate, damping: 23 * rate, mass: 1, restDelta: 0.001, restSpeed: 0.01, }); state.target = target; state.speed = rate; state.elapsed = 0; } if (state.generator && dt > 0) { const old = state.value; state.elapsed += dt * 1000; const next = state.generator.next(state.elapsed); state.value = next.value; state.velocity = (state.value - old) / dt; if (next.done) { state.value = target; state.velocity = 0; state.generator = null; } } return state.value; } /** Screen-space cylinder with a solid front wall and an elliptical top. */ export function deckCylinder(radius: number, height: number) { const rx = radius * Math.sqrt(1.5), ry = radius / Math.sqrt(2); return { rx, ry, wall: `M${-rx},${-height}A${rx},${ry} 0 0 0 ${rx},${-height}L${rx},0A${rx},${ry} 0 0 1 ${-rx},0Z`, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"deck":[{"name":"deck.tsx","code":"$17"},{"name":"deck-math.ts","code":"$18"}]},"initialElement":"deck","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]