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:T1c97,'use client'; import LineStage, { edge, limit, node, outline, path, settle, spring, type Factory, type Input, type LineProps, type Point, } from './line-scene'; const createDrawer: Factory = (group, id) => { const project = (x: number, y: number, z: number): Point => [ 320 + (x * 0.83 - y * 0.55) * 1.32, 312 + (x * 0.55 + y * 0.83) * 0.58 - z * 1.2, ]; const polygon = (p: [number, number, number][]) => outline( p.map((v) => project(...v)), true, ); const defs = node(group, 'defs'); const gradient = node(defs, 'linearGradient', { id: `${id}-case`, x1: 0, y1: 0, x2: 1, y2: 1, }); node(gradient, 'stop', { offset: 0, 'stop-color': '#233033' }); node(gradient, 'stop', { offset: 1, 'stop-color': '#0c1416' }); const body = node(group, 'g'); path(body, { d: polygon([ [-62, -47, 0], [62, -47, 0], [62, 45, 0], [-62, 45, 0], ]), fill: '#0a1113', stroke: '#465850', }); path(body, { d: polygon([ [58, -42, 5], [58, 42, 5], [58, 42, 150], [58, -42, 150], ]), fill: `url(#${id}-case)`, stroke: '#70857b', }); path(body, { d: polygon([ [-58, -42, 150], [58, -42, 150], [58, 42, 150], [-58, 42, 150], ]), fill: '#1a2729', stroke: '#83988a', }); path(body, { d: polygon([ [-58, 42, 5], [58, 42, 5], [58, 42, 150], [-58, 42, 150], ]), fill: '#0c1517', stroke: '#92a597', }); path(body, { d: polygon([ [-54, -38, 150], [54, -38, 150], [54, 38, 150], [-54, 38, 150], ]), stroke: '#445951', 'stroke-width': 0.55, }); // Three inset bays, machined corners and a quiet reveal between the shell and tray. const plate = (x0: number, x1: number, y: number, z0: number, z1: number, r = 2) => polygon([ [x0 + r, y, z0], [x1 - r, y, z0], [x1, y, z0 + r], [x1, y, z1 - r], [x1 - r, y, z1], [x0 + r, y, z1], [x0, y, z1 - r], [x0, y, z0 + r], ]); const drawers = Array.from({ length: 3 }, (_, i) => { const z = 10 + i * 45; path(body, { d: plate(-52, 52, 42, z + 2, z + 39), fill: '#050d0f', stroke: '#2c4440', }); const layer = node(group, 'g', { 'data-drawer': i }); const floor = path(layer, { fill: '#142023', stroke: '#657e71', 'stroke-width': 0.65, }); const dividers = path(layer, { stroke: '#3f5b51', 'stroke-width': 0.6 }); const left = path(layer, { fill: '#172529', stroke: '#5c7569', 'stroke-width': 0.65, }); const right = path(layer, { fill: '#0e191c', stroke: '#5c7569', 'stroke-width': 0.65, }); const front = path(layer, { fill: `url(#${id}-case)`, stroke: '#9bb19f', 'stroke-width': 0.85, 'data-front': i, }); const crease = path(layer, { stroke: '#425a50', 'stroke-width': 0.6 }); const pull = path(layer, { fill: '#172726', stroke: '#a6b6a3', 'stroke-width': 0.8, }); const mark = path(layer, { stroke: '#738f7c', 'stroke-width': 0.65 }); return { z, layer, floor, dividers, left, right, front, crease, pull, mark, open: spring(), light: spring(), }; }); let pin = -1, keyboardIndex = 1; const pick = (input: Input, live = false) => { let nearest = 0, best = Infinity; drawers.forEach((d, i) => { const p = project(0, live ? 43 + d.open.x * 64 : 42, d.z + 20); const distance = Math.abs(p[1] - input.y) + Math.abs(p[0] - input.x) * 0.12; if (distance < best) { best = distance; nearest = i; } }); return nearest; }; function paint() { drawers.forEach((d) => { const frontY = 43 + d.open.x * 64; const floorZ = d.z + 7, wallZ = d.z + 28; d.floor.setAttribute( 'd', polygon([ [-48, 42, floorZ], [48, 42, floorZ], [48, frontY, floorZ], [-48, frontY, floorZ], ]), ); d.dividers.setAttribute( 'd', [-17, 17] .map((x) => outline([ project(x, 42, floorZ + 0.7), project(x, frontY - 3, floorZ + 0.7), ]), ) .join(''), ); d.left.setAttribute( 'd', polygon([ [-48, 42, floorZ], [-48, frontY, floorZ], [-48, frontY, wallZ], [-48, 42, wallZ], ]), ); d.right.setAttribute( 'd', polygon([ [48, 42, floorZ], [48, frontY, floorZ], [48, frontY, wallZ], [48, 42, wallZ], ]), ); d.front.setAttribute('d', plate(-53, 53, frontY + 1, d.z, d.z + 40, 3)); d.crease.setAttribute('d', plate(-50, 50, frontY + 1.1, d.z + 3, d.z + 37, 2)); d.pull.setAttribute('d', plate(-18, 18, frontY + 3, d.z + 16, d.z + 22, 2)); d.mark.setAttribute( 'd', [0, 1, 2] .map((i) => outline([ project(-36 + i * 3, frontY + 1.3, d.z + 31), project(-36 + i * 3, frontY + 1.3, d.z + 33), ]), ) .join(''), ); d.front.setAttribute('stroke', edge(d.light.x)); d.pull.setAttribute('stroke', edge(d.light.x)); d.layer.setAttribute('data-open', d.open.x.toFixed(3)); }); } return { reset() { pin = -1; drawers.forEach((d) => { d.open.x = d.open.v = d.light.x = d.light.v = 0; }); }, update(dt, input, small) { const active = pin >= 0 ? pin : input.strength > 0.04 ? pick(input) : -1; let moving = false; drawers.forEach((d, i) => { const amount = i === active ? (pin >= 0 ? 1 : input.strength) * (small ? 0.8 : 1) : 0; moving = settle(d.open, amount, dt, 98, 18) || moving; moving = settle(d.light, i === active ? input.strength * 0.8 + 0.2 : 0, dt, 110, 20) || moving; }); paint(); return moving; }, activate(input) { const selected = pick(input, true); pin = pin === selected ? -1 : selected; }, key(key, input) { if (key !== 'Enter' && key !== ' ') pin = -1; if (key === 'ArrowUp' || key === 'ArrowRight') keyboardIndex = limit(keyboardIndex + 1, 0, 2); if (key === 'ArrowDown' || key === 'ArrowLeft') keyboardIndex = limit(keyboardIndex - 1, 0, 2); if (key === 'Home') keyboardIndex = 0; if (key === 'End') keyboardIndex = 2; if (key === 'Enter' || key === ' ') pin = pin === keyboardIndex ? -1 : keyboardIndex; const p = project(0, 42, drawers[keyboardIndex].z + 20); input.x = p[0]; input.y = p[1]; }, }; }; export default function Drawer(props: LineProps) { return ( ); } 18:T2c1e,'use client'; import { useEffect, useId, useRef } from 'react'; export type LineProps = { compact?: boolean; paused?: boolean; className?: string; intensity?: number; speed?: number; }; export type Point = [number, number]; export type Input = { x: number; y: number; strength: number }; export type Scene = { update: (dt: number, input: Input, small: boolean) => boolean; reset: () => void; pointer?: (input: Input) => void; activate?: (input: Input) => void; key?: (key: string, input: Input) => void; }; export type Factory = (group: SVGGElement, id: string) => Scene; export const limit = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v)); export const mix = (a: number, b: number, t: number) => a + (b - a) * t; export const coordinates = (p: Point) => `${p[0].toFixed(2)},${p[1].toFixed(2)}`; export const outline = (points: Point[], closed = false) => 'M' + points.map(coordinates).join('L') + (closed ? 'Z' : ''); export function node( parent: SVGElement, tag: K, attrs: Record = {}, ) { const element = document.createElementNS('http://www.w3.org/2000/svg', tag); for (const [key, value] of Object.entries(attrs)) element.setAttribute(key, String(value)); parent.append(element); return element; } export function path(parent: SVGElement, attrs: Record = {}) { return node(parent, 'path', { fill: 'none', stroke: '#91a29a', 'stroke-width': 0.75, ...attrs, }); } export const spring = (x = 0) => ({ x, v: 0 }); /** Exact damped oscillator step: stable across variable frame lengths, no Euler overshoot. */ export function settle( s: { x: number; v: number }, target: number, dt: number, stiffness = 115, damping = 17, ) { const decayRate = damping / 2, frequency = Math.sqrt(Math.max(0.01, stiffness - decayRate ** 2)); const displacement = s.x - target, quadrature = (s.v + decayRate * displacement) / frequency; const decay = Math.exp(-decayRate * dt), sin = Math.sin(frequency * dt), cos = Math.cos(frequency * dt); s.x = target + decay * (displacement * cos + quadrature * sin); s.v = decay * (s.v * cos - (decayRate * quadrature + frequency * displacement) * sin); if (Math.abs(s.x - target) < 0.0005 && Math.abs(s.v) < 0.005) { s.x = target; s.v = 0; return false; } return true; } export const edge = (amount: number) => `rgb(${Math.round(mix(141, 232, amount))},${Math.round(mix(163, 201, amount))},${Math.round(mix(155, 153, amount))})`; /** Shared lifecycle only. Each sculpture supplies its own geometry and interaction rules. */ export default function LineStage({ label, help, factory, compact = false, paused = false, intensity = 1, speed = 1, className = '', }: LineProps & { label: string; help: string; factory: Factory }) { const host = useRef(null), drawing = useRef(null); const stopped = useRef(paused), wakeRef = useRef<(() => void) | null>(null); stopped.current = paused; const parameters = useRef({ intensity, speed }); parameters.current = { intensity, speed }; const id = useId().replace(/:/g, ''); useEffect(() => { wakeRef.current?.(); }, [paused, intensity, speed]); useEffect(() => { const root = host.current!, group = drawing.current!, svg = root.querySelector('svg')!; const scene = factory(group, id), reduced = matchMedia('(prefers-reduced-motion: reduce)'); const wanted: Input = { x: 320, y: 220, strength: 0 }, current = { ...wanted }; let raf = 0, last = 0, visible = true, small = false, gone = false, release = 0; let down: Point | null = null; function tick(now: number) { raf = 0; if (gone || !visible || document.hidden) return; if (reduced.matches) { scene.reset(); scene.update(0, { x: 320, y: 220, strength: 0 }, small); return; } if (stopped.current) return; const elapsed = (now - last) / 1000; if (small && elapsed < 1 / 30) { raf = requestAnimationFrame(tick); return; } const dt = Math.min(0.055, Math.max(0.001, elapsed)); last = now; const alpha = 1 - Math.exp(-dt * 11); current.x = mix(current.x, wanted.x, alpha); current.y = mix(current.y, wanted.y, alpha); current.strength = mix(current.strength, wanted.strength, alpha); const inputMoving = Math.abs(current.x - wanted.x) + Math.abs(current.y - wanted.y) + Math.abs(current.strength - wanted.strength) > 0.003; const moving = scene.update( dt * limit(parameters.current.speed, 0.4, 2), { ...current, strength: current.strength * limit(parameters.current.intensity, 0, 1.4), }, small, ); if (moving || inputMoving) raf = requestAnimationFrame(tick); } function wake() { if (!gone && !raf && visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(tick); } } wakeRef.current = wake; function point(e: PointerEvent) { const r = svg.getBoundingClientRect(), scale = Math.min(r.width / 640, r.height / 440); if (!scale) return; wanted.x = limit( (e.clientX - r.left - (r.width - 640 * scale) / 2) / scale, 0, 640, ); wanted.y = limit( (e.clientY - r.top - (r.height - 440 * scale) / 2) / scale, 0, 440, ); } function move(e: PointerEvent) { if (stopped.current || reduced.matches) return; clearTimeout(release); point(e); wanted.strength = 1; scene.pointer?.(wanted); wake(); } function press(e: PointerEvent) { down = [e.clientX, e.clientY]; move(e); } function rest() { clearTimeout(release); wanted.strength = 0; down = null; scene.pointer?.(wanted); wake(); } function lift(e: PointerEvent) { if ( !stopped.current && !reduced.matches && !compact && down && Math.hypot(e.clientX - down[0], e.clientY - down[1]) < 10 ) { point(e); scene.activate?.(wanted); wake(); } down = null; if (e.pointerType !== 'mouse') { clearTimeout(release); release = window.setTimeout(rest, 1200); } } function leave(e: PointerEvent) { if (e.pointerType === 'mouse') rest(); else { clearTimeout(release); release = window.setTimeout(rest, 1200); } } function keyboard(e: KeyboardEvent) { if ( stopped.current || reduced.matches || ![ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' ', ].includes(e.key) ) return; e.preventDefault(); clearTimeout(release); wanted.strength = 1; if (scene.key) scene.key(e.key, wanted); else { if (e.key === 'Home') { wanted.x = 320; wanted.y = 220; } if (e.key === 'End') wanted.x = 500; if (e.key.startsWith('Arrow')) { wanted.x = limit( wanted.x + (e.key === 'ArrowLeft' ? -55 : e.key === 'ArrowRight' ? 55 : 0), 110, 530, ); wanted.y = limit( wanted.y + (e.key === 'ArrowUp' ? -40 : e.key === 'ArrowDown' ? 40 : 0), 90, 350, ); } } wake(); } function visibility() { if (document.hidden) { cancelAnimationFrame(raf); raf = 0; } else wake(); } function theme() { scene.update(0, current, small); wake(); } const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (!visible) { cancelAnimationFrame(raf); raf = 0; } else wake(); }); const size = new ResizeObserver(([entry]) => { small = entry.contentRect.width < 500; wake(); }); observer.observe(root); size.observe(root); root.addEventListener('pointermove', move); root.addEventListener('pointerdown', press); root.addEventListener('pointerup', lift); root.addEventListener('pointerleave', leave); root.addEventListener('pointercancel', rest); root.addEventListener('keydown', keyboard); root.addEventListener('blur', rest); document.addEventListener('visibilitychange', visibility); reduced.addEventListener('change', wake); document.addEventListener('motiqo-theme-change', theme); scene.update(0, current, small); wake(); return () => { gone = true; cancelAnimationFrame(raf); clearTimeout(release); wakeRef.current = null; observer.disconnect(); size.disconnect(); root.removeEventListener('pointermove', move); root.removeEventListener('pointerdown', press); root.removeEventListener('pointerup', lift); root.removeEventListener('pointerleave', leave); root.removeEventListener('pointercancel', rest); root.removeEventListener('keydown', keyboard); root.removeEventListener('blur', rest); document.removeEventListener('visibilitychange', visibility); reduced.removeEventListener('change', wake); document.removeEventListener('motiqo-theme-change', theme); group.replaceChildren(); }; }, [factory, compact, id]); return (

{help}

); } const styles = `.line-stage{position:relative;display:grid;place-items:center;width:100%;height:440px;min-height:280px;background:radial-gradient(ellipse at 50% 47%,#1c1c1c,#101010 63%,#0a0a0a);overflow:hidden;touch-action:pan-y;outline:none}.line-stage svg{display:block;width:min(100%,700px);height:auto;max-height:100%}.line-stage:focus-visible{outline:1px solid #fff;outline-offset:-5px}.line-compact{height:100%;min-height:0}.line-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:500px){.line-stage:not(.line-compact){height:320px}}html[data-theme=light] .line-stage{background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .line-stage:is(.arbor,.drawer)>svg{filter:invert(1) hue-rotate(180deg)}html[data-theme=light] .line-stage:focus-visible{outline-color:#302c28}`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"drawer":[{"name":"drawer.tsx","code":"$17"},{"name":"line-scene.tsx","code":"$18"}]},"initialElement":"drawer","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]