@linhey/rhine-design 0.6.0 → 0.9.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

@@ -1,11 +1,33 @@
+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 }
+  | { 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 }
 
@@ -17,7 +39,28 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
     onState('unavailable');
     return { setPaused() {}, setReducedMotion() {}, dispose() {} };
   }
-  const TAU = Math.PI * 2, colors = ["#51b7f6", "#e5b94d", "#2ec7a1", "#bdcbe1"];
+  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;
@@ -32,8 +75,8 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
   }
   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;
-  const yaw = -0.72, tilt = 0.22;
   let paused = false, manualReduced = false, disposed = false, visible = true;
   let previousState: OrbitState | undefined;
   function resize() {
@@ -42,38 +85,61 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
     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) {
+  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) {
+  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 c = canvases.network, scale = Math.min(c.w * 0.66, c.h * 0.39), x = Math.cos(a) * r, y = Math.sin(a) * r;
-    const yy = y * Math.cos(tilt) - z * Math.sin(tilt), zz = y * Math.sin(tilt) + z * Math.cos(tilt);
-    const xx = x * Math.cos(yaw) + zz * Math.sin(yaw), depth = -x * Math.sin(yaw) + zz * Math.cos(yaw);
-    const spin = 0.34, px = xx * Math.cos(spin) - yy * Math.sin(spin), py = xx * Math.sin(spin) + yy * Math.cos(spin), perspective = 3.6 / (3.6 - depth);
-    return { x: c.w * 0.62 + px * scale * perspective, y: c.h * 0.57 + py * scale * perspective * 1.08, depth, perspective };
+    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);
@@ -82,7 +148,11 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
     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));
-      for (let i = 1; i < pts.length; i++) add({ kind: "line", p: pts[i - 1], q: pts[i], color: e.color }, (pts[i - 1].depth + pts[i].depth) / 2 + 7e-3);
+      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);
@@ -93,73 +163,116 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
       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 palette = ["104,178,244", "223,187,92", "72,182,179"];
+    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 = "#010205";
+        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") {
-        ctx2.strokeStyle = "rgba(" + palette[item.color] + "," + (0.07 + near * near * 0.57) + ")";
-        ctx2.lineWidth = 0.35 + near * 0.65;
-        ctx2.beginPath();
-        ctx2.moveTo(p.x, p.y);
-        ctx2.lineTo(item.q.x, item.q.y);
-        ctx2.stroke();
+        // 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, rgb = bright ? "173,218,255" : "225,161,71", dx = q.x - p.x, dy = q.y - p.y, len = Math.hypot(dx, dy) || 1, ux = dx / len, uy = dy / len;
-        line(ctx2, p.x, p.y, q.x, q.y, bright ? "rgba(213,224,241," + (0.16 + near * 0.35) + ")" : "rgba(181,118,53," + (0.12 + near * 0.3) + ")", 0.4 + near * 0.4);
+        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;
-        const trail = ctx2.createLinearGradient(tx, ty, x + 1e-3, y + 1e-3);
-        trail.addColorStop(0, "rgba(" + rgb + ",0)");
-        trail.addColorStop(1, "rgba(" + rgb + "," + alpha + ")");
-        line(ctx2, tx, ty, x, y, trail, 0.7 + near * 0.9);
+        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.strokeStyle = "rgba(" + rgb + "," + alpha + ")";
-        ctx2.lineWidth = 0.65 + near * 0.5;
+        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) {
-          const radius = (4 + near * 4) * q.perspective, glow = ctx2.createRadialGradient(x, y, 0, x, y, radius);
-          glow.addColorStop(0, "rgba(" + rgb + "," + alpha * 0.45 + ")");
-          glow.addColorStop(1, "rgba(" + rgb + ",0)");
-          dot(ctx2, x, y, radius, glow);
-          dot(ctx2, x, y, 0.65 + near * 0.45, "rgba(242,247,255," + alpha + ")");
+          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, "rgba(" + rgb + "," + (0.18 + near * 0.25 + flash * 0.35) + ")");
+        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 = 5;
-        ctx2.shadowColor = colors[item.color];
-        dot(ctx2, p.x, p.y, 1.1 * p.perspective, colors[item.color]);
+        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 = "#f25380";
-      ctx2.shadowBlur = 10;
-      dot(ctx2, p.x, p.y, 2.2 * p.perspective, "#ff658c");
+      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() {
-    if (canvases.network.w && canvases.network.h) network();
+    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) return 'compact';
+    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';
@@ -182,6 +295,7 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
     cancelAnimationFrame(frame);
     frame = 0;
     last = null;
+    readPalette();
     resize();
     const next = state();
     if (next !== previousState) { previousState = next; onState(next); }
@@ -194,10 +308,11 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
     sync();
   });
   intersection?.observe(canvas);
-  const motion = new MutationObserver(sync);
-  // Observe ancestors only: canvas sizing and React state writes must not retrigger drawing.
-  for (let ancestor = canvas.parentElement; ancestor; ancestor = ancestor.parentElement) {
-    motion.observe(ancestor, { attributes: true, attributeFilter: ['data-rhine-motion'] });
+  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);
@@ -217,10 +332,12 @@ export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitStat
     },
     dispose() {
       disposed = true;
+      for (const artwork of artworks.values()) artwork.dispose();
+      artworks.clear(); canvas.removeAttribute('data-orbit-covered');
       cancelAnimationFrame(frame);
       observer?.disconnect();
       intersection?.disconnect();
-      motion.disconnect();
+      appearance.disconnect();
       reduced?.removeEventListener?.('change', sync);
       compact?.removeEventListener?.('change', sync);
       window.removeEventListener('resize', sync);

package/components/styles.css

@@ -6,6 +6,7 @@
 @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; }
@@ -22,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); }