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:T14c7,'use client'; import LineStage, { coordinates, edge, limit, path, settle, spring, type Factory, type LineProps, type Point, } from './line-scene'; const createArbor: Factory = (group) => { const seed = (n: number) => { const v = Math.sin(n * 76.13 + 4.2) * 4913.71; return v - Math.floor(v); }; type Branch = { parent: number; depth: number; angle: number; length: number; theta: number; start: Point; end: Point; bend: ReturnType; line: SVGPathElement; leaf?: SVGPathElement; }; const branches: Branch[] = []; const rootLines = path(group, { stroke: '#63796c', 'stroke-opacity': 0.7, 'stroke-width': 0.6, }); rootLines.setAttribute( 'd', Array.from({ length: 7 }, (_, i) => { const end: Point = [273 + i * 15.5, 369 + Math.sin(i * 0.7) * 6]; return `M316,352Q${coordinates([310 + i * 2.2, 371])} ${coordinates(end)}`; }).join(''), ); const trunk = path(group, { fill: '#0e1919', stroke: '#a1b1a1', 'stroke-width': 0.85, 'data-trunk': '', }); function grow(parent: number, depth: number, angle: number, length: number) { const i = branches.length; const branch: Branch = { parent, depth, angle, length, theta: 0, start: [0, 0], end: [0, 0], bend: spring(), line: path(group, { 'stroke-width': depth === 0 ? 1 : Math.max(0.4, 1 - depth * 0.11), 'data-branch': i, }), }; branches.push(branch); if (depth === 0) { grow(i, 1, -0.66, 68); grow(i, 1, 0.53, 70); grow(i, 1, 0.02, 77); } else if (depth < 5) { grow(i, depth + 1, -0.38 - seed(i) * 0.17, length * (0.66 + seed(i + 5) * 0.08)); grow( i, depth + 1, 0.3 + seed(i + 20) * 0.22, length * (0.67 + seed(i + 40) * 0.08), ); } else branch.leaf = path(group, { stroke: '#7e9b87', 'stroke-width': 0.55, 'data-leaf': i, }); } grow(-1, 0, -Math.PI / 2 + 0.04, 68); let lastX = 320, velocity = 0; function paint() { branches.forEach((b, i) => { const parent = branches[b.parent]; b.start = parent ? parent.end : [316, 355]; b.theta = (parent ? parent.theta : 0) + b.angle + b.bend.x; b.end = [ b.start[0] + Math.cos(b.theta) * b.length, b.start[1] + Math.sin(b.theta) * b.length, ]; const previous = parent ? parent.theta : b.theta; const c1: Point = [ b.start[0] + Math.cos(previous) * b.length * 0.38, b.start[1] + Math.sin(previous) * b.length * 0.38, ]; const c2: Point = [ b.end[0] - Math.cos(b.theta + 0.12) * b.length * 0.32, b.end[1] - Math.sin(b.theta + 0.12) * b.length * 0.32, ]; b.line.setAttribute( 'd', `M${coordinates(b.start)}C${coordinates(c1)} ${coordinates(c2)} ${coordinates(b.end)}`, ); if (i === 0) trunk.setAttribute( 'd', `M310,356Q306,322 ${coordinates([b.end[0] - 2, b.end[1]])}L${coordinates([b.end[0] + 2, b.end[1]])}Q324,322 321,356`, ); if (b.leaf) { const length = 8 + seed(i + 100) * 5, width = 3.1; const tip: Point = [ b.end[0] + Math.cos(b.theta) * length, b.end[1] + Math.sin(b.theta) * length, ]; const side = (direction: number): Point => [ (b.end[0] + tip[0]) / 2 + Math.sin(b.theta) * width * direction, (b.end[1] + tip[1]) / 2 - Math.cos(b.theta) * width * direction, ]; b.leaf.setAttribute( 'd', `M${coordinates(b.end)}Q${coordinates(side(1))} ${coordinates(tip)}Q${coordinates(side(-1))} ${coordinates(b.end)}`, ); } }); } paint(); return { reset() { branches.forEach((b) => { b.bend.x = b.bend.v = 0; }); velocity = 0; lastX = 320; }, update(dt, input, small) { const alpha = 1 - Math.exp(-dt * 8); if (dt) velocity += (limit((input.x - lastX) / dt, -450, 450) - velocity) * alpha; lastX = input.x; let moving = false; const wind = limit((input.x - 320) / 170, -1, 1) * input.strength; branches.forEach((b) => { const distance = Math.hypot(b.end[0] - input.x, b.end[1] - input.y); const influence = Math.exp(-((distance / 105) ** 2)) * input.strength; const inherited = b.parent >= 0 ? branches[b.parent].bend.x * 0.32 : 0; const force = (wind * 0.045 + influence * (wind * 0.22 + velocity * 0.00032) + inherited) * (small ? 0.65 : 1); moving = settle(b.bend, force, dt, 112 - b.depth * 7, 17 - b.depth * 0.7) || moving; b.line.setAttribute('stroke', edge(influence * 0.8)); b.leaf?.setAttribute('stroke', edge(influence)); }); paint(); return moving || Math.abs(velocity) > 0.1; }, }; }; export default function Arbor(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":{"arbor":[{"name":"arbor.tsx","code":"$17"},{"name":"line-scene.tsx","code":"$18"}]},"initialElement":"arbor","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]