@linhey/rhine-design 0.6.0 → 0.9.0

package/components/neutronRenderer.ts

@@ -0,0 +1,327 @@
+import {
+  AdditiveBlending, NormalBlending, BufferGeometry, Color, DoubleSide, Group, Line,
+  LineBasicMaterial, Mesh, PerspectiveCamera, PlaneGeometry,
+  Scene, ShaderMaterial, SphereGeometry, Vector3, WebGLRenderer, Points, Float32BufferAttribute, Material,
+} from 'three';
+
+export type NeutronState = 'loading' | 'playing' | 'paused' | 'reduced' | 'hidden' | 'offscreen' | 'empty' | 'unavailable';
+type Appearance = 'theme' | 'original';
+interface NeutronOptions { paused?: boolean; reducedMotion?: boolean; appearance?: Appearance }
+export interface NeutronRenderer {
+  setPaused(value: boolean): void;
+  setReducedMotion(value: boolean): void;
+  setAppearance(value: Appearance): void;
+  dispose(): void;
+}
+
+/** The scene advances only by elapsed visible frames; no timer encodes business state. */
+export function mountNeutron(host: HTMLDivElement, onState: (state: NeutronState) => void, options: NeutronOptions = {}): NeutronRenderer {
+  const cleanups: Array<() => void> = [];
+  const geometries = new Set<BufferGeometry>(), materials = new Set<Material>();
+  const geometry = <T extends BufferGeometry>(value: T): T => { geometries.add(value); return value; };
+  const material = <T extends Material>(value: T): T => { materials.add(value); return value; };
+  let renderer: WebGLRenderer | undefined;
+  let released = false;
+  function release() {
+    if (released) return;
+    released = true;
+    geometries.forEach(value => value.dispose());
+    materials.forEach(value => value.dispose());
+    renderer?.dispose();
+    renderer?.forceContextLoss();
+    renderer?.domElement.remove();
+    host.removeAttribute('data-rhine-neutron-rendered');
+  }
+  try {
+    renderer = new WebGLRenderer({ alpha: true, antialias: true, powerPreference: 'low-power' });
+    const gl = renderer;
+    const scene = new Scene();
+    const camera = new PerspectiveCamera(34, 1, .1, 40);
+    camera.position.set(0, .5, 7.8);
+    camera.lookAt(0, 0, 0);
+    renderer.setClearColor(0x000000, 0);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));
+    host.appendChild(renderer.domElement);
+    renderer.domElement.className = 'rhine-neutron-canvas';
+    renderer.domElement.setAttribute('aria-hidden', 'true');
+    const star = new Group();
+    star.position.set(.85, .65, 0);
+    star.scale.setScalar(1.5);
+    star.rotation.z = -.48;
+    scene.add(star);
+    const time = { value: 0 };
+    const core = new Mesh(geometry(new SphereGeometry(.34, 64, 40)), material(new ShaderMaterial({
+      uniforms: { time, cool: { value: new Color().setRGB(.12,.38,.8) }, hot: { value: new Color().setRGB(.86,.97,1) }, edge: { value: new Color().setRGB(.16,.47,.94) } },
+      vertexShader: `varying vec3 surface; varying vec3 normalView; varying vec3 viewDirection;
+        void main(){ surface=position; vec4 mv=modelViewMatrix*vec4(position,1.);
+          normalView=normalize(normalMatrix*normal); viewDirection=normalize(-mv.xyz);
+          gl_Position=projectionMatrix*mv; }`,
+      fragmentShader: `uniform float time; uniform vec3 cool; uniform vec3 hot; uniform vec3 edge; varying vec3 surface; varying vec3 normalView; varying vec3 viewDirection;
+        void main(){vec3 p=normalize(surface); float flow=sin(p.x*28.+sin(p.y*19.+time*.5)*2.+p.z*14.-time*.7);
+          float grain=sin(p.y*47.+sin(p.z*31.-time*.3))*sin(p.x*39.+time*.2);
+          float facing=max(dot(normalize(normalView),normalize(viewDirection)),0.);
+          float heat=smoothstep(-.35,.9,flow+grain*.35);
+          vec3 color=mix(cool,hot,heat);
+          color=mix(edge,color,pow(facing,.45));
+          gl_FragColor=vec4(color,1.); }`,
+    })));
+    star.add(core);
+
+    // A camera-facing halo avoids an expensive full-screen bloom pass.
+    const halo = new Mesh(geometry(new PlaneGeometry(2.3, 2.3)), material(new ShaderMaterial({
+      transparent: true, depthWrite: false,
+      uniforms: { tint: { value: new Color('#4c9aff') } },
+      vertexShader: 'varying vec2 vUv; void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);}',
+      fragmentShader: 'varying vec2 vUv; uniform vec3 tint; void main(){float d=length(vUv-.5)*2.;float a=exp(-d*d*7.)*.65*(1.-smoothstep(.65,1.,d));gl_FragColor=vec4(tint,a);}',
+    })));
+    halo.quaternion.copy(camera.quaternion);
+    halo.position.copy(star.position);
+    halo.scale.setScalar(1.5);
+    scene.add(halo);
+    const corona = new Mesh(geometry(new SphereGeometry(.39, 48, 32)), material(new ShaderMaterial({
+      transparent: true, depthWrite: false, blending: AdditiveBlending,
+      uniforms: { time, tint: { value: new Color().setRGB(.25,.6,1) } },
+      vertexShader: `varying vec3 n; varying vec3 eye; void main(){vec4 mv=modelViewMatrix*vec4(position,1.);
+        n=normalize(normalMatrix*normal); eye=normalize(-mv.xyz); gl_Position=projectionMatrix*mv;}`,
+      fragmentShader: `uniform float time; uniform vec3 tint; varying vec3 n; varying vec3 eye; void main(){
+        float rim=pow(1.-max(dot(normalize(n),normalize(eye)),0.),2.5);
+        gl_FragColor=vec4(tint,rim*(.45+.05*sin(time*.8)));}`,
+    })));
+    star.add(corona);
+    for (let i = 0; i < 28; i++) {
+      const azimuth = (i % 14) * Math.PI * 2 / 14 + Math.floor(i / 14) * .15;
+      const extent = i < 14 ? 1.1 : 1.65;
+      const points = [];
+      for (let j = 0; j <= 100; j++) {
+        const theta = .24 + (Math.PI - .48) * j / 100;
+        const radius = extent * Math.sin(theta) ** 2;
+        points.push(new Vector3(radius * Math.sin(theta) * Math.cos(azimuth), radius * Math.cos(theta), radius * Math.sin(theta) * Math.sin(azimuth)));
+      }
+      star.add(new Line(geometry(new BufferGeometry().setFromPoints(points)), material(new LineBasicMaterial({ color: i < 14 ? 0x6bdafa : 0x8976ed, transparent: true, opacity: i < 14 ? .34 : .16 }))));
+    }
+    const beamMaterial = material(new ShaderMaterial({
+      transparent: true, depthWrite: false, side: DoubleSide, blending: AdditiveBlending,
+      uniforms: { time, cool: { value: new Color().setRGB(.24,.48,1) }, hot: { value: new Color().setRGB(.65,.93,1) } },
+      vertexShader: 'varying vec2 vUv; void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);}',
+      fragmentShader: `uniform float time; uniform vec3 cool; uniform vec3 hot; varying vec2 vUv; void main(){float width=mix(.07,.45,vUv.y);
+        float spine=exp(-pow((vUv.x-.5)/.035,2.)*3.);
+        float cloud=exp(-pow((vUv.x-.5)/width,2.)*4.);
+        float wave=.8+.2*sin(vUv.y*42.-time*2.);
+        float a=(cloud*wave+spine*.45)*pow(1.-vUv.y,1.7);
+        gl_FragColor=vec4(mix(cool,hot,spine),a*.65);}`,
+    }));
+    for (const sign of [-1, 1]) {
+      for (const angle of [0, Math.PI / 2]) {
+        const beam = new Mesh(geometry(new PlaneGeometry(.75, 1.7)), beamMaterial);
+        beam.position.y = sign * 1.03;
+        beam.rotation.y = angle;
+        if (sign < 0) beam.rotation.z = Math.PI;
+        star.add(beam);
+      }
+    }
+    // Stream points follow the same dipole curves as the magnetic field lines.
+    const streamsGeometry = geometry(new BufferGeometry());
+    const seeds = [];
+    for (let i = 0; i < 560; i++) seeds.push((i % 14) / 14 + (i < 280 ? 0 : .15 / (Math.PI * 2)), (i % 40) / 40, i < 280 ? 1.1 : 1.65);
+    streamsGeometry.setAttribute('position', new Float32BufferAttribute(seeds, 3));
+    const streams = new Points(streamsGeometry, material(new ShaderMaterial({
+      transparent: true, depthWrite: false, blending: AdditiveBlending,
+      uniforms: { time, pixelRatio: { value: renderer.getPixelRatio() }, tint: { value: new Color().setRGB(.42,.8,1) } },
+      vertexShader: `uniform float time; uniform float pixelRatio; varying float alpha;
+        void main(){float progress=fract(position.y+time*.065); float theta=.24+progress*2.66159;
+          float azimuth=position.x*6.28318; float r=position.z*sin(theta)*sin(theta);
+          vec3 p=vec3(r*sin(theta)*cos(azimuth),r*cos(theta),r*sin(theta)*sin(azimuth));
+          vec4 mv=modelViewMatrix*vec4(p,1.); gl_Position=projectionMatrix*mv;
+          gl_PointSize=pixelRatio*2.8*(6./-mv.z); alpha=sin(progress*3.14159)*.7; }`,
+      fragmentShader: `uniform vec3 tint; varying float alpha; void main(){float d=length(gl_PointCoord-.5)*2.;
+        gl_FragColor=vec4(tint,(1.-smoothstep(.1,1.,d))*alpha);}`,
+    })));
+    // Position attributes hold seeds, so their CPU bounds do not enclose the shader-generated curves.
+    streams.frustumCulled = false;
+    star.add(streams);
+    const particleGeometry = geometry(new BufferGeometry());
+    const positions = [];
+    const sizes = [];
+    const phases = [];
+    for (let i = 0; i < 700; i++) {
+      const angle = i * 2.399963;
+      const radius = .65 + Math.sqrt((i % 421) / 421) * 2.6;
+      positions.push(Math.cos(angle) * radius, Math.sin(angle) * radius * .48, Math.sin(i * 1.71) * 1.2);
+      sizes.push(1.2 + (i % 7) * .3);
+      phases.push(i * .73);
+    }
+    particleGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    particleGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1));
+    particleGeometry.setAttribute('phase', new Float32BufferAttribute(phases, 1));
+    const particleMaterial = material(new ShaderMaterial({
+      transparent: true, depthWrite: false,
+      uniforms: { time, pixelRatio: { value: renderer.getPixelRatio() }, tint: { value: new Color().setRGB(.18,.46,.78) } },
+      vertexShader: `attribute float size; attribute float phase; uniform float time; uniform float pixelRatio; varying float opacity;
+        void main(){ vec3 p=position; float a=time*.065; p.xz=mat2(cos(a),-sin(a),sin(a),cos(a))*p.xz;
+          p.y+=sin(time*.4+phase)*.08; vec4 mv=modelViewMatrix*vec4(p,1.);
+          gl_Position=projectionMatrix*mv; gl_PointSize=size*pixelRatio*(6./-mv.z); opacity=.35+.25*sin(phase+time*.6); }`,
+      fragmentShader: `uniform vec3 tint; varying float opacity; void main(){float d=length(gl_PointCoord-.5)*2.;
+        gl_FragColor=vec4(tint,(1.-smoothstep(.2,1.,d))*opacity);}`,
+    }));
+    const particles = new Points(particleGeometry, particleMaterial);
+    particles.position.copy(star.position);
+    particles.rotation.z = -.28;
+    scene.add(particles);
+    const orbit = new Group();
+    scene.add(orbit);
+    orbit.add(star, halo, particles);
+    const updateOrbit = () => {
+      const phase = time.value * Math.PI * 2 / 28;
+      // Translate the whole system in depth; perspective supplies the size change.
+      orbit.position.set(.75 * Math.sin(phase), .2 * Math.sin(phase + .6), 1.35 * Math.cos(phase));
+    };
+    updateOrbit();
+    let frame = 0, last: number | null = null, width = 0, height = 0;
+    let bitmapWidth = 0, bitmapHeight = 0, pixelRatio = 0;
+    let paused = options.paused ?? false, manualReduced = options.reducedMotion ?? false;
+    let appearance = options.appearance ?? 'theme';
+    let disposed = false, failed = false, lost = false, visible = true;
+    let previousState: NeutronState | undefined;
+    const motion = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+    function announce(next: NeutronState) {
+      if (next !== previousState) { previousState = next; onState(next); }
+    }
+    function state(): NeutronState {
+      if (failed || lost) return 'unavailable';
+      if (manualReduced || motion?.matches || host.closest('[data-rhine-motion="reduced"]')) return 'reduced';
+      if (document.hidden) return 'hidden';
+      if (!visible) return 'offscreen';
+      if (width <= 0 || height <= 0) return 'empty';
+      return paused ? 'paused' : 'playing';
+    }
+    function stop() { cancelAnimationFrame(frame); frame = 0; last = null; }
+    function render() {
+      if (failed || lost || !width || !height) return;
+      try {
+        gl.render(scene, camera);
+        host.setAttribute('data-rhine-neutron-rendered', 'true');
+      } catch {
+        failed = true; stop();
+        cleanups.splice(0).forEach(cleanup => cleanup());
+        release(); announce('unavailable');
+      }
+    }
+    function palette() {
+      const css = getComputedStyle(host);
+      const read = (token: string, fallback: string) => new Color(css.getPropertyValue(token).trim() || fallback);
+      const original = appearance === 'original';
+      const primary = read('--rhine-green', '#425c4b'), secondary = read('--rhine-signal', '#c65c34');
+      const bright = primary.clone().lerp(new Color('#ffffff'), .7);
+      core.material.uniforms.cool.value.copy(original ? new Color().setRGB(.12,.38,.8) : primary);
+      core.material.uniforms.hot.value.copy(original ? new Color().setRGB(.86,.97,1) : bright);
+      core.material.uniforms.edge.value.copy(original ? new Color().setRGB(.16,.47,.94) : secondary);
+      halo.material.uniforms.tint.value.copy(original ? new Color('#4c9aff') : primary);
+      corona.material.uniforms.tint.value.copy(original ? new Color().setRGB(.25,.6,1) : primary);
+      beamMaterial.uniforms.cool.value.copy(original ? new Color().setRGB(.24,.48,1) : secondary);
+      beamMaterial.uniforms.hot.value.copy(original ? new Color().setRGB(.65,.93,1) : bright);
+      streams.material.uniforms.tint.value.copy(original ? new Color().setRGB(.42,.8,1) : primary);
+      particleMaterial.uniforms.tint.value.copy(original ? new Color().setRGB(.18,.46,.78) : read('--rhine-ink', '#242b28'));
+      let line = 0;
+      for (const child of star.children) if (child instanceof Line) {
+        const inner = line++ < 14;
+        child.material.color.copy(original ? new Color(inner ? 0x6bdafa : 0x8976ed) : inner ? primary : secondary);
+        child.material.opacity = original ? inner ? .34 : .16 : inner ? .5 : .3;
+      }
+      for (const value of [corona.material, beamMaterial, streams.material]) {
+        value.blending = original ? AdditiveBlending : NormalBlending;
+      }
+    }
+    function resize() {
+      // Layout pixels exclude CSS zoom; the bitmap and camera must not grow twice.
+      width = host.clientWidth; height = host.clientHeight;
+      if (!width || !height || failed || lost) return;
+      const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
+      if (width !== bitmapWidth || height !== bitmapHeight || ratio !== pixelRatio) {
+        if (ratio !== pixelRatio) gl.setPixelRatio(ratio);
+        streams.material.uniforms.pixelRatio.value = particleMaterial.uniforms.pixelRatio.value = ratio;
+        camera.aspect = width / height;
+        // A tall page must not crop the core's orbit: fit the camera, not the artwork geometry.
+        camera.position.x = .85 * Math.min(1, Math.max(0, (1.2 - camera.aspect) / .3));
+        camera.lookAt(camera.position.x, 0, 0);
+        camera.zoom = Math.min(1, camera.aspect / .95);
+        camera.updateProjectionMatrix();
+        halo.quaternion.copy(camera.quaternion);
+        gl.setSize(width, height, false);
+        bitmapWidth = width; bitmapHeight = height; pixelRatio = ratio;
+      }
+    }
+    function tick(now: number) {
+      frame = 0;
+      if (disposed || failed) return;
+      // Media preferences can change before their corresponding event is dispatched.
+      if (state() !== 'playing') { sync(); return; }
+      if (last === null) last = now;
+      if (now - last >= 1000 / 30) {
+        const delta = Math.min((now - last) / 1000, .05);
+        last = now;
+        time.value += delta;
+        star.rotation.y += delta * .45;
+        updateOrbit();
+        render();
+      }
+      if (!failed) frame = requestAnimationFrame(tick);
+    }
+    function sync() {
+      if (disposed || failed) return;
+      stop(); resize(); render();
+      const next = state(); announce(next);
+      if (next === 'playing') frame = requestAnimationFrame(tick);
+    }
+    function refreshTheme() { if (!disposed && !failed) { palette(); sync(); } }
+    function contextLost(event: Event) {
+      event.preventDefault(); lost = true;
+      host.removeAttribute('data-rhine-neutron-rendered'); sync();
+    }
+    function contextRestored() {
+      if (!disposed && !failed) { lost = false; bitmapWidth = bitmapHeight = pixelRatio = 0; refreshTheme(); }
+    }
+    gl.domElement.addEventListener('webglcontextlost', contextLost);
+    gl.domElement.addEventListener('webglcontextrestored', contextRestored);
+    cleanups.push(() => {
+      gl.domElement.removeEventListener('webglcontextlost', contextLost);
+      gl.domElement.removeEventListener('webglcontextrestored', contextRestored);
+    });
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(sync);
+    if (observer) { cleanups.push(() => observer.disconnect()); observer.observe(host); }
+    const intersection = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {
+      const entry = entries.find(value => value.target === host);
+      if (entry) { visible = entry.isIntersecting; sync(); }
+    });
+    if (intersection) { cleanups.push(() => intersection.disconnect()); intersection.observe(host); }
+    const preferences = new MutationObserver(refreshTheme);
+    cleanups.push(() => preferences.disconnect());
+    // Watch ancestors, not canvas attributes or our own state notifications.
+    for (let ancestor = host.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      preferences.observe(ancestor, { attributes: true, attributeFilter: ['data-rhine-theme', 'data-rhine-motion', 'class', 'style'] });
+    }
+    document.addEventListener('visibilitychange', sync);
+    window.addEventListener('resize', sync);
+    motion?.addEventListener?.('change', sync);
+    cleanups.push(() => {
+      document.removeEventListener('visibilitychange', sync);
+      window.removeEventListener('resize', sync);
+      motion?.removeEventListener?.('change', sync);
+    });
+    palette(); sync();
+    return {
+      setPaused(value) { if (paused !== value) { paused = value; sync(); } },
+      setReducedMotion(value) { if (manualReduced !== value) { manualReduced = value; sync(); } },
+      setAppearance(value) { if (appearance !== value) { appearance = value; refreshTheme(); } },
+      dispose() {
+        if (disposed) return;
+        disposed = true; stop();
+        cleanups.splice(0).forEach(cleanup => cleanup());
+        release();
+      },
+    };
+  } catch {
+    cleanups.splice(0).forEach(cleanup => cleanup());
+    release(); onState('unavailable');
+    return { setPaused() {}, setReducedMotion() {}, setAppearance() {}, dispose() {} };
+  }
+}

package/components/orbit.css

@@ -1,7 +1,43 @@
 .rhine-orbit {
+  --rhine-orbit-linework: paper;
+  --rhine-orbit-line-primary: var(--rhine-green);
+  --rhine-orbit-line-secondary: var(--rhine-signal);
+  --rhine-orbit-line-tertiary: var(--rhine-muted);
+  --rhine-orbit-particle-primary: var(--rhine-green);
+  --rhine-orbit-particle-secondary: var(--rhine-signal);
+  --rhine-orbit-particle-tertiary: var(--rhine-ink);
+  --rhine-orbit-spike-near: var(--rhine-ink);
+  --rhine-orbit-spike-far: var(--rhine-warning);
+  --rhine-orbit-trail-near: var(--rhine-green);
+  --rhine-orbit-trail-far: var(--rhine-signal);
+  --rhine-orbit-spark: var(--rhine-ink);
+  --rhine-orbit-void: var(--rhine-surface);
+  --rhine-orbit-highlight: var(--rhine-signal);
+  --rhine-orbit-highlight-glow: var(--rhine-signal);
   position:relative; isolation:isolate; display:flex; flex-direction:column;
   min-width:0; min-height:280px; overflow:hidden;
   border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card);
+  background:
+    radial-gradient(ellipse at 90% 78%, color-mix(in srgb, var(--rhine-green) 12%, transparent) 0, transparent 43%),
+    radial-gradient(ellipse at 8% 54%, color-mix(in srgb, var(--rhine-signal) 8%, transparent) 0, transparent 35%),
+    linear-gradient(155deg, var(--rhine-surface) 12%, var(--rhine-bg) 58%, var(--rhine-surface));
+}
+.rhine-orbit[data-rhine-orbit-appearance="original"] {
+  --rhine-orbit-linework: original;
+  --rhine-orbit-line-primary: #68b2f4;
+  --rhine-orbit-line-secondary: #dfbb5c;
+  --rhine-orbit-line-tertiary: #48b6b3;
+  --rhine-orbit-particle-primary: #51b7f6;
+  --rhine-orbit-particle-secondary: #e5b94d;
+  --rhine-orbit-particle-tertiary: #2ec7a1;
+  --rhine-orbit-spike-near: #d5e0f1;
+  --rhine-orbit-spike-far: #b57635;
+  --rhine-orbit-trail-near: #addaff;
+  --rhine-orbit-trail-far: #e1a147;
+  --rhine-orbit-spark: #f2f7ff;
+  --rhine-orbit-void: #010205;
+  --rhine-orbit-highlight: #ff658c;
+  --rhine-orbit-highlight-glow: #f25380;
   background:
     radial-gradient(ellipse at 90% 78%, #15508066 0, transparent 43%),
     radial-gradient(ellipse at 8% 54%, #84603626 0, transparent 35%),
@@ -10,6 +46,15 @@
 }
 .rhine-orbit::before, .rhine-orbit::after { content:''; position:absolute; inset:0; pointer-events:none; }
 .rhine-orbit::before {
+  background-image:
+    radial-gradient(circle at 17px 37px, var(--rhine-muted) .7px, transparent 1.4px),
+    radial-gradient(circle at 73px 19px, var(--rhine-green) .6px, transparent 1.2px),
+    radial-gradient(circle at 41px 89px, var(--rhine-signal) .7px, transparent 1.3px),
+    radial-gradient(circle at 113px 157px, var(--rhine-muted) .5px, transparent 1.2px);
+  background-size:173px 211px, 127px 181px, 251px 239px, 97px 139px;
+  opacity:.24;
+}
+.rhine-orbit[data-rhine-orbit-appearance="original"]::before {
   background-image:
     radial-gradient(circle at 17px 37px, #d7eaffb3 .7px, transparent 1.4px),
     radial-gradient(circle at 73px 19px, #8bb8e780 .6px, transparent 1.2px),
@@ -19,18 +64,51 @@
   opacity:.55;
 }
 .rhine-orbit::after {
+  background:
+    radial-gradient(ellipse at 77% 66%, color-mix(in srgb, var(--rhine-green) 8%, transparent) 0, transparent 28%),
+    radial-gradient(ellipse at 24% 84%, color-mix(in srgb, var(--rhine-signal) 6%, transparent) 0, transparent 30%);
+}
+.rhine-orbit[data-rhine-orbit-appearance="original"]::after {
   background:
     radial-gradient(ellipse at 77% 66%, #52a4f21a 0, transparent 28%),
     radial-gradient(ellipse at 24% 84%, #b8874220 0, transparent 30%),
     linear-gradient(125deg, transparent 40%, #6295d109 49%, transparent 58%);
 }
 .rhine-orbit-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
+.rhine-orbit-canvas[data-orbit-covered] { visibility:hidden; }
+.rhine-orbit-canvas[hidden] { display:none; }
+.rhine-orbit[data-rhine-orbit-appearance="theme"][data-rhine-orbit-state="unavailable"]::after {
+  inset:16px 16px 68px;
+  background:url('./assets/orbit-bird.svg') center / contain no-repeat;
+}
 /* Keep host control tokens intact; only unpainted content inherits the artwork foreground. */
 .rhine-orbit-content {
   position:relative; z-index:1; flex:1; min-width:0;
   display:flex; flex-direction:column; justify-content:space-between; gap:var(--rhine-space-6);
   padding:var(--rhine-space-6); padding-bottom:calc(44px + var(--rhine-space-6) * 2);
-  color:#f2f7ff;
+  color:var(--rhine-ink);
+}
+.rhine-orbit[data-rhine-orbit-appearance="original"] > .rhine-orbit-content { color:#f2f7ff; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-orbit[data-rhine-orbit-appearance="theme"] {
+  --rhine-orbit-linework: donut;
+  --rhine-orbit-line-primary: var(--rhine-ink);
+  --rhine-orbit-line-tertiary: var(--rhine-green);
+  border:2px solid var(--rhine-ink);
+  box-shadow:var(--rhine-hard-shadow);
+  background:#fff3e5;
+}
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-orbit[data-rhine-orbit-appearance="theme"]::before,
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-orbit[data-rhine-orbit-appearance="theme"]::after { display:none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-orbit[data-rhine-orbit-appearance="theme"][data-rhine-orbit-state="unavailable"]::after {
+  display:block;
+  inset:16px 16px 68px;
+  background:url('./assets/orbit-donut.svg') center / contain no-repeat;
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-orbit[data-rhine-orbit-appearance="theme"] {
+  --rhine-orbit-linework: technical;
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-orbit[data-rhine-orbit-appearance="theme"][data-rhine-orbit-state="unavailable"]::after {
+  background-image:url('./assets/orbit-crystal.svg');
 }
 .rhine-orbit-content :is(.rhine-text--muted, .rhine-field__hint) { color:inherit; opacity:.8; }
 .rhine-orbit-content .rhine-logo:not(.rhine-logo--icon) { color:inherit; }
@@ -40,3 +118,24 @@
 .rhine-orbit .rhine-orbit-content .rhine-button--quiet:focus-visible { outline:none; box-shadow:inset 0 0 0 2px currentColor; }
 .rhine-orbit-controls { position:absolute; right:var(--rhine-space-4); bottom:var(--rhine-space-4); z-index:2; max-width:calc(100% - var(--rhine-space-4) * 2); }
 .rhine-orbit-controls .rhine-button { max-width:100%; }
+
+/* Public composition options keep both renderers and static artwork in the same region. */
+.rhine-orbit[data-rhine-orbit-controls="false"] > .rhine-orbit-content { padding-bottom:var(--rhine-space-6); }
+.rhine-orbit[data-rhine-orbit-composition="corner"] > .rhine-orbit-canvas,
+.rhine-orbit[data-rhine-orbit-composition="corner"][data-rhine-orbit-state="unavailable"]::after,
+.rhine-theme[data-rhine-theme] .rhine-orbit[data-rhine-orbit-composition="corner"][data-rhine-orbit-state="unavailable"]::after {
+  inset:auto 0 0 auto;
+  width:min(100%, 480px); height:44%; max-height:360px;
+}
+.rhine-orbit[data-rhine-orbit-framed="false"],
+.rhine-theme[data-rhine-theme] .rhine-orbit[data-rhine-orbit-framed="false"] {
+  border:0; border-radius:0; box-shadow:none;
+}
+/* Older packaged artwork painted this fallback on the full root background. */
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-orbit[data-rhine-orbit-appearance="theme"][data-rhine-orbit-composition="corner"][data-rhine-orbit-state="unavailable"] {
+  background-image:none;
+}
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-orbit[data-rhine-orbit-appearance="theme"][data-rhine-orbit-composition="corner"][data-rhine-orbit-state="unavailable"]::after {
+  display:block;
+  background:url('./assets/orbit-donut.svg') center / contain no-repeat;
+}

package/components/orbitBirdFlight.ts

@@ -0,0 +1,34 @@
+export function paperMorphAmount(time: number) {
+  const phase = ((time % 42) + 42) % 42;
+  return phase < 4 ? 0 : phase < 18 ? (phase - 4) / 14 : phase < 24 ? 1 : phase < 38 ? (38 - phase) / 14 : 0;
+}
+
+export function paperEase(start: number, end: number, value: number) {
+  const t = Math.max(0, Math.min(1, (value - start) / (end - start)));
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+
+/** Every flight pose is derived from the host's paused, visible-time clock. */
+export function paperBirdFlight(time: number) {
+  const morph = paperMorphAmount(time);
+  const folding = paperEase(0, .12, morph) * (1 - paperEase(.88, 1, morph));
+  const turn = time * Math.PI * 2 / 14;
+  const stroke = time * Math.PI * 2 / 2.4;
+  const effort = .55 + .45 * Math.sin(turn - .4) ** 2;
+  return {
+    x: Math.sin(turn) * .37,
+    y: -.14 + Math.sin(turn * 2) * .16 + Math.sin(stroke - .5) * .035 * effort,
+    z: Math.cos(turn) * .2,
+    pitch: Math.cos(turn * 2) * .07 + Math.cos(stroke) * .025 * effort - folding * .09,
+    yaw: Math.cos(turn) * .24,
+    bank: -Math.sin(turn) * .12,
+    wing: ((-.03 + Math.sin(stroke) * .29 * effort) * (1 - morph) + (.2 + Math.sin(time * Math.PI * 2 / .8) * .43) * morph) * (1 - folding),
+  };
+}
+
+export function rotatePaperPoint(x: number, y: number, z: number, pitch: number, yaw: number, bank: number) {
+  // Match Three.js XYZ Euler order: local Z, then Y, then X.
+  const bx = x * Math.cos(bank) - y * Math.sin(bank), by = x * Math.sin(bank) + y * Math.cos(bank);
+  const yx = bx * Math.cos(yaw) + z * Math.sin(yaw), yz = -bx * Math.sin(yaw) + z * Math.cos(yaw);
+  return [yx, by * Math.cos(pitch) - yz * Math.sin(pitch), by * Math.sin(pitch) + yz * Math.cos(pitch)] as const;
+}

package/components/orbitBirdGeometry.ts

@@ -0,0 +1,158 @@
+import { paperEase } from './orbitBirdFlight';
+
+type Vertex = [number, number, number];
+export type PaperFold = { name: string; points: Vertex[]; faces: number[][]; wing: -1 | 0 | 1 };
+
+/** Authored folds are shared by the WebGL sculpture and the Canvas fallback. */
+export function paperBirdFolds(form: 'bird' | 'butterfly' = 'bird'): PaperFold[] {
+  const butterfly = form === 'butterfly';
+  const parts: PaperFold[] = [];
+  const part = (name: string, wing: -1 | 0 | 1 = 0): PaperFold => {
+    const value = { name, points: [] as Vertex[], faces: [] as number[][], wing };
+    parts.push(value); return value;
+  };
+  const mix = (a: Vertex, b: Vertex, t: number): Vertex => a.map((v, i) => v + (b[i] - v) * t) as Vertex;
+  function foldedVolume(name: string, rings: Array<{ center: Vertex; width: number; height: number }>) {
+    const p = part(name), sides = 8;
+    for (const ring of rings) for (let j = 0; j < sides; j++) {
+      const a = j / sides * Math.PI * 2;
+      p.points.push([ring.center[0] + Math.cos(a) * ring.width, ring.center[1] + Math.sin(a) * ring.height, ring.center[2]]);
+    }
+    for (let r = 0; r < rings.length - 1; r++) for (let j = 0; j < sides; j++) {
+      const a = r * sides + j, b = r * sides + (j + 1) % sides, c = b + sides, d = a + sides;
+      const center = mix(mix(p.points[a], p.points[c], .5), mix(p.points[b], p.points[d], .5), .5);
+      // A shallow raised diamond gives each panel a real mountain fold.
+      const angle = (j + .5) / sides * Math.PI * 2;
+      center[0] += Math.cos(angle) * .009; center[1] += Math.sin(angle) * .009;
+      const m = p.points.push(center) - 1;
+      p.faces.push([a,b,m],[b,c,m],[c,d,m],[d,a,m]);
+    }
+    for (const end of [0, rings.length - 1]) {
+      const m = p.points.push(rings[end].center) - 1, start = end * sides;
+      for (let j = 0; j < sides; j++) p.faces.push([m,start+j,start+(j+1)%sides]);
+    }
+  }
+  foldedVolume('folded-body', butterfly ? [
+    { center:[0,.035,.44], width:.065, height:.065 },
+    { center:[0,.015,.21], width:.09, height:.09 },
+    { center:[0,.025,-.13], width:.07, height:.07 },
+    { center:[0,.065,-.63], width:.018, height:.025 },
+  ] : [
+    { center:[0,.035,.44], width:.065, height:.075 },
+    { center:[0,.015,.21], width:.245, height:.19 },
+    { center:[0,.025,-.13], width:.215, height:.18 },
+    { center:[0,.065,-.46], width:.07, height:.085 },
+  ]);
+  foldedVolume('folded-neck-and-beak', butterfly ? [
+    { center:[0,.06,.32], width:.065, height:.065 },
+    { center:[0,.07,.4], width:.075, height:.07 },
+    { center:[0,.08,.47], width:.085, height:.075 },
+    { center:[0,.075,.53], width:.065, height:.06 },
+    { center:[0,.06,.57], width:.04, height:.04 },
+    { center:[0,.055,.59], width:.015, height:.015 },
+  ] : [
+    { center:[0,.06,.32], width:.085, height:.075 },
+    { center:[0,.29,.43], width:.062, height:.052 },
+    { center:[0,.62,.56], width:.042, height:.047 },
+    { center:[0,.88,.69], width:.045, height:.055 },
+    { center:[0,.93,.79], width:.052, height:.044 },
+    { center:[0,.77,1.07], width:.002, height:.002 },
+  ]);
+
+  for (const direction of [-1,1] as const) {
+    const wing = part('pleated-wing', direction), root: Vertex = [.13,.025,-.02];
+    const contour: Vertex[] = butterfly
+      ? [[.28,.08,.48],[.83,.18,1.03],[1.48,.26,.86],[1.4,.19,.22],[.52,.07,-.07],[1.21,.18,-.47],[1.03,.14,-1.02],[.55,.08,-1.08],[.15,.035,-.48]]
+      : [[.32,.08,.4],[.8,.23,.31],[1.38,.5,.07],[1.77,.76,-.19],[1.59,.67,-.41],[1.34,.5,-.58],[1.02,.34,-.68],[.61,.17,-.68],[.18,.035,-.52]];
+    for (let i = 0; i < contour.length - 1; i++) {
+      const start = wing.points.length; wing.points.push(root);
+      for (const t of [.28,.62,1]) {
+        const left = mix(root, contour[i], t), right = mix(root, contour[i+1], t), ridge = mix(left, right, .5);
+        ridge[1] += Math.sin(t * Math.PI * .8) * (.034 + i * .003);
+        wing.points.push(left,ridge,right);
+      }
+      wing.faces.push([start,start+1,start+2],[start,start+2,start+3]);
+      for (let row = 0; row < 2; row++) {
+        const a=start+1+row*3,b=a+3;
+        wing.faces.push([a,b,b+1],[a,b+1,a+1],[a+1,b+1,b+2],[a+1,b+2,a+2]);
+      }
+    }
+    // Separate folded vanes overlap the fan along its trailing edge.
+    for (let i = 3; i < contour.length - 1; i++) {
+      const vane = part('layered-wing-fold', direction);
+      const a: Vertex = [.23+i*.014,.005,-.16-i*.022];
+      const tip = contour[i].map((v,j) => v + (j===1 ? -.035 : j===2 ? -.025 : .025)) as Vertex;
+      const b = mix(a,tip,.4), c = mix(a,tip,.72);
+      const width=.045+(7-i)*.005;
+      vane.points=[a,[b[0],b[1]-.013,b[2]+width],[b[0],b[1]+.019,b[2]],[b[0],b[1]-.013,b[2]-width],
+        [c[0],c[1]-.009,c[2]+width*.65],[c[0],c[1]+.024,c[2]],[c[0],c[1]-.009,c[2]-width*.65],tip];
+      vane.faces=[[0,1,2],[0,2,3],[1,4,5],[1,5,2],[2,5,6],[2,6,3],[4,7,5],[5,7,6]];
+    }
+    const edge = part('folded-wing-edge',direction);
+    contour.forEach(v=>edge.points.push(v,[v[0],v[1]-.014,v[2]+.008]));
+    for(let i=0;i<contour.length-1;i++)edge.faces.push([i*2,i*2+2,i*2+3],[i*2,i*2+3,i*2+1]);
+  }
+  for (const offset of [-1,0,1]) {
+    const tail = part('pointed-paper-tail');
+    const tip:Vertex=[offset*.14,offset===0?.72:.54,offset===0?-1.15:-.98];
+    tail.points=[[-.09,.055,-.3],[.09,.055,-.3],[offset*.04,.2,-.58],[offset*.05,.11,-.6],tip];
+    if (butterfly) {
+      const x = offset * .045, z = offset ? .53 : -.35;
+      tail.points=[[x-.009,.06,z],[x+.009,.06,z],
+        [offset*.15,.12,offset ? .82 : -.58],[offset*.15,.1,offset ? .82 : -.58],
+        [offset*.28,offset ? .16 : .065,offset ? 1.04 : -.78]];
+    }
+    tail.faces=[[0,2,4],[2,1,4],[0,3,2],[2,3,1],[0,4,3],[3,4,1]];
+  }
+  for(const p of parts) if(p.wing) p.points=p.points.map(([x,y,z])=>[x*p.wing,y,z]);
+  return parts;
+}
+
+/** Keep every vertex and face attached while the paper folds into its second form. */
+export function morphPaperPoint(from: Vertex, to: Vertex, amount: number, wing: number, name: string): Vertex {
+  if (amount <= 0) return [...from];
+  if (amount >= 1) return [...to];
+  // Shared coordinates determine the delay, so duplicated seam vertices never separate.
+  const reach = Math.min(1, Math.abs(from[0]) / 1.8);
+  const opening = wing ? paperEase(.18 + reach * .14, .32 + reach * .14, amount) : paperEase(.16, .43, amount);
+  const closing = wing ? paperEase(.58 + reach * .12, .73 + reach * .12, amount) : paperEase(.58, .87, amount);
+  const flat = opening * (1 - closing);
+  const delay = wing ? reach * .1 : name === 'folded-neck-and-beak' ? -.07 : .035;
+  const shape = .5 * paperEase(.13 + delay, .4 + delay, amount) + .5 * paperEase(.60 + delay, .86 + delay, amount);
+  const p = from.map((v, i) => v + (to[i] - v) * shape) as Vertex;
+
+  if (wing) {
+    p[1] = p[1] * (1 - flat * .95) + .025 * flat * .95;
+    // Release each hinge in turn; retain the outer fold until the inner paper has opened.
+    const tuck = paperEase(0, .16, amount);
+    const rootTuck = tuck * (1 - paperEase(.18, .31, amount));
+    const innerTuck = tuck * (1 - paperEase(.24, .39, amount));
+    const tipTuck = tuck * (1 - paperEase(.31, .46, amount));
+    const rootFold = paperEase(.58, .70, amount) * (1 - paperEase(.82, .94, amount));
+    const innerFold = paperEase(.64, .77, amount) * (1 - paperEase(.86, .98, amount));
+    const tipFold = paperEase(.71, .84, amount) * (1 - paperEase(.90, 1, amount));
+    let x = p[0] * wing, y = p[1];
+    const hinge = (pivot: number, angle: number) => {
+      if (x <= pivot) return;
+      angle *= paperEase(pivot, pivot + .12, x);
+      const dx = x - pivot, dy = y - .025;
+      x = pivot + dx * Math.cos(angle) - dy * Math.sin(angle);
+      y = .025 + dx * Math.sin(angle) + dy * Math.cos(angle);
+    };
+    hinge(1.02, -.95 * tipTuck - .75 * tipFold);
+    hinge(.46, .4 * innerTuck + .55 * innerFold);
+    const rootAngle = .35 * rootTuck + .38 * rootFold;
+    const dx = x - .13, dy = y - .025;
+    return [wing * (.13 + dx * Math.cos(rootAngle) - dy * Math.sin(rootAngle)),
+      .025 + dx * Math.sin(rootAngle) + dy * Math.cos(rootAngle), p[2]];
+  }
+
+  // Let the neck and tail open around their roots instead of shrinking in place.
+  const rootZ = name === 'folded-neck-and-beak' ? .32 : -.3;
+  const foldAngle = (name === 'folded-neck-and-beak' ? -.85 : name === 'pointed-paper-tail' ? .65 : 0) * flat;
+  const dy = p[1] - .035, dz = p[2] - rootZ;
+  p[1] = .035 + (dy * Math.cos(foldAngle) - dz * Math.sin(foldAngle)) * (1 - flat * .8);
+  p[2] = rootZ + dy * Math.sin(foldAngle) + dz * Math.cos(foldAngle);
+  if (name === 'folded-body') p[0] *= 1 + flat * .7;
+  return p;
+}