@linhey/rhine-design 0.5.0 → 0.8.0

package/components/orbitObjectsThree.ts

@@ -0,0 +1,215 @@
+import {
+  ACESFilmicToneMapping, AdditiveBlending, BufferGeometry, Color, DirectionalLight,
+  DoubleSide, EdgesGeometry, Float32BufferAttribute, Group, HemisphereLight, InstancedMesh,
+  LineBasicMaterial, LineSegments, Material, Mesh, MeshBasicMaterial, MeshPhysicalMaterial,
+  MeshStandardMaterial, NormalBlending, Object3D, OctahedronGeometry, PerspectiveCamera, PlaneGeometry,
+  Points, Scene, ShaderMaterial, SRGBColorSpace, Texture, TorusGeometry, WebGLRenderer,
+} from 'three';
+import { paperTexture, mineralMaterial, studioEnvironment } from './orbitObjectMaterials';
+import { morphPaperPoint, paperBirdFolds, type PaperFold } from './orbitBirdGeometry';
+import { paperBirdFlight, paperMorphAmount } from './orbitBirdFlight';
+
+export type OrbitObjectKind = 'paper' | 'technical';
+export interface OrbitObjectArtwork {
+  canvas: HTMLCanvasElement;
+  draw(width: number, height: number, time: number): boolean;
+  dispose(): void;
+}
+
+/** The host supplies elapsed visible time; a theme object never schedules its own frames. */
+export function createOrbitObject(kind: OrbitObjectKind, invalidate: () => void): OrbitObjectArtwork {
+  const geometries = new Set<BufferGeometry>(), materials = new Set<Material>(), instances = new Set<InstancedMesh>(), textures = new Set<Texture>();
+  const geometry = <T extends BufferGeometry>(value: T) => { geometries.add(value); return value; };
+  const material = <T extends Material>(value: T) => { materials.add(value); return value; };
+  const texture = <T extends Texture>(value: T) => { textures.add(value); return value; };
+  const canvas = document.createElement('canvas');
+  canvas.className = `rhine-orbit-canvas rhine-orbit-object-webgl rhine-orbit-${kind}-webgl`;
+  canvas.setAttribute('aria-hidden', 'true'); canvas.dataset.orbitArtwork = kind;
+  let renderer: WebGLRenderer | undefined, disposed = false, lost = false;
+  function contextLost(event: Event) { event.preventDefault(); lost = true; invalidate(); }
+  function contextRestored() { lost = false; invalidate(); }
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    canvas.removeEventListener('webglcontextlost', contextLost); canvas.removeEventListener('webglcontextrestored', contextRestored);
+    instances.forEach(value => value.dispose()); geometries.forEach(value => value.dispose()); materials.forEach(value => value.dispose()); textures.forEach(value => value.dispose());
+    renderer?.dispose(); renderer?.forceContextLoss(); canvas.remove();
+  }
+  try {
+    renderer = new WebGLRenderer({ canvas, alpha: true, antialias: true, powerPreference: 'low-power' });
+    renderer.setClearColor(0x000000, 0); renderer.outputColorSpace = SRGBColorSpace;
+    renderer.toneMapping = ACESFilmicToneMapping; renderer.toneMappingExposure = 1.12;
+    const bird = kind === 'paper', scene = new Scene(), camera = new PerspectiveCamera(35, 1, .1, 40);
+    scene.environment = texture(studioEnvironment());
+    scene.name = bird ? 'origami-paper-bird' : 'originium-cluster';
+    scene.add(new HemisphereLight(bird ? '#f5fff1' : '#d8e4dc', bird ? '#42654d' : '#151c24', bird ? .9 : .65));
+    const key = new DirectionalLight('#fff5da', 2.4); key.position.set(-3, 5, 4); scene.add(key);
+    const rim = new DirectionalLight(bird ? '#b6e0c8' : '#ffa634', 2.8); rim.position.set(3, 1, -2); scene.add(rim);
+    const fill = new DirectionalLight('#d4eeee', .7); fill.position.set(2, -2, 3); scene.add(fill);
+    const frame = new Group(); frame.rotation.set(bird ? .53 : .13, bird ? -.65 : -.32, bird ? -.12 : .08); scene.add(frame);
+    const object = new Group(); object.name = 'theme-object'; frame.add(object);
+    const dummy = new Object3D();
+    const updates: Array<(time: number) => void> = [];
+    let seed = bird ? 70231 : 39017;
+    const random = () => { seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0; return seed / 4294967296; };
+    const mesh = (g: BufferGeometry, m: Material, parent = object) => { const value = new Mesh(g, m); parent.add(value); return value; };
+    const instanced = (g: BufferGeometry, m: Material, count: number, name: string, parent = object) => {
+      const value = new InstancedMesh(g, m, count); value.name = name; instances.add(value); parent.add(value); return value;
+    };
+
+    if (bird) {
+      const grain = texture(paperTexture());
+      const paper = material(new MeshPhysicalMaterial({ color: '#fffdf0', map: grain, bumpMap: grain, bumpScale: .008, roughness: .87, metalness: 0, side: DoubleSide }));
+      const shadedPaper = material(new MeshStandardMaterial({ color: '#dce4d5', map: grain, bumpMap: grain, bumpScale: .006, roughness: .92, side: DoubleSide }));
+      const innerPaper = material(new MeshStandardMaterial({ color: '#a7b9a7', map: grain, roughness: .93, side: DoubleSide }));
+      const crease = material(new LineBasicMaterial({ color: '#6f8572', transparent: true, opacity: .13 }));
+      function foldedSheet(fold: PaperFold, target: PaperFold, parent: Group) {
+        const { points, faces, name } = fold;
+        const positions: number[] = [], uvs: number[] = [];
+        for (const face of faces) for (const i of face) { positions.push(...points[i]); uvs.push(points[i][0] * .5 + .5, points[i][2] * .5 + .5); }
+        const g = geometry(new BufferGeometry()); g.setAttribute('position', new Float32BufferAttribute(positions, 3)); g.setAttribute('uv', new Float32BufferAttribute(uvs, 2)); g.computeVertexNormals();
+        faces.forEach((_, i) => g.addGroup(i * 3, 3, i % 10 === 4 ? 2 : i % 4 === 2 ? 1 : 0));
+        const sheet = new Mesh(g, [paper, shadedPaper, innerPaper]); sheet.name = name; parent.add(sheet);
+        const edges = geometry(new EdgesGeometry(g, 8)), edgePositions = edges.getAttribute('position');
+        const edgeIndices = Array.from({ length: edgePositions.count }, (_, i) => points.findIndex(p =>
+          Math.abs(p[0] - edgePositions.getX(i)) < 1e-6 && Math.abs(p[1] - edgePositions.getY(i)) < 1e-6 && Math.abs(p[2] - edgePositions.getZ(i)) < 1e-6));
+        const lines = new LineSegments(edges, crease); parent.add(lines);
+        // Reuse the same buffers, materials and crease endpoints for the entire transformation.
+        let previousAmount = -1;
+        updates.push(time => {
+          const amount = paperMorphAmount(time);
+          if (amount === previousAmount) return;
+          const vertices = points.map((p, i) => morphPaperPoint(p, target.points[i], amount, fold.wing, fold.name));
+          const positions = g.getAttribute('position');
+          faces.forEach((face, f) => face.forEach((index, v) => positions.setXYZ(f * 3 + v, ...vertices[index])));
+          edgeIndices.forEach((index, i) => edgePositions.setXYZ(i, ...vertices[index]));
+          positions.needsUpdate = true; edgePositions.needsUpdate = true;
+          g.computeVertexNormals(); g.computeBoundingSphere(); edges.computeBoundingSphere();
+          previousAmount = amount;
+        });
+        return sheet;
+      }
+      const wings = new Map<number, Group>();
+      for (const direction of [-1, 1]) {
+        const wing = new Group(); wing.name = direction < 0 ? 'paper-wing-left' : 'paper-wing-right'; object.add(wing); wings.set(direction, wing);
+        updates.push(time => { wing.rotation.z = direction * paperBirdFlight(time).wing; });
+      }
+      const targets = paperBirdFolds('butterfly');
+      paperBirdFolds().forEach((fold, i) => foldedSheet(fold, targets[i], fold.wing ? wings.get(fold.wing)! : object));
+      const scraps = instanced(geometry(new PlaneGeometry(.035,.018)), shadedPaper, 42, 'floating-paper-flecks', frame);
+      scraps.frustumCulled = false;
+      const seeds = Array.from({length:scraps.count},()=>({a:random()*Math.PI*2,r:1.15+random()*.7,y:random()*2.1-1.05,s:.4+random()*.9}));
+      updates.push(time=>{
+        const flight = paperBirdFlight(time);
+        object.position.set(flight.x, flight.y, flight.z);
+        object.rotation.set(flight.pitch, flight.yaw, flight.bank);
+        seeds.forEach((p,i)=>{const a=p.a+time*.06, wake=paperBirdFlight(time-i*.06);dummy.position.set(wake.x+Math.cos(a)*p.r*.65,wake.y+p.y*.7, wake.z- .25-i*.017+Math.sin(a)*p.r*.25);dummy.rotation.set(p.a+time*.16,a,time*.1+p.a);dummy.scale.setScalar(p.s);dummy.updateMatrix();scraps.setMatrixAt(i,dummy.matrix);});
+        scraps.instanceMatrix.needsUpdate=true;
+      });
+    } else {
+      function crystalGeometry() {
+        const positions: number[] = [];
+        const rings = [{ y: -1.03, r: .24 }, { y: -.78, r: .72 }, { y: .57, r: 1 }, { y: .72, r: .92 }, { y: 1.46, r: .06 }];
+        const vertex = (i: number, level: number) => {
+          const a = Math.floor(i / 2) * Math.PI / 3 + (i % 2 ? .055 : -.055);
+          return [Math.cos(a) * rings[level].r, rings[level].y, Math.sin(a) * rings[level].r];
+        };
+        const triangle = (a: number[], b: number[], c: number[]) => positions.push(...a, ...b, ...c);
+        for (let i = 0; i < 12; i++) {
+          const j = (i + 1) % 12;
+          for (let level = 0; level < rings.length - 1; level++) {
+            const p = vertex(i, level), q = vertex(j, level), r = vertex(i, level + 1), t = vertex(j, level + 1);
+            triangle(p, r, q); triangle(q, r, t);
+          }
+          triangle(vertex(j, 0), [0, -1.1, 0], vertex(i, 0));
+          triangle(vertex(i, 4), [0, 1.51, 0], vertex(j, 4));
+        }
+        const g = geometry(new BufferGeometry()); g.setAttribute('position', new Float32BufferAttribute(positions, 3)); g.computeVertexNormals(); return g;
+      }
+      const crystal = crystalGeometry();
+      const facetMaterial = material(mineralMaterial());
+      const edgeMaterial = material(new LineBasicMaterial({ color: '#9e885b', transparent: true, opacity: .16 }));
+      const edges = geometry(new EdgesGeometry(crystal, 25));
+      const shards = [
+        { x: 0, y: .04, z: 0, s: .88, rx: .04, rz: -.08 },
+        { x: -.48, y: -.38, z: .12, s: .56, rx: .12, rz: .45 },
+        { x: .47, y: -.35, z: .13, s: .64, rx: -.14, rz: -.4 },
+        { x: -.18, y: -.58, z: -.42, s: .48, rx: -.4, rz: .15 },
+        { x: .18, y: -.65, z: .48, s: .42, rx: .38, rz: -.1 },
+      ];
+      shards.forEach((p, i) => {
+        const shard = new Group(); shard.name = `originium-facet-${i}`; shard.position.set(p.x, p.y, p.z); shard.rotation.set(p.rx, i * .8, p.rz); shard.scale.set(.37 * p.s, p.s, .37 * p.s); object.add(shard);
+        mesh(crystal, facetMaterial, shard); shard.add(new LineSegments(edges, edgeMaterial));
+      });
+      const fragments = instanced(geometry(new OctahedronGeometry(.038, 0)), facetMaterial, 48, 'floating-fragments');
+      // The shader and instanced particles move beyond their initial CPU coordinates.
+      fragments.frustumCulled = false;
+      const fragmentSeeds = Array.from({ length: fragments.count }, () => ({ phase: random() * Math.PI * 2, r: 1.02 + random() * .58, y: random() * 2.35 - 1.1, size: .28 + random() * 1.15, speed: .08 + random() * .08 }));
+      updates.push(time => {
+        fragmentSeeds.forEach((p, i) => {
+          const a = p.phase + time * p.speed;
+          dummy.position.set(Math.cos(a) * p.r, p.y + Math.sin(time * .4 + p.phase) * .12, Math.sin(a) * p.r * .5);
+          dummy.rotation.set(a * .5, a, p.phase + time * .12); dummy.scale.set(.65 * p.size, 1.5 * p.size, p.size); dummy.updateMatrix(); fragments.setMatrixAt(i, dummy.matrix);
+        }); fragments.instanceMatrix.needsUpdate = true;
+      });
+      const orbital = new Group(); orbital.name = 'containment-ring'; orbital.rotation.set(1.12, .35, -.2); scene.add(orbital);
+      const line = material(new MeshBasicMaterial({ color: '#d9a151', transparent: true, opacity: .26 }));
+      for (let i = 0; i < 8; i++) {
+        const ring = mesh(geometry(new TorusGeometry(1.46, .003, 4, 32, .43)), line, orbital); ring.rotation.z = i / 8 * Math.PI * 2;
+      }
+      updates.push(time => { orbital.rotation.z = -.2 + time * .055; });
+    }
+
+    const particleCount = bird ? 120 : 420, positions: number[] = [], phases: number[] = [], sizes: number[] = [];
+    for (let i = 0; i < particleCount; i++) {
+      const a = random() * Math.PI * 2, r = .85 + random() * 1.25;
+      positions.push(Math.cos(a) * r, random() * 2.9 - 1.45, Math.sin(a) * r * .55); phases.push(random() * Math.PI * 2); sizes.push(.8 + random() * 2.2);
+    }
+    const particleGeometry = geometry(new BufferGeometry()); particleGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    particleGeometry.setAttribute('phase', new Float32BufferAttribute(phases, 1)); particleGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1));
+    particleGeometry.computeBoundingSphere(); particleGeometry.boundingSphere!.radius += .3;
+    const particleMaterial = material(new ShaderMaterial({
+      transparent: true, depthWrite: false, blending: bird ? NormalBlending : AdditiveBlending,
+      uniforms: { time: { value: 0 }, pixelRatio: { value: 1 }, tint: { value: new Color(bird ? '#ad935d' : '#ffab39') } },
+      vertexShader: `attribute float phase; attribute float size; uniform float time; uniform float pixelRatio; varying float alpha;
+        void main(){vec3 p=position; p.x+=sin(time*.2+phase)*.08; p.y+=sin(time*.3+phase)*.14;
+          vec4 mv=modelViewMatrix*vec4(p,1.); gl_Position=projectionMatrix*mv; gl_PointSize=size*pixelRatio*6./-mv.z;
+          alpha=.35+.3*sin(time*.8+phase);}`,
+      fragmentShader: `uniform vec3 tint; varying float alpha; void main(){float r=length(gl_PointCoord-.5)*2.;
+        gl_FragColor=vec4(tint,(1.-smoothstep(.05,1.,r))*alpha);}`,
+    }));
+    const dust = new Points(particleGeometry, particleMaterial); dust.name = bird ? 'paper-motes' : 'crystal-embers'; scene.add(dust);
+    const shadow = new Mesh(geometry(new PlaneGeometry(3.4, .65)), material(new ShaderMaterial({
+      transparent: true, depthWrite: false,
+      vertexShader: 'varying vec2 vUv;void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);}',
+      fragmentShader: 'varying vec2 vUv;void main(){float a=(1.-smoothstep(.05,1.,length((vUv-.5)*2.)))*.17;gl_FragColor=vec4(.15,.23,.19,a);}',
+    }))); scene.add(shadow); shadow.position.set(.08, -1.52, -1);
+    let lastWidth = 0, lastHeight = 0, lastRatio = 0;
+    canvas.addEventListener('webglcontextlost', contextLost); canvas.addEventListener('webglcontextrestored', contextRestored);
+    return {
+      canvas,
+      draw(width, height, time) {
+        if (disposed || lost || width <= 0 || height <= 0) return false;
+        const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
+        if (width !== lastWidth || height !== lastHeight || ratio !== lastRatio) {
+          renderer!.setPixelRatio(ratio); renderer!.setSize(width, height, false);
+          const scale = Math.min(width * (bird ? .175 : .28), Math.max(1, height - 76) * (bird ? .285 : .3));
+          camera.aspect = width / height; camera.position.set(0, 0, 6); camera.lookAt(0, 0, 0);
+          camera.fov = 2 * Math.atan(height / (2 * scale * 6)) * 180 / Math.PI; camera.updateProjectionMatrix();
+          camera.projectionMatrix.elements[8] = -.08; camera.projectionMatrix.elements[9] = -36 / height;
+          camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+          particleMaterial.uniforms.pixelRatio.value = ratio; lastWidth = width; lastHeight = height; lastRatio = ratio;
+        }
+        if (!bird) object.rotation.y = time * .11;
+        else {
+          const flight = paperBirdFlight(time);
+          shadow.position.x = .08 + flight.x * .7;
+          shadow.scale.setScalar(1 - (flight.y + .3) * .18);
+        }
+        updates.forEach(update => update(time)); particleMaterial.uniforms.time.value = time;
+        renderer!.render(scene, camera); return true;
+      },
+      dispose,
+    };
+  } catch (error) { dispose(); throw error; }
+}

package/components/orbitProjection.ts

@@ -0,0 +1,21 @@
+export type OrbitVector = { x: number; y: number; z: number };
+export const orbitCameraDistance = 3.6;
+const yaw = -.72, tilt = .22, roll = .34;
+const ct = Math.cos(tilt), st = Math.sin(tilt), cy = Math.cos(yaw), sy = Math.sin(yaw), cr = Math.cos(roll), sr = Math.sin(roll);
+
+/** Keep every renderer in the original artwork's frame, including on narrow screens. */
+export function orbitFraming(width: number, height: number) {
+  return { scale: Math.min(width * .66, height * .39), centerX: width * .62, centerY: height * .57 };
+}
+
+/** Shared camera orientation for the original network and the strawberry ring. */
+export function rotateOrbitPoint({ x, y, z }: OrbitVector): OrbitVector {
+  const yy = y * ct - z * st, zz = y * st + z * ct;
+  const xx = x * cy + zz * sy, depth = -x * sy + zz * cy;
+  return { x: xx * cr - yy * sr, y: xx * sr + yy * cr, z: depth };
+}
+
+export function projectOrbitPoint(p: OrbitVector, scale: number, centerX: number, centerY: number) {
+  const perspective = orbitCameraDistance / (orbitCameraDistance - p.z);
+  return { x: centerX + p.x * scale * perspective, y: centerY + p.y * scale * perspective * 1.08, depth: p.z, perspective };
+}

package/components/orbitRenderer.ts

@@ -0,0 +1,347 @@
+import { createOrbitDonut } from './orbitDonut';
+import type { DonutArtwork } from './orbitDonutThree';
+import { drawOrbitObject } from './orbitObjects';
+import { orbitFraming, projectOrbitPoint, rotateOrbitPoint } from './orbitProjection';
+
+type OrbitLinework = 'original' | 'paper' | 'technical' | 'donut';
+type Point = { x: number; y: number; depth: number; perspective: number };
+type Edge = { a: number; sweep: number; phase: number; waist: number; lift: number; color: number; speed: number };
+type Layer =
+  | { kind: 'void'; points: Point[] }
+  | { kind: 'line'; p: Point; q: Point; color: number; distance: number }
+  | { kind: 'particle'; p: Point; color: number }
+  | { kind: 'spike'; p: Point; q: Point; i: number; pulse: number };
+type CanvasScene = { el: HTMLCanvasElement; ctx: CanvasRenderingContext2D; w: number; h: number };
+const originalPalette = {
+  'line-primary': '#68b2f4', 'line-secondary': '#dfbb5c', 'line-tertiary': '#48b6b3',
+  'particle-primary': '#51b7f6', 'particle-secondary': '#e5b94d', 'particle-tertiary': '#2ec7a1',
+  'spike-near': '#d5e0f1', 'spike-far': '#b57635', 'trail-near': '#addaff', 'trail-far': '#e1a147',
+  spark: '#f2f7ff', void: '#010205', highlight: '#ff658c', 'highlight-glow': '#f25380',
+};
+function transparentColor(color: string) {
+  // Canvas serializes sRGB as hex/rgb and other color spaces as functions.
+  // Keep the RGB components at alpha zero: Canvas gradients do not premultiply interpolation.
+  if (color.startsWith('#')) return `${color.slice(0, 7)}00`;
+  if (color.startsWith('rgb')) {
+    const channels = color.slice(color.indexOf('(') + 1, -1).trim().split(/[\s,/]+/).slice(0, 3);
+    return `rgba(${channels.join(',')},0)`;
+  }
+  return color.replace(/(?:\s*\/[^()]*)?\)$/, ' / 0)');
+}
+export type OrbitState = 'playing' | 'paused' | 'reduced' | 'compact' | 'hidden' | 'offscreen' | 'empty' | 'unavailable';
+export interface OrbitRenderer { setPaused(value: boolean): void; setReducedMotion(value: boolean): void; dispose(): void }
+
+/** The seeded artwork is stable across mounts; only elapsed visible time advances it. */
+export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitState) => void): OrbitRenderer {
+  let ctx: CanvasRenderingContext2D | null = null;
+  try { ctx = canvas.getContext('2d'); } catch { /* Canvas may be disabled by the host. */ }
+  if (!ctx) {
+    onState('unavailable');
+    return { setPaused() {}, setReducedMotion() {}, dispose() {} };
+  }
+  const TAU = Math.PI * 2;
+  let linework: OrbitLinework = 'original';
+  let drawDonut: ReturnType<typeof createOrbitDonut> | undefined;
+  type ObjectStyle = Exclude<OrbitLinework, 'original'>;
+  const artworks = new Map<ObjectStyle, DonutArtwork>();
+  const loading = new Set<ObjectStyle>(), failed = new Set<ObjectStyle>();
+  const palette = { ...originalPalette }, fadeColors = { near: '', far: '' };
+  function readPalette() {
+    const style = getComputedStyle(canvas), previousFill = ctx!.fillStyle;
+    const recipe = style.getPropertyValue('--rhine-orbit-linework').trim();
+    linework = recipe === 'paper' || recipe === 'technical' || recipe === 'donut' ? recipe : 'original';
+    for (const key of Object.keys(originalPalette) as (keyof typeof originalPalette)[]) {
+      // Let Canvas resolve CSS colors, including color-mix() and non-RGB host tokens.
+      // An invalid value leaves fillStyle unchanged, so each entry starts at its fallback.
+      ctx!.fillStyle = originalPalette[key];
+      ctx!.fillStyle = style.getPropertyValue(`--rhine-orbit-${key}`).trim() || originalPalette[key];
+      palette[key] = ctx!.fillStyle as string;
+    }
+    fadeColors.near = transparentColor(palette['trail-near']);
+    fadeColors.far = transparentColor(palette['trail-far']);
+    ctx!.fillStyle = previousFill;
+  }
+  let seed = 1823;
+  function rand() {
+    seed = seed * 1664525 + 1013904223 >>> 0;
+    return seed / 4294967296;
+  }
+  const nodes = Array.from({ length: 420 }, (_, i) => ({ a: i / 420 * TAU, r: 1.025 + rand() * 0.07, z: (rand() - 0.5) * 0.34, length: 0.035 + rand() * 0.19, color: i % 7 === 0 ? 1 : i % 11 === 0 ? 2 : 3 }));
+  const emissions = nodes.map(() => ({ phase: rand(), rate: 0.28 + rand() * 0.3 }));
+  const edges = Array.from({ length: 185 }, () => ({ a: rand() * TAU, sweep: 2.1 + rand() * 3.8, phase: rand() * TAU, waist: 0.5 + rand() * 0.32, lift: (rand() - 0.3) * 0.6, color: rand() < 0.32 ? 1 : rand() < 0.1 ? 2 : 0, speed: 0.026 + rand() * 0.024 }));
+  function edgePoint(e: Edge, t: number) {
+    const a = e.a + t * e.sweep, envelope = Math.sin(Math.PI * t);
+    return { a, r: 1.035 - (1.035 - e.waist) * Math.pow(envelope, 0.72), z: e.lift * envelope + 0.06 * Math.sin(e.phase + t * TAU) * envelope };
+  }
+  const paths = edges.map((e) => Array.from({ length: 81 }, (_, i) => edgePoint(e, i / 80)));
+  const canvases = { network: { el: canvas, ctx, w: 0, h: 0 } };
+  let framing = orbitFraming(0, 0);
+  let time = 0, orbit = 0, projected: Point[] = [], last: number | null = null, frame = 0;
+  let paused = false, manualReduced = false, disposed = false, visible = true;
+  let previousState: OrbitState | undefined;
+  function resize() {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    // Layout CSS pixels exclude CSS zoom; visual scaling must not change stroke proportions.
+    const c = canvases.network;
+    c.w = c.el.clientWidth;
+    c.h = c.el.clientHeight;
+    framing = orbitFraming(c.w, c.h);
+    c.el.width = Math.round(c.w * dpr);
+    c.el.height = Math.round(c.h * dpr);
+    c.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    draw();
+  }
+  function line(ctx2: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number, color: string | CanvasGradient, width = 1, alpha = 1) {
+    ctx2.globalAlpha = alpha;
+    ctx2.strokeStyle = color;
+    ctx2.lineWidth = width;
+    ctx2.beginPath();
+    ctx2.moveTo(x1, y1);
+    ctx2.lineTo(x2, y2);
+    ctx2.stroke();
+    ctx2.globalAlpha = 1;
+  }
+  function dot(ctx2: CanvasRenderingContext2D, x: number, y: number, r: number, color: string | CanvasGradient, alpha = 1) {
+    ctx2.globalAlpha = alpha;
+    ctx2.fillStyle = color;
+    ctx2.beginPath();
+    ctx2.arc(x, y, r, 0, TAU);
+    ctx2.fill();
+    ctx2.globalAlpha = 1;
+  }
+  function marker(x: number, y: number, radius: number, color: string, alpha = 1) {
+    if (linework === 'original') { dot(ctx!, x, y, radius, color, alpha); return; }
+    ctx!.globalAlpha = alpha;
+    if (linework === 'technical') {
+      ctx!.fillStyle = color;
+      ctx!.fillRect(x - radius, y - radius, radius * 2, radius * 2);
+    } else {
+      ctx!.beginPath(); ctx!.arc(x, y, radius, 0, TAU);
+      ctx!.fillStyle = palette.void;
+      ctx!.fill();
+      ctx!.strokeStyle = color;
+      ctx!.lineWidth = .8;
+      ctx!.stroke();
+    }
+    ctx!.globalAlpha = 1;
+  }
+  function clear(c: CanvasScene) {
+    c.ctx.clearRect(0, 0, c.w, c.h);
+  }
+  function project(a: number, r = 1, z = 0) {
+    const { scale, centerX, centerY } = framing;
+    return projectOrbitPoint(rotateOrbitPoint({ x: Math.cos(a) * r, y: Math.sin(a) * r, z }), scale, centerX, centerY);
+  }
+  function network() {
+    const c = canvases.network, { ctx: ctx2 } = c;
+    clear(c);
+    const original = linework === 'original', paper = linework === 'paper', technical = linework === 'technical';
+    ctx2.lineCap = original || technical ? 'butt' : 'round';
+    ctx2.lineJoin = original || technical ? 'miter' : 'round';
+    ctx2.setLineDash([]);
+    ctx2.lineDashOffset = 0;
+    const buckets: Layer[][] = Array.from({ length: 80 }, () => []), offset = orbit;
+    function add(item: Layer, depth: number) {
+      buckets[Math.max(0, Math.min(79, Math.floor((depth + 1.5) / 3 * 80)))].push(item);
+    }
+    const horizon = Array.from({ length: 101 }, (_, i) => project(i / 100 * TAU, 0.46, -0.06));
+    add({ kind: "void", points: horizon }, -0.04);
+    edges.forEach((e, index) => {
+      const pts = paths[index].map((p) => project(p.a + offset, p.r, p.z));
+      let distance = 0;
+      for (let i = 1; i < pts.length; i++) {
+        add({ kind: "line", p: pts[i - 1], q: pts[i], color: e.color, distance }, (pts[i - 1].depth + pts[i].depth) / 2 + 7e-3);
+        distance += Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
+      }
+      if (index % 3 === 0) {
+        const t = (time * e.speed + e.phase / TAU) % 1, p3 = edgePoint(e, t), p = project(p3.a + offset, p3.r, p3.z);
+        add({ kind: "particle", p, color: e.color }, p.depth + 0.012);
+      }
+    });
+    projected = nodes.map((n) => project(n.a + offset, n.r, n.z));
+    nodes.forEach((n, i) => {
+      const emission = emissions[i], pulse = (time * emission.rate + emission.phase) % 1, breath = 1 + 0.18 * Math.sin(time * 1.7 + n.a * 5), p = projected[i], q = project(n.a + offset, n.r + n.length * breath, n.z * 1.1);
+      add({ kind: "spike", p, q, i, pulse }, (p.depth + q.depth) / 2);
+    });
+    const lineColors = [palette['line-primary'], palette['line-secondary'], palette['line-tertiary']];
+    const particleColors = [palette['particle-primary'], palette['particle-secondary'], palette['particle-tertiary']];
+    for (const bucket of buckets) for (const item of bucket) {
+      if (item.kind === "void") {
+        ctx2.beginPath();
+        item.points.forEach((p2, i) => i ? ctx2.lineTo(p2.x, p2.y) : ctx2.moveTo(p2.x, p2.y));
+        ctx2.closePath();
+        ctx2.fillStyle = palette.void;
+        ctx2.fill();
+        continue;
+      }
+      const p = item.p, near = Math.max(0, Math.min(1, (p.depth + 1) / 2));
+      if (item.kind === "line") {
+        // Keep the same projected segments and depth order; dash phase follows the whole curve.
+        if (technical && item.color !== 1) {
+          ctx2.setLineDash([4, 5]); ctx2.lineDashOffset = -item.distance;
+        }
+        const width = original ? .35 + near * .65 : paper ? .45 + near * .65 : .55 + near * .95;
+        const alpha = original ? .07 + near * near * .57 : paper ? .05 + near * near * .48 : .08 + near * near * .55;
+        line(ctx2, p.x, p.y, item.q.x, item.q.y, lineColors[item.color], width, alpha);
+        if (technical) { ctx2.setLineDash([]); ctx2.lineDashOffset = 0; }
+      } else if (item.kind === "spike") {
+        const q = item.q, bright = near > 0.48, color = palette[bright ? 'trail-near' : 'trail-far'], dx = q.x - p.x, dy = q.y - p.y, len = Math.hypot(dx, dy) || 1, ux = dx / len, uy = dy / len;
+        if (technical) ctx2.setLineDash([2, 3]);
+        line(ctx2, p.x, p.y, q.x, q.y, palette[bright ? 'spike-near' : 'spike-far'], original ? .4 + near * .4 : paper ? .5 : .7, bright ? .16 + near * .35 : .12 + near * .3);
+        if (technical) ctx2.setLineDash([]);
+        const t = item.pulse, fade = Math.sin(Math.PI * t), alpha = fade * (0.25 + near * 0.75), x = p.x + dx * t, y = p.y + dy * t, tail = Math.max(0, t - 0.38), tx = p.x + dx * tail, ty = p.y + dy * tail;
+        if (original) {
+          const trail = ctx2.createLinearGradient(tx, ty, x + 1e-3, y + 1e-3);
+          trail.addColorStop(0, fadeColors[bright ? 'near' : 'far']);
+          trail.addColorStop(1, color);
+          line(ctx2, tx, ty, x, y, trail, .7 + near * .9, alpha);
+        } else {
+          if (technical) ctx2.setLineDash([2, 2]);
+          line(ctx2, tx, ty, x, y, color, paper ? .65 + near * .65 : 1 + near * .8, alpha);
+          if (technical) ctx2.setLineDash([]);
+        }
+        const size = (1.6 + near * 1.5) * q.perspective;
+        ctx2.globalAlpha = alpha;
+        ctx2.strokeStyle = color;
+        ctx2.lineWidth = original ? .65 + near * .5 : paper ? .8 : 1.1;
+        ctx2.beginPath();
+        ctx2.moveTo(x - ux * size - uy * size * 0.55, y - uy * size + ux * size * 0.55);
+        ctx2.lineTo(x, y);
+        ctx2.lineTo(x - ux * size + uy * size * 0.55, y - uy * size - ux * size * 0.55);
+        ctx2.stroke();
+        ctx2.globalAlpha = 1;
+        if (item.i % 3 === 0) {
+          if (original) {
+            const radius = (4 + near * 4) * q.perspective, glow = ctx2.createRadialGradient(x, y, 0, x, y, radius);
+            glow.addColorStop(0, color);
+            glow.addColorStop(1, fadeColors[bright ? 'near' : 'far']);
+            dot(ctx2, x, y, radius, glow, alpha * .45);
+          }
+          dot(ctx2, x, y, 0.65 + near * 0.45, palette.spark, alpha);
+        }
+        const flash = Math.pow(Math.max(0, 1 - Math.abs(t - 0.88) / 0.12), 2);
+        dot(ctx2, q.x, q.y, (0.55 + flash * 1.1) * q.perspective, color, 0.18 + near * 0.25 + flash * 0.35);
+      } else {
+        ctx2.shadowBlur = original ? 5 : 0;
+        ctx2.shadowColor = particleColors[item.color];
+        marker(p.x, p.y, 1.1 * p.perspective, particleColors[item.color]);
+        ctx2.shadowBlur = 0;
+      }
+    }
+    for (let i = 0; i < 8; i++) {
+      const e = edges[i * 19], v = edgePoint(e, 0.4), p = project(v.a + offset, v.r, v.z);
+      if (p.depth < -0.1) continue;
+      ctx2.shadowColor = palette['highlight-glow'];
+      ctx2.shadowBlur = original ? 10 : 0;
+      marker(p.x, p.y, 2.2 * p.perspective, palette.highlight);
+      ctx2.shadowBlur = 0;
+    }
+  }
+  const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const compact = window.matchMedia?.('(max-width: 760px)');
+  function draw() {
+    const { w, h } = canvases.network;
+    if (!w || !h) return;
+    let rendered = false;
+    if (linework !== 'original') {
+      const kind = linework;
+      if (!artworks.has(kind) && !loading.has(kind) && !failed.has(kind) && window.WebGL2RenderingContext) {
+        loading.add(kind);
+        const load = kind === 'donut'
+          ? import('./orbitDonutThree').then(module => () => module.createDonutArtwork(sync))
+          : import('./orbitObjectsThree').then(module => () => module.createOrbitObject(kind, sync));
+        load.then(create => {
+          loading.delete(kind);
+          if (disposed || linework !== kind) return;
+          const artwork = create();
+          artworks.set(kind, artwork);
+          canvas.after(artwork.canvas);
+          sync();
+        }).catch(() => { loading.delete(kind); failed.add(kind); });
+      }
+      try { rendered = artworks.get(kind)?.draw(w, h, time) ?? false; }
+      catch { artworks.get(kind)?.dispose(); artworks.delete(kind); failed.add(kind); }
+      if (!rendered) {
+        if (kind === 'donut') (drawDonut ??= createOrbitDonut())(ctx!, w, h, time, palette['line-primary']);
+        else drawOrbitObject(ctx!, w, h, time, kind);
+      }
+    } else network();
+    // Keep the measured 2D canvas in layout while the optional WebGL painter covers it.
+    canvas.toggleAttribute('data-orbit-covered', rendered);
+    for (const [kind, artwork] of artworks) artwork.canvas.hidden = kind !== linework || !rendered;
+  }
+  function state(): OrbitState {
+    if (manualReduced || reduced?.matches || canvas.closest('[data-rhine-motion="reduced"]')) return 'reduced';
+    if (compact?.matches && linework === 'original') return 'compact';
+    if (document.hidden) return 'hidden';
+    if (!visible) return 'offscreen';
+    if (canvases.network.w <= 0 || canvases.network.h <= 0) return 'empty';
+    return paused ? 'paused' : 'playing';
+  }
+  function animate(now: number) {
+    frame = 0;
+    if (disposed) return;
+    // A frame can observe a media change before its change event is delivered.
+    if (state() !== 'playing') { sync(); return; }
+    const dt = last === null ? 0 : Math.min((now - last) / 1e3, 0.1);
+    last = now;
+    time += dt;
+    orbit += dt * 0.028;
+    draw();
+    frame = requestAnimationFrame(animate);
+  }
+  function sync() {
+    if (disposed) return;
+    cancelAnimationFrame(frame);
+    frame = 0;
+    last = null;
+    readPalette();
+    resize();
+    const next = state();
+    if (next !== previousState) { previousState = next; onState(next); }
+    if (next === 'playing') frame = requestAnimationFrame(animate);
+  }
+  const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(sync);
+  observer?.observe(canvas);
+  const intersection = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {
+    visible = entries.some(entry => entry.target === canvas && entry.isIntersecting);
+    sync();
+  });
+  intersection?.observe(canvas);
+  const appearance = new MutationObserver(sync);
+  // CSS-only roots can switch classes or custom properties without a ThemeProvider.
+  // Excluding canvas sizing and React state attributes prevents redraw loops.
+  for (let ancestor: HTMLElement | null = canvas; ancestor; ancestor = ancestor.parentElement) {
+    appearance.observe(ancestor, { attributes: true, attributeFilter: ['data-rhine-motion', 'data-rhine-theme', 'data-rhine-orbit-appearance', 'class', 'style'] });
+  }
+  reduced?.addEventListener?.('change', sync);
+  compact?.addEventListener?.('change', sync);
+  window.addEventListener('resize', sync);
+  document.addEventListener("visibilitychange", sync);
+  sync();
+  return {
+    setPaused(value) {
+      if (paused === value) return;
+      paused = value;
+      sync();
+    },
+    setReducedMotion(value) {
+      if (manualReduced === value) return;
+      manualReduced = value;
+      sync();
+    },
+    dispose() {
+      disposed = true;
+      for (const artwork of artworks.values()) artwork.dispose();
+      artworks.clear(); canvas.removeAttribute('data-orbit-covered');
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      intersection?.disconnect();
+      appearance.disconnect();
+      reduced?.removeEventListener?.('change', sync);
+      compact?.removeEventListener?.('change', sync);
+      window.removeEventListener('resize', sync);
+      document.removeEventListener("visibilitychange", sync);
+    }
+  };
+}

package/components/styles.css

@@ -5,6 +5,8 @@
 @import './timeline.css';
 @import './extensions.css';
 @import './background.css';
+@import './orbit.css';
+@import './neutron.css';
 @import './charts.css';
 
 .rhine-theme { color:var(--rhine-ink); background:var(--rhine-bg); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); font-synthesis:none; }
@@ -21,7 +23,8 @@
 .rhine-button--secondary:hover:not(:disabled):not([aria-disabled=true]),.rhine-button--quiet:hover:not(:disabled):not([aria-disabled=true]) { background:var(--rhine-selected); }
 .rhine-button--danger { background:var(--rhine-error); border-color:var(--rhine-error); }
 .rhine-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background:#81342e; border-color:#81342e; }
-.rhine-button:disabled { background:var(--rhine-selected); border-color:var(--rhine-line); color:var(--rhine-muted); cursor:default; }
+.rhine-button:is(:disabled,[data-disabled=true],[aria-disabled=true]:not([aria-busy=true])) { background:var(--rhine-selected); border-color:var(--rhine-line); color:var(--rhine-muted); cursor:default; }
+.rhine-button-link { text-decoration:none; text-align:center; }
 .rhine-button[aria-busy=true] { cursor:wait; }
 .rhine-button__ghost { visibility:hidden; }
 .rhine-button__busy { position:absolute; inset:0; display:grid; place-items:center; }

package/components/theme-neo-brutalism.css

@@ -53,12 +53,13 @@
 .rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-button--secondary, .rhine-button--quiet):hover:not(:disabled):not([aria-disabled=true]) { background: var(--rhine-selected); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background: #81262d; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform: translate(3px, 3px); box-shadow: none; }
-.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:disabled { background: #e1e5e8; color: var(--rhine-muted); border-color: #89929a; box-shadow: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:is(:disabled,[data-disabled=true],[aria-disabled=true]:not([aria-busy=true])) { background: #e1e5e8; color: var(--rhine-muted); border-color: #89929a; box-shadow: none; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button[aria-busy=true] { box-shadow: none; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible { outline: 3px solid var(--rhine-ink); outline-offset: 4px; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-tone-success { --rhine-tone-bg: var(--rhine-tag-green); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-tone-neutral { --rhine-tone-bg: #e7ebee; }
-.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-badge { border: 1px solid currentColor; border-radius: 8px; padding: 3px 9px; font-weight: 600; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-badge { border: 1.5px solid var(--rhine-ink); border-radius: 8px; padding: 3px 9px; font-weight: 700; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-badge.rhine-tone-neutral { color: var(--rhine-ink); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag { display: inline-flex; padding: 4px 10px; border: 1.5px solid var(--rhine-ink); border-radius: 8px; color: var(--rhine-ink); font-size: 12px; line-height: 20px; font-weight: 700; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag[data-color=green] { background: var(--rhine-tag-green); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag[data-color=orange] { background: var(--rhine-tag-orange); }

package/components/theme-picker.css

@@ -0,0 +1,17 @@
+.rhine-theme-picker { min-width:0; margin:0; padding:0; border:0; }
+.rhine-theme-picker>legend { padding:0; margin-bottom:var(--rhine-space-3); font-weight:var(--rhine-weight-heading); }
+.rhine-theme-picker__options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:var(--rhine-space-4); }
+.rhine-theme-option { position:relative; display:grid; align-content:start; gap:var(--rhine-space-3); min-width:0; min-height:44px; padding:var(--rhine-space-3); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); color:var(--rhine-ink); cursor:pointer; }
+.rhine-theme-option:has(input:checked) { border-color:var(--rhine-green); box-shadow:inset 0 0 0 2px var(--rhine-green); }
+.rhine-theme-option:has(input:focus-visible) { outline:3px solid var(--rhine-green); outline-offset:3px; }
+.rhine-theme-option:has(input:disabled) { opacity:.55; cursor:not-allowed; }
+.rhine-theme-option:hover:not(:has(input:disabled)) { background:var(--rhine-selected); }
+.rhine-theme-option__copy { display:grid; gap:var(--rhine-space-2); min-width:0; overflow-wrap:anywhere; }
+.rhine-theme-option__description { font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-theme-option__status { font-size:var(--rhine-text-caption); min-height:24px; }
+.rhine-theme-preview { position:relative; display:grid; place-items:center; aspect-ratio:8/5; min-width:0; overflow:hidden; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-control); background:var(--rhine-bg); color:var(--rhine-muted); font-size:var(--rhine-text-caption); }
+.rhine-theme-preview img { display:block; width:100%; height:100%; object-fit:contain; }
+.rhine-theme-preview__loading { position:absolute; inset:0; display:grid; place-items:center; background:var(--rhine-bg); }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-theme-option { border:2px solid var(--rhine-ink); box-shadow:var(--rhine-hard-shadow); }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-theme-option:has(input:checked) { box-shadow:inset 0 0 0 2px var(--rhine-green),var(--rhine-hard-shadow); }
+@media(forced-colors:active) { .rhine-theme-option:has(input:checked) { outline:3px solid Highlight; } }