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:T136d,'use client'; import LineStage, { edge, limit, node, settle, spring, type Factory, type LineProps, } from './line-scene'; import { add, annulus, camera, circle3, cylinder, painter, rotateX, rotateY, rotateZ, type V3, } from './line-solid'; const createGyro: Factory = (group) => { const cam = camera(1.25, [320, 303]), base = node(group, 'g'), floor = painter(base, cam); floor.mesh(cylinder([0, 0, -5], [0, 0, 3], 72, 64)); floor.curve(circle3(72, 3), { stroke: '#9caf9e', width: 0.8 }); floor.curve(circle3(62, 3.15), { stroke: '#506960', width: 0.55 }); for (let i = 0; i < 24; i++) { const a = (i / 24) * Math.PI * 2; floor.curve( [ [Math.cos(a) * 64, Math.sin(a) * 64, 3.2], [Math.cos(a) * (i % 3 ? 68 : 71), Math.sin(a) * (i % 3 ? 68 : 71), 3.2], ], { stroke: '#657f71', width: 0.55 }, ); } floor.draw(); const layer = node(group, 'g'), paint = painter(layer, cam), centre: V3 = [0, 0, 116]; const rings = [90, 71, 52].map((r, i) => ({ metal: paint.mesh(annulus(r, 5, -2, 4, 56)), // Contours use the mesh's exact facets, rather than a different arc grid. edges: Array.from({ length: 224 }, (_, j) => { const segment = j % 56, kind = Math.floor(j / 56), inner = kind >= 2, bottom = kind % 2 === 1; const radius = inner ? r - 5 : r, z = bottom ? -2 : 2, a = ((segment + 0.5) / 56) * Math.PI * 2; const side: V3 = [ Math.cos(a) * (inner ? -1 : 1), Math.sin(a) * (inner ? -1 : 1), 0, ]; const cap: V3 = [0, 0, bottom ? -1 : 1]; const points = [segment, segment + 1].map( (k) => [ radius * Math.cos((k / 56) * Math.PI * 2), radius * Math.sin((k / 56) * Math.PI * 2), z, ] as V3, ); return { line: paint.curve(points, { stroke: i === 1 ? '#ccb998' : '#9caf9e', width: inner ? 0.55 : 0.82, }), side, cap, }; }), })); const yaw = spring(), pitch = spring(), spin = spring(), shine = spring(); let detent = 0; return { reset() { detent = 0; [yaw, pitch, spin, shine].forEach((s) => { s.x = s.v = 0; }); }, update(dt, input, small) { const amount = input.strength * (small ? 0.7 : 1); let moving = settle( yaw, limit((input.x - 320) / 155, -1, 1) * amount, dt, 86, 17, ); moving = settle(pitch, limit((220 - input.y) / 135, -1, 1) * amount, dt, 97, 18) || moving; moving = settle(spin, detent, dt, 45, 11) || moving; moving = settle(shine, amount, dt, 110, 20) || moving; const pose = (p: V3, level: number): V3 => { let q = rotateZ(p, level === 2 ? -0.32 + spin.x : 0); if (level > 0) q = rotateY(q, 0.72 + yaw.x * 0.72 + (level === 2 ? 0.73 : 0)); q = rotateX(q, Math.PI / 2 + pitch.x * 0.45 + (level === 2 ? yaw.x * 0.24 : 0)); return add(rotateZ(q, -0.08 + yaw.x * 0.27), centre); }; rings.forEach((ring, i) => { ring.metal.transform = (p) => pose(p, i); ring.metal.glow = shine.x * (i + 1) * 0.18; ring.edges.forEach(({ line, side, cap }) => { line.transform = (p) => pose(p, i); line.stroke = edge(0.32 + shine.x * 0.45); // A contour borders two faces; hide it when both turn away. line.visible = Math.max( cam.depth(pose(side, i)) - cam.depth(centre), cam.depth(pose(cap, i)) - cam.depth(centre), ) > -0.001; }); }); paint.draw(); group.setAttribute( 'data-gyro-angle', `${yaw.x.toFixed(4)},${pitch.x.toFixed(4)},${spin.x.toFixed(4)}`, ); return moving; }, activate() { detent += Math.PI / 2; }, key(key, input) { if (key === 'Enter' || key === ' ') detent += Math.PI / 2; else if (key === 'Home') { input.x = 320; input.y = 220; detent = 0; } else if (key === 'End') { input.x = 465; input.y = 140; } else { input.x = limit( input.x + (key === 'ArrowLeft' ? -50 : key === 'ArrowRight' ? 50 : 0), 160, 480, ); input.y = limit( input.y + (key === 'ArrowUp' ? -40 : key === 'ArrowDown' ? 40 : 0), 100, 330, ); } }, }; }; export default function Gyro(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}`; 19:T2fe9,import { node, outline, path, type Point } from './line-scene'; export type V3 = [number, number, number]; export type Face = V3[]; export type Transform = (p: V3) => V3; export const add = (a: V3, b: V3): V3 => [a[0] + b[0], a[1] + b[1], a[2] + b[2]]; export const mul = (a: V3, s: number): V3 => [a[0] * s, a[1] * s, a[2] * s]; export const dot = (a: V3, b: V3) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; const cross = (a: V3, b: V3): V3 => [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0], ]; export const unit = (a: V3) => mul(a, 1 / (Math.hypot(...a) || 1)); const subtract = (a: V3, b: V3): V3 => [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; export const rotateX = (p: V3, a: number): V3 => [ p[0], p[1] * Math.cos(a) - p[2] * Math.sin(a), p[1] * Math.sin(a) + p[2] * Math.cos(a), ]; export const rotateY = (p: V3, a: number): V3 => [ p[0] * Math.cos(a) + p[2] * Math.sin(a), p[1], -p[0] * Math.sin(a) + p[2] * Math.cos(a), ]; export const rotateZ = (p: V3, a: number): V3 => [ p[0] * Math.cos(a) - p[1] * Math.sin(a), p[0] * Math.sin(a) + p[1] * Math.cos(a), p[2], ]; const VIEW: V3 = [0.612372436, 0.612372436, 0.5]; const LIGHT: V3 = unit([-0.3, -0.5, 1]); /** Orthonormal 45°/30° camera: 2:1 ground diagonals, verticals remain vertical. */ export function camera(scale = 1.3, origin: Point = [320, 270]) { return { scale, project: (p: V3): Point => [ origin[0] + (p[0] - p[1]) * Math.SQRT1_2 * scale, origin[1] + ((p[0] + p[1]) * 0.353553391 - p[2] * 0.866025404) * scale, ], depth: (p: V3) => dot(p, VIEW), ground: (p: Point, z = 0): Point => { const x = (p[0] - origin[0]) / scale, y = ((p[1] - origin[1]) / scale + z * 0.866025404) / 0.5; return [(x + y) * Math.SQRT1_2, (y - x) * Math.SQRT1_2]; }, }; } export type Camera = ReturnType; type Style = { color?: string; stroke?: string; width?: number; glow?: number; cull?: boolean; shade?: boolean; }; type Draw = { element: SVGElement; key: number; id: number }; const identity: Transform = (p) => p; /** Keep opaque depth and lighting in both host themes; artwork is never image-inverted. */ function lightColour(value: string, surface = false) { let rgb: number[]; if (/^#[\da-f]{3}$/i.test(value)) value = '#' + value .slice(1) .split('') .map((c) => c + c) .join(''); if (/^#[\da-f]{6}$/i.test(value)) rgb = [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16)); else if (value.startsWith('rgb(')) rgb = value .match(/[\d.]+/g)! .slice(0, 3) .map(Number); else return value; return `rgb(${rgb.map((v, i) => Math.round(surface ? Math.min(253, 210 + v * 0.65) : v * (rgb[0] - rgb[1] > 20 ? [0.78, 0.72, 0.68][i] : 0.46))).join(',')})`; } /** Own SVG painter. Opaque surfaces and curves share depth order; no React work per frame. */ export function painter(group: SVGGElement, cam: Camera) { const tasks: (() => Draw[])[] = []; let serial = 0, signature = '', lightTheme = false; const write = (el: SVGElement, name: string, value: string) => { if (el.getAttribute(name) !== value) el.setAttribute(name, value); }; function mesh(faces: Face[], style: Style = {}) { const entries = faces.map((points) => ({ points, el: path(group, { 'stroke-width': style.width ?? 0.6, 'data-solid-face': '' }), id: serial++, })); const item = { transform: identity, glow: style.glow ?? 0, visible: true, element: entries[0].el, }; tasks.push(() => entries.map(({ points, el, id }) => { const vertices = points.map(item.transform); const normal = unit( cross(subtract(vertices[1], vertices[0]), subtract(vertices[2], vertices[0])), ); const visible = item.visible && (style.cull === false || dot(normal, VIEW) > -0.001); write(el, 'visibility', visible ? 'visible' : 'hidden'); if (visible) { const light = style.shade === false ? 0 : Math.max(0, dot(normal, LIGHT)) * 0.8 + 0.18; write(el, 'd', outline(vertices.map(cam.project), true)); const fill = style.color ?? (lightTheme ? `rgb(${Math.round(215 + light * 28 + item.glow * 10)},${Math.round(215 + light * 28)},${Math.round(215 + light * 28 - item.glow * 5)})` : `rgb(${Math.round(15 + light * 29 + item.glow * 19)},${Math.round(29 + light * 29 + item.glow * 11)},${Math.round(32 + light * 22)})`); write(el, 'fill', lightTheme && style.color ? lightColour(fill, true) : fill); write( el, 'stroke', lightTheme ? lightColour(style.stroke ?? 'none') : (style.stroke ?? 'none'), ); } const centre = mul(vertices.reduce(add, [0, 0, 0]), 1 / vertices.length); return { element: el, key: cam.depth(centre), id }; }), ); return item; } function curve(points: V3[], style: Style = {}) { const el = path(group, { stroke: style.stroke ?? '#91a79d', 'stroke-width': style.width ?? 0.7, 'data-solid-curve': '', }); const id = serial++, item = { points, transform: identity, visible: true, opacity: 1, stroke: style.stroke ?? '#91a79d', bias: 0.1, }; tasks.push(() => { const vertices = item.points.map(item.transform); write(el, 'd', vertices.length > 1 ? outline(vertices.map(cam.project)) : ''); write(el, 'visibility', item.visible ? 'visible' : 'hidden'); write(el, 'opacity', String(item.opacity)); write(el, 'stroke', lightTheme ? lightColour(item.stroke) : item.stroke); return [ { element: el, key: cam.depth( mul(vertices.reduce(add, [0, 0, 0]), 1 / (vertices.length || 1)), ) + item.bias, id, }, ]; }); return item; } function custom(element: SVGElement, depth: () => number) { const id = serial++; tasks.push(() => [{ element, key: depth(), id }]); } return { mesh, curve, custom, draw() { lightTheme = document.documentElement.dataset.theme === 'light'; const draws = tasks .flatMap((task) => task()) .sort((a, b) => a.key - b.key || a.id - b.id), next = draws.map((d) => d.id).join(','); if (next !== signature) { let cursor = group.firstElementChild; for (const { element } of draws) { if (element === cursor) cursor = cursor.nextElementSibling; else group.insertBefore(element, cursor); } signature = next; } }, }; } /** Outward-wound faces: rear surfaces cannot leak through a foreground object. */ export function box( x0: number, y0: number, z0: number, x1: number, y1: number, z1: number, ): Face[] { const a: V3 = [x0, y0, z0], b: V3 = [x1, y0, z0], c: V3 = [x1, y1, z0], d: V3 = [x0, y1, z0]; const e: V3 = [x0, y0, z1], f: V3 = [x1, y0, z1], g: V3 = [x1, y1, z1], h: V3 = [x0, y1, z1]; return [ [a, d, c, b], [e, f, g, h], [a, b, f, e], [b, c, g, f], [c, d, h, g], [d, a, e, h], ]; } export function cylinder(a: V3, b: V3, radius: number, segments = 24): Face[] { const axis = unit(subtract(b, a)), u = unit(cross(axis, Math.abs(axis[2]) < 0.9 ? [0, 0, 1] : [0, 1, 0])), v = cross(axis, u); const ring = (centre: V3) => Array.from({ length: segments }, (_, i) => add( centre, add( mul(u, Math.cos((i / segments) * Math.PI * 2) * radius), mul(v, Math.sin((i / segments) * Math.PI * 2) * radius), ), ), ); const near = ring(a), far = ring(b); return [ near.slice().reverse(), far, ...near.map((p, i) => [ p, near[(i + 1) % segments], far[(i + 1) % segments], far[i], ]), ]; } export function annulus( radius: number, tube: number, z: number, thickness: number, segments = 64, ): Face[] { const at = (r: number, i: number, h: number): V3 => [ Math.cos((i / segments) * Math.PI * 2) * r, Math.sin((i / segments) * Math.PI * 2) * r, h, ], faces: Face[] = []; for (let i = 0; i < segments; i++) { const o0 = at(radius, i, z), o1 = at(radius, i + 1, z), O0 = at(radius, i, z + thickness), O1 = at(radius, i + 1, z + thickness); const i0 = at(radius - tube, i, z), i1 = at(radius - tube, i + 1, z), I0 = at(radius - tube, i, z + thickness), I1 = at(radius - tube, i + 1, z + thickness); faces.push([o0, o1, O1, O0], [I0, I1, i1, i0], [O0, O1, I1, I0], [i0, i1, o1, o0]); } return faces; } export const circle3 = (r: number, z: number, samples = 64): V3[] => Array.from({ length: samples + 1 }, (_, i) => [ r * Math.cos((i / samples) * Math.PI * 2), r * Math.sin((i / samples) * Math.PI * 2), z, ]); /** Circular silhouette plus correctly clipped surface arcs: a sphere in an orthographic view. */ export function sphere( group: SVGGElement, id: string, cam: Camera, paint: ReturnType, radius: number, colors = ['#718d85', '#344f4f', '#101d23'], ) { const defs = node(group, 'defs'), gradient = node(defs, 'radialGradient', { id: `${id}-orb`, cx: '.29', cy: '.23', r: '.8', }); node(gradient, 'stop', { offset: 0, 'stop-color': colors[0] }); node(gradient, 'stop', { offset: '.38', 'stop-color': colors[1] }); node(gradient, 'stop', { offset: 1, 'stop-color': colors[2] }); const g = node(group, 'g', { 'data-orb': '' }), body = node(g, 'circle', { fill: `url(#${id}-orb)`, stroke: '#9bb1a3', 'stroke-width': 0.8, }); const arcs = Array.from({ length: 4 }, () => path(g, { stroke: '#a9b9a2', 'stroke-width': 0.5, 'stroke-opacity': 0.45 }), ); const shadow = node(group, 'ellipse', { fill: '#02090c', 'fill-opacity': 0.5 }); const item = { centre: [0, 0, 0] as V3, scale: 1, angle: 0, glow: 0 }; paint.custom(g, () => cam.depth(item.centre) + radius * item.scale * 0.55); paint.custom(shadow, () => cam.depth([item.centre[0], item.centre[1], 0.5])); function surfacePath(samples: V3[]) { let d = '', previous = false; for (const q of samples) { const front = dot(q, VIEW) >= 0; if (front) { const p = cam.project(add(item.centre, q)); d += (previous ? 'L' : 'M') + p.map((v) => v.toFixed(2)).join(','); } previous = front; } return d; } return { item, element: g, draw() { const r = radius * item.scale, p = cam.project(item.centre), screenR = r * cam.scale; body.setAttribute('cx', String(p[0])); body.setAttribute('cy', String(p[1])); body.setAttribute('r', String(screenR)); body.setAttribute('stroke', item.glow > 0.1 ? '#e0c699' : '#9bb1a3'); g.setAttribute('data-scale', item.scale.toFixed(4)); g.setAttribute('data-x', item.centre[0].toFixed(3)); g.setAttribute('visibility', r > 0.15 ? 'visible' : 'hidden'); [-0.55, 0, 0.55].forEach((h, i) => { const rr = Math.sqrt(1 - h * h) * r; arcs[i].setAttribute( 'd', surfacePath( Array.from({ length: 97 }, (_, j) => { const a = (j / 96) * Math.PI * 2; return [rr * Math.cos(a), rr * Math.sin(a), h * r]; }), ), ); }); arcs[3].setAttribute( 'd', surfacePath( Array.from({ length: 97 }, (_, j) => { const a = (j / 96) * Math.PI * 2; return rotateZ([r * Math.cos(a), 0, r * Math.sin(a)], item.angle); }), ), ); const ground = cam.project([item.centre[0], item.centre[1], 0.6]); shadow.setAttribute('cx', String(ground[0])); shadow.setAttribute('cy', String(ground[1])); shadow.setAttribute('rx', String(screenR * 0.92)); shadow.setAttribute('ry', String(screenR * 0.4)); shadow.setAttribute('visibility', r > 0.15 ? 'visible' : 'hidden'); }, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"gyro":[{"name":"gyro.tsx","code":"$17"},{"name":"line-scene.tsx","code":"$18"},{"name":"line-solid.ts","code":"$19"}]},"initialElement":"gyro","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]