@linhey/rhine-design 0.6.0 → 0.8.0

package/components/orbitDonut.ts

@@ -0,0 +1,134 @@
+import { orbitCameraDistance, orbitFraming, projectOrbitPoint, rotateOrbitPoint, type OrbitVector as Vec3 } from './orbitProjection';
+
+type Vertex = { position: Vec3; normal: Vec3 };
+type Face = { points: Vertex[]; icing: boolean };
+type Stroke = { points: Vertex[]; color?: string; width: number };
+
+const TAU = Math.PI * 2;
+// Match the original ring's ~1.2 outer envelope and ~.46 opening in scene units.
+export const orbitDonutShape = { ringRadius: .84, tubeRadius: .34, icingThickness: .022 };
+const { ringRadius, tubeRadius, icingThickness } = orbitDonutShape;
+const sugarColors = ['#fff8e8', '#ffd44b', '#36735c', '#e54c77'];
+const glazeShades = [[210, 75, 116], [242, 126, 165], [255, 181, 208]];
+const doughShades = [[177, 96, 48], [224, 154, 83], [249, 197, 128]];
+
+function shade(light: number, icing: boolean) {
+  const ramp = icing ? glazeShades : doughShades, t = Math.max(0, Math.min(1.99, (light + .2) * 1.65));
+  const index = Math.floor(t), blend = t - index;
+  return `rgb(${ramp[index].map((channel, i) => Math.round(channel + (ramp[index + 1][i] - channel) * blend)).join(',')})`;
+}
+
+function surface(a: number, b: number, icing = false): Vertex {
+  const radius = tubeRadius + (icing ? icingThickness : 0);
+  return {
+    position: { x: (ringRadius + radius * Math.cos(b)) * Math.cos(a), y: (ringRadius + radius * Math.cos(b)) * Math.sin(a), z: radius * Math.sin(b) },
+    normal: { x: Math.cos(b) * Math.cos(a), y: Math.cos(b) * Math.sin(a), z: Math.sin(b) },
+  };
+}
+
+function icingEdge(a: number, inner = false) {
+  const drip = Math.pow((1 + Math.sin(a * (inner ? 7 : 11) + .8 * Math.sin(a * 3))) / 2, 5);
+  return inner ? Math.PI - .12 + drip * .4 : .18 - drip * .65;
+}
+
+/** A small painted torus; the Orbit lifecycle owns its clock, pause and cleanup. */
+export function createOrbitDonut() {
+  const faces: Face[] = [], details: Stroke[] = [];
+  const rings = 128;
+  for (const icing of [false, true]) {
+    const slices = icing ? 20 : 24;
+    const point = (i: number, j: number) => {
+      const a = i / rings * TAU;
+      const b = icing ? icingEdge(a) + (icingEdge(a, true) - icingEdge(a)) * j / slices : j / slices * TAU;
+      return surface(a, b, icing);
+    };
+    for (let i = 0; i < rings; i++) for (let j = 0; j < slices; j++) {
+      faces.push({ icing, points: [point(i, j), point(i + 1, j), point(i + 1, j + 1), point(i, j + 1)] });
+    }
+  }
+  for (const inner of [false, true]) for (let i = 0; i < rings; i++) {
+    const a = i / rings * TAU, next = (i + 1) / rings * TAU;
+    details.push({ points: [surface(a, icingEdge(a, inner), true), surface(next, icingEdge(next, inner), true)], width: 2.2 });
+  }
+  let seed = 57;
+  const random = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; };
+  // Decorations are attached to the icing, so they rotate with the dough rather than over it.
+  for (let i = 0; i < 72; i++) {
+    const a = (i + random() * .65) / 72 * TAU, b = .35 + random() * 2.35, angle = random() * TAU;
+    const da = Math.cos(angle) * .045, db = Math.sin(angle) * .12;
+    details.push({ points: [surface(a - da, b - db, true), surface(a + da, b + db, true)], color: sugarColors[i % sugarColors.length], width: 3.3 });
+  }
+  // Short, uneven glaze highlights give the pink surface a soft, hand-painted finish.
+  for (const start of [.1, 2.4, 4.2]) {
+    details.push({ points: Array.from({ length: 15 }, (_, i) => surface(start + i * .025, .95, true)), color: '#ffe0eb', width: 3.6 });
+  }
+
+  return (ctx: CanvasRenderingContext2D, width: number, height: number, time: number, ink: string) => {
+    ctx.clearRect(0, 0, width, height);
+    ctx.save();
+    ctx.globalAlpha = 1; ctx.lineWidth = 1; ctx.shadowBlur = 0; ctx.setLineDash([]); ctx.lineDashOffset = 0;
+    ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+    const { scale, centerX: cx, centerY: cy } = orbitFraming(width, height);
+    // Match the original orbit's camera: only the donut's local ring rotation advances.
+    const spin = time * .28 - .35, cos = Math.cos(spin), sin = Math.sin(spin);
+    const rotate = (p: Vec3) => rotateOrbitPoint({ x: p.x * cos - p.y * sin, y: p.x * sin + p.y * cos, z: p.z });
+    const project = (p: Vec3) => projectOrbitPoint(p, scale, cx, cy);
+    const facing = (p: Vec3, n: Vec3) => n.z * (orbitCameraDistance - p.z) - n.x * p.x - n.y * p.y;
+    const path = (points: Vec3[]) => {
+      ctx.beginPath();
+      points.forEach((p, i) => { const v = project(p); if (i) ctx.lineTo(v.x, v.y); else ctx.moveTo(v.x, v.y); });
+    };
+    // A crisp offset shadow belongs to the same chunky illustration language as the host.
+    ctx.beginPath();
+    for (let i = 0; i <= 64; i++) {
+      const a = i / 64 * TAU, x = cx + Math.cos(a) * scale * 1.03 + 9, y = cy + scale * 1.45 + Math.sin(a) * scale * .12;
+      if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y);
+    }
+    ctx.fillStyle = '#e5c8b9'; ctx.fill();
+
+    type Layer = { points: Vec3[]; depth: number; order: number; color: string; width?: number; outline?: boolean };
+    const layers: Layer[] = [];
+    for (const face of faces) {
+      const normals = face.points.map(p => rotate(p.normal));
+      const normal = normals.reduce((sum, n) => ({ x: sum.x + n.x / 4, y: sum.y + n.y / 4, z: sum.z + n.z / 4 }), { x: 0, y: 0, z: 0 });
+      const points = face.points.map(p => rotate(p.position));
+      const center = points.reduce((sum, p) => ({ x: sum.x + p.x / 4, y: sum.y + p.y / 4, z: sum.z + p.z / 4 }), { x: 0, y: 0, z: 0 });
+      if (facing(center, normal) <= 0) continue;
+      const light = -normal.x * .35 - normal.y * .45 + normal.z * .82;
+      layers.push({ points, depth: points.reduce((sum, p) => sum + p.z / 4, 0), order: face.icing ? 1 : 0, color: shade(light, face.icing) });
+    }
+    for (const detail of details) {
+      if (detail.points.some(p => facing(rotate(p.position), rotate(p.normal)) < .08)) continue;
+      const points = detail.points.map(p => rotate(p.position));
+      layers.push({ points, depth: points.reduce((sum, p) => sum + p.z / points.length, 0), order: 2,
+        color: detail.color ?? ink, width: detail.width, outline: !!detail.color && detail.color !== '#ffe0eb' });
+    }
+    // The visible tube contours include the inner hole; draw only their silhouette, not a mesh.
+    for (const inner of [false, true]) for (let i = 0; i < rings; i++) {
+      const contour = (a: number) => {
+        const radial = rotate({ x: Math.cos(a), y: Math.sin(a), z: 0 }), axis = rotate({ x: 0, y: 0, z: 1 });
+        const towardRing = orbitCameraDistance * radial.z - ringRadius, towardAxis = orbitCameraDistance * axis.z;
+        const phase = Math.atan2(towardRing, towardAxis), tangent = Math.asin(tubeRadius / Math.hypot(towardRing, towardAxis));
+        const b = (inner ? Math.PI - tangent : tangent) - phase;
+        const icing = b >= icingEdge(a) && b <= icingEdge(a, true);
+        return rotate(surface(a, b, icing).position);
+      };
+      const points = [contour(i / rings * TAU), contour((i + 1) / rings * TAU)];
+      layers.push({ points, depth: (points[0].z + points[1].z) / 2, order: 2, color: ink, width: 3 });
+    }
+    // The glaze is a coating, not intersecting geometry: paint its visible shell over the dough.
+    layers.sort((a, b) => a.order - b.order || a.depth - b.depth);
+    const strokeScale = Math.max(.7, Math.min(1.4, scale / 130));
+    for (const layer of layers) {
+      path(layer.points);
+      if (layer.width) {
+        if (layer.outline) { ctx.strokeStyle = ink; ctx.lineWidth = (layer.width + 1.7) * strokeScale; ctx.stroke(); }
+        ctx.strokeStyle = layer.color; ctx.lineWidth = layer.width * strokeScale; ctx.stroke();
+      } else {
+        ctx.closePath(); ctx.fillStyle = layer.color; ctx.fill();
+        ctx.strokeStyle = layer.color; ctx.lineWidth = .65; ctx.stroke();
+      }
+    }
+    ctx.restore();
+  };
+}

package/components/orbitDonutThree.ts

@@ -0,0 +1,208 @@
+import {
+  BackSide, DoubleSide, BufferGeometry, CapsuleGeometry, CanvasTexture, Color, DirectionalLight,
+  Float32BufferAttribute, Group, HemisphereLight, InstancedMesh, Material, Mesh,
+  MeshBasicMaterial, MeshPhysicalMaterial, MeshStandardMaterial, Object3D, PerspectiveCamera,
+  PlaneGeometry, Points, Scene, ShaderMaterial, SphereGeometry, SRGBColorSpace, Vector3, WebGLRenderer,
+} from 'three';
+
+import { orbitCameraDistance, orbitFraming, rotateOrbitPoint } from './orbitProjection';
+import { orbitDonutShape } from './orbitDonut';
+
+export interface DonutArtwork {
+  canvas: HTMLCanvasElement;
+  draw(width: number, height: number, time: number): boolean;
+  dispose(): void;
+}
+
+const TAU = Math.PI * 2;
+const { ringRadius, tubeRadius, icingThickness } = orbitDonutShape;
+const icingRadius = tubeRadius + icingThickness;
+const sugarColors = ['#fff7de', '#ffd348', '#659f83', '#df3e76', '#bb9cdb'];
+const ink = '#37212b';
+
+/** This painter has no clock of its own: Orbit owns pause, visibility and reduced motion. */
+export function createDonutArtwork(invalidate: () => void): DonutArtwork {
+  const geometries = new Set<BufferGeometry>(), materials = new Set<Material>(), textures = new Set<CanvasTexture>(), instances = new Set<InstancedMesh>();
+  const geometry = <T extends BufferGeometry>(value: T) => { geometries.add(value); return value; };
+  const material = <T extends Material>(value: T) => { materials.add(value); return value; };
+  let renderer: WebGLRenderer | undefined, disposed = false, lost = false;
+  const canvas = document.createElement('canvas');
+  canvas.className = 'rhine-orbit-canvas rhine-orbit-donut-webgl';
+  canvas.setAttribute('aria-hidden', 'true');
+  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;
+    const scene = new Scene();
+    const camera = new PerspectiveCamera(36, 1, .1, 50);
+    scene.add(new HemisphereLight('#fff5ec', '#9d5b77', 2.5));
+    const key = new DirectionalLight('#fff8eb', 3.2); key.position.set(-3, 5, 6); scene.add(key);
+    const rim = new DirectionalLight('#ffd2e5', 2.1); rim.position.set(4, 1, -2); scene.add(rim);
+    const fill = new DirectionalLight('#ffffff', .8); fill.position.set(0, -3, 4); scene.add(fill);
+    const frame = new Group(); frame.name = 'orbit-camera-frame'; frame.matrixAutoUpdate = false;
+    const basis = (x: number, y: number, z: number) => { const p = rotateOrbitPoint({ x, y, z }); return new Vector3(p.x, -p.y, p.z); };
+    frame.matrix.makeBasis(basis(1, 0, 0), basis(0, 1, 0), basis(0, 0, 1)); scene.add(frame);
+    const donut = new Group(); donut.name = 'strawberry-donut'; frame.add(donut);
+    let seed = 57183;
+    const random = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; };
+    const edge = (a: number, inner = false) => {
+      const drip = Math.pow((1 + Math.sin(a * (inner ? 7 : 11) + .8 * Math.sin(a * 3))) / 2, 4);
+      return inner ? Math.PI - .12 + drip * .35 : .16 - drip * .62;
+    };
+    const point = (a: number, b: number, radius: number) => {
+      const handmade = .009 * Math.sin(a * 9 + b * 3) + .005 * Math.sin(a * 17 - b * 7);
+      const tube = radius + handmade;
+      return new Vector3((ringRadius + tube * Math.cos(b)) * Math.cos(a), (ringRadius + tube * Math.cos(b)) * Math.sin(a), tube * Math.sin(b));
+    };
+    function surface(icing: boolean) {
+      const positions: number[] = [], uvs: number[] = [], indices: number[] = [];
+      const rings = 192, slices = icing ? 56 : 64;
+      for (let i = 0; i <= rings; i++) for (let j = 0; j <= slices; j++) {
+        const a = i / rings * TAU;
+        const b = icing ? edge(a) + (edge(a, true) - edge(a)) * j / slices : j / slices * TAU;
+        positions.push(...point(a, b, icing ? icingRadius : tubeRadius).toArray()); uvs.push(i / rings, b / TAU);
+        if (i < rings && j < slices) {
+          const k = i * (slices + 1) + j;
+          indices.push(k, k + slices + 1, k + 1, k + 1, k + slices + 1, k + slices + 2);
+        }
+      }
+      const value = geometry(new BufferGeometry());
+      value.setAttribute('position', new Float32BufferAttribute(positions, 3));
+      value.setAttribute('uv', new Float32BufferAttribute(uvs, 2)); value.setIndex(indices); value.computeVertexNormals();
+      return value;
+    }
+    // A baked grain map adds pores and a pale frying belt without downloading any texture.
+    const grainCanvas = document.createElement('canvas'); grainCanvas.width = 512; grainCanvas.height = 256;
+    const paint = grainCanvas.getContext('2d');
+    if (!paint) throw new Error('Donut grain texture unavailable');
+    const roast = paint.createLinearGradient(0, 0, 0, 256);
+    roast.addColorStop(0, '#e6b777'); roast.addColorStop(.16, '#cd863f'); roast.addColorStop(.4, '#e2a35e');
+    roast.addColorStop(.5, '#edbd80'); roast.addColorStop(.65, '#c47a37'); roast.addColorStop(1, '#e6b777');
+    paint.fillStyle = roast; paint.fillRect(0, 0, 512, 256);
+    for (let i = 0; i < 6500; i++) {
+      paint.fillStyle = i % 3 ? 'rgba(115,54,18,.13)' : 'rgba(255,235,181,.22)';
+      paint.beginPath(); paint.ellipse(random() * 512, random() * 256, .2 + random(), .2 + random() * .7, random() * TAU, 0, TAU); paint.fill();
+    }
+    const grain = new CanvasTexture(grainCanvas); grain.colorSpace = SRGBColorSpace; textures.add(grain);
+    const doughGeometry = surface(false), icingGeometry = surface(true);
+    const outline = material(new MeshBasicMaterial({ color: ink, side: BackSide }));
+    const doughOutline = new Mesh(doughGeometry, outline); doughOutline.scale.setScalar(1.018); donut.add(doughOutline);
+    const dough = new Mesh(doughGeometry, material(new MeshStandardMaterial({ map: grain, bumpMap: grain, bumpScale: .018, roughness: .88 })));
+    dough.name = 'baked-dough'; donut.add(dough);
+    const glaze = new Mesh(icingGeometry, material(new MeshPhysicalMaterial({
+      color: '#ee83ad', roughness: .28, metalness: 0, clearcoat: 1, clearcoatRoughness: .22,
+      sheen: .55, sheenColor: new Color('#ffc2d8'), sheenRoughness: .55,
+    })));
+    glaze.name = 'strawberry-icing'; donut.add(glaze);
+    // Give both uneven icing edges real thickness, including the inner hole.
+    for (const inner of [false, true]) {
+      const positions: number[] = [], indices: number[] = [];
+      for (let i = 0; i <= 192; i++) {
+        const a = i / 192 * TAU, b = edge(a, inner);
+        positions.push(...point(a, b, icingRadius + .001).toArray(), ...point(a, b, tubeRadius + .004).toArray());
+        if (i < 192) { const k = i * 2; indices.push(k, k + 1, k + 2, k + 1, k + 3, k + 2); }
+      }
+      const lip = geometry(new BufferGeometry()); lip.setAttribute('position', new Float32BufferAttribute(positions, 3)); lip.setIndex(indices); lip.computeVertexNormals();
+      donut.add(new Mesh(lip, material(new MeshStandardMaterial({ color: '#c75282', roughness: .4, side: DoubleSide }))));
+    }
+    const capsule = geometry(new CapsuleGeometry(.018, .076, 4, 6));
+    const sprinkleMaterial = material(new MeshPhysicalMaterial({ roughness: .38, clearcoat: .65 }));
+    const sprinkles = new InstancedMesh(capsule, sprinkleMaterial, 280); sprinkles.name = 'icing-sprinkles';
+    const sugarOutline = new InstancedMesh(capsule, outline, 280); instances.add(sprinkles); instances.add(sugarOutline);
+    const dummy = new Object3D(), up = new Vector3(0, 1, 0), color = new Color();
+    for (let i = 0; i < 280; i++) {
+      const a = random() * TAU, b = .32 + random() * (Math.PI - .64), angle = random() * TAU;
+      const tangent = new Vector3(-Math.sin(a), Math.cos(a), 0).multiplyScalar(Math.cos(angle))
+        .add(new Vector3(-Math.sin(b) * Math.cos(a), -Math.sin(b) * Math.sin(a), Math.cos(b)).multiplyScalar(Math.sin(angle))).normalize();
+      dummy.position.copy(point(a, b, icingRadius + .025)); dummy.quaternion.setFromUnitVectors(up, tangent);
+      dummy.scale.set(1, .7 + random() * .7, 1); dummy.updateMatrix(); sprinkles.setMatrixAt(i, dummy.matrix);
+      sprinkles.setColorAt(i, color.set(sugarColors[i % sugarColors.length]));
+      dummy.scale.multiplyScalar(1.17); dummy.updateMatrix(); sugarOutline.setMatrixAt(i, dummy.matrix);
+    }
+    donut.add(sugarOutline, sprinkles);
+    const pearls = new InstancedMesh(geometry(new SphereGeometry(.015, 8, 6)), material(new MeshStandardMaterial({ color: '#fff7dc', roughness: .28 })), 110);
+    pearls.name = 'sugar-pearls'; instances.add(pearls);
+    for (let i = 0; i < 110; i++) {
+      dummy.position.copy(point(random() * TAU, .25 + random() * (Math.PI - .5), icingRadius + .018));
+      dummy.rotation.set(0, 0, 0); dummy.scale.setScalar(.7 + random() * .7); dummy.updateMatrix(); pearls.setMatrixAt(i, dummy.matrix);
+    }
+    donut.add(pearls);
+
+    const floating = new InstancedMesh(capsule, sprinkleMaterial, 100); floating.name = 'floating-confetti'; floating.frustumCulled = false; instances.add(floating); scene.add(floating);
+    const confetti = Array.from({ length: 100 }, (_, i) => {
+      floating.setColorAt(i, color.set(sugarColors[i % sugarColors.length]));
+      return { phase: i / 100 * TAU, radius: 1.68 + random() * .7, speed: .08 + random() * .09, depth: random() * 1.8 - .9, tilt: random() * TAU, scale: .5 + random() * .85 };
+    });
+    // Positions are real coordinates; include the shader's small wobble in the CPU bound.
+    const dustPositions: number[] = [], dustColors: number[] = [], phases: number[] = [], sizes: number[] = [];
+    for (let i = 0; i < 460; i++) {
+      const a = random() * TAU, r = 1.55 + random() * 1.15;
+      dustPositions.push(Math.cos(a) * r, Math.sin(a) * r * .72 + .1, random() * 2.4 - 1.2);
+      dustColors.push(...color.set(sugarColors[i % sugarColors.length]).toArray()); phases.push(random() * TAU); sizes.push(i % 9 ? 1.2 + random() * 1.5 : 3.8);
+    }
+    const dustGeometry = geometry(new BufferGeometry());
+    dustGeometry.setAttribute('position', new Float32BufferAttribute(dustPositions, 3));
+    dustGeometry.setAttribute('color', new Float32BufferAttribute(dustColors, 3));
+    dustGeometry.setAttribute('phase', new Float32BufferAttribute(phases, 1)); dustGeometry.setAttribute('size', new Float32BufferAttribute(sizes, 1));
+    dustGeometry.computeBoundingSphere(); dustGeometry.boundingSphere!.radius += .3;
+    const dustMaterial = material(new ShaderMaterial({
+      transparent: true, depthWrite: false, vertexColors: true, uniforms: { time: { value: 0 }, pixelRatio: { value: 1 } },
+      vertexShader: `attribute float phase; attribute float size; uniform float time; uniform float pixelRatio; varying vec3 tint; varying float sparkle;
+        void main(){vec3 p=position; p.x+=sin(time*.35+phase)*.09; p.y+=cos(time*.45+phase)*.12;
+          vec4 mv=modelViewMatrix*vec4(p,1.); gl_Position=projectionMatrix*mv; gl_PointSize=size*pixelRatio*(3.6/-mv.z);
+          tint=color; sparkle=.4+.35*sin(time*.7+phase);}`,
+      fragmentShader: `varying vec3 tint; varying float sparkle; void main(){vec2 p=abs(gl_PointCoord-.5)*2.;
+        float round=1.-smoothstep(.1,1.,length(p)); float cross=exp(-min(p.x,p.y)*12.)*(1.-max(p.x,p.y));
+        gl_FragColor=vec4(tint,max(round*.4,cross)*sparkle);}`,
+    }));
+    const dust = new Points(dustGeometry, dustMaterial); dust.name = 'sugar-dust'; scene.add(dust);
+    const shadow = new Mesh(geometry(new PlaneGeometry(3.8, .7)), material(new ShaderMaterial({
+      transparent: true, depthWrite: false, uniforms: { opacity: { value: .2 } },
+      vertexShader: 'varying vec2 vUv; void main(){vUv=uv; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);}',
+      fragmentShader: 'varying vec2 vUv; uniform float opacity; void main(){float r=length((vUv-.5)*2.);gl_FragColor=vec4(.46,.24,.24,(1.-smoothstep(.1,1.,r))*opacity);}',
+    })));
+    shadow.position.set(.12, -1.45, -1.1); scene.add(shadow);
+    let bitmapWidth = 0, bitmapHeight = 0, ratio = 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 dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+        if (width !== bitmapWidth || height !== bitmapHeight || ratio !== dpr) {
+          renderer!.setPixelRatio(dpr); renderer!.setSize(width, height, false);
+          const { scale, centerX, centerY } = orbitFraming(width, height);
+          camera.aspect = width / height; camera.position.set(0, 0, orbitCameraDistance); camera.lookAt(0, 0, 0);
+          camera.fov = 2 * Math.atan(height / (2 * scale * orbitCameraDistance * 1.08)) * 180 / Math.PI;
+          camera.updateProjectionMatrix();
+          camera.projectionMatrix.elements[0] /= 1.08;
+          camera.projectionMatrix.elements[8] = 1 - 2 * centerX / width;
+          camera.projectionMatrix.elements[9] = 2 * centerY / height - 1;
+          camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+          dustMaterial.uniforms.pixelRatio.value = dpr; bitmapWidth = width; bitmapHeight = height; ratio = dpr;
+        }
+        donut.rotation.set(0, 0, time * .28 - .35);
+        for (let i = 0; i < confetti.length; i++) {
+          const p = confetti[i], a = p.phase + time * p.speed;
+          dummy.position.set(Math.cos(a) * p.radius, Math.sin(a) * p.radius * .68 + .12 + Math.sin(time * .6 + p.phase) * .08, p.depth + Math.sin(a) * .25);
+          dummy.rotation.set(p.tilt + time * .3, a, p.tilt - time * .4); dummy.scale.setScalar(p.scale); dummy.updateMatrix(); floating.setMatrixAt(i, dummy.matrix);
+        }
+        floating.instanceMatrix.needsUpdate = true;
+        dustMaterial.uniforms.time.value = time;
+        renderer!.render(scene, camera);
+        return true;
+      },
+      dispose,
+    };
+  } catch (error) { dispose(); throw error; }
+}

package/components/orbitObjectMaterials.ts

@@ -0,0 +1,76 @@
+import { CanvasTexture, EquirectangularReflectionMapping, MeshPhysicalMaterial, SRGBColorSpace } from 'three';
+
+function surface(width: number, height: number) {
+  const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height;
+  const context = canvas.getContext('2d');
+  if (!context) throw new Error('Object texture canvas unavailable');
+  return { canvas, context };
+}
+
+/** Local studio lighting keeps paper folds and polished mineral faces legible. */
+export function studioEnvironment() {
+  const { canvas, context: c } = surface(1024, 512);
+  const room = c.createLinearGradient(0, 0, 0, 512);
+  room.addColorStop(0, '#aabcb4'); room.addColorStop(.45, '#263c38'); room.addColorStop(.52, '#111c1a'); room.addColorStop(1, '#697c70');
+  c.fillStyle = room; c.fillRect(0, 0, 1024, 512);
+  for (const [x, y, width, height, tint] of [[130, 65, 105, 300, '#f7fff8'], [670, 110, 35, 260, '#dcebee'], [830, 145, 80, 130, '#cdb68e']] as const) {
+    c.shadowColor = tint; c.shadowBlur = 32; c.fillStyle = tint; c.fillRect(x, y, width, height);
+  }
+  const texture = new CanvasTexture(canvas); texture.colorSpace = SRGBColorSpace;
+  texture.mapping = EquirectangularReflectionMapping;
+  return texture;
+}
+
+export function paperTexture() {
+  const { canvas, context: c } = surface(512, 512);
+  c.fillStyle = '#f7f4e8'; c.fillRect(0, 0, 512, 512);
+  let seed = 7619;
+  const random = () => { seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0; return seed / 4294967296; };
+  for (let i = 0; i < 24000; i++) {
+    c.fillStyle = i % 3 ? 'rgba(97,111,85,.035)' : 'rgba(255,255,255,.22)';
+    c.fillRect(random() * 512, random() * 512, .3 + random() * 1.5, .2 + random() * .5);
+  }
+  const texture = new CanvasTexture(canvas); texture.colorSpace = SRGBColorSpace;
+  return texture;
+}
+
+/** Surface mineral grain, branching fissures and thin internal amber light share local coordinates. */
+export function mineralMaterial() {
+  const value = new MeshPhysicalMaterial({ color: '#263330', metalness: .62, roughness: .24, clearcoat: 1, clearcoatRoughness: .16, envMapIntensity: 1.3 });
+  value.onBeforeCompile = shader => {
+    shader.vertexShader = 'varying vec3 vMineral;\n' + shader.vertexShader;
+    shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>', '#include <begin_vertex>\nvMineral = position;');
+    shader.fragmentShader = `varying vec3 vMineral;
+      float hashStone(vec3 p) { return fract(sin(dot(p,vec3(127.1,311.7,74.7)))*43758.5453); }
+      float grainStone(vec3 p) {
+        vec3 i=floor(p),f=fract(p); f=f*f*(3.-2.*f);
+        return mix(mix(mix(hashStone(i),hashStone(i+vec3(1,0,0)),f.x),mix(hashStone(i+vec3(0,1,0)),hashStone(i+vec3(1,1,0)),f.x),f.y),
+          mix(mix(hashStone(i+vec3(0,0,1)),hashStone(i+vec3(1,0,1)),f.x),mix(hashStone(i+vec3(0,1,1)),hashStone(i+vec3(1,1,1)),f.x),f.y),f.z);
+      }
+      float stoneEdge(vec2 p) {
+        vec2 cell=floor(p),f=fract(p); float a=10.,b=10.;
+        for(int y=-1;y<=1;y++) for(int x=-1;x<=1;x++) {
+          vec2 o=vec2(float(x),float(y));
+          vec2 jitter=vec2(hashStone(vec3(cell+o,1.)),hashStone(vec3(cell+o,2.)));
+          float d=length(o+jitter-f); if(d<a){b=a;a=d;}else if(d<b){b=d;}
+        }
+        return b-a;
+      }
+    ` + shader.fragmentShader;
+    shader.fragmentShader = shader.fragmentShader.replace('#include <color_fragment>', `#include <color_fragment>
+      float mineralGrain=grainStone(vMineral*34.)*.55+grainStone(vMineral*110.)*.45;
+      float mineralLayer=grainStone(vMineral*3.8);
+      vec2 fissureUV=vec2(vMineral.x+vMineral.z*.71,vMineral.y*.76);
+      float fissure=stoneEdge(fissureUV*5.5+mineralLayer*.35);
+      float fissureMask=smoothstep(.36,.7,grainStone(vMineral*2.2+4.));
+      float vein=(1.-smoothstep(.009,.032,fissure))*fissureMask;
+      float veinHalo=(1.-smoothstep(.025,.15,fissure))*fissureMask;
+      diffuseColor.rgb*=.58+mineralGrain*.54+mineralLayer*.22;
+      diffuseColor.rgb=mix(diffuseColor.rgb,vec3(.15,.075,.025),veinHalo*.6);
+    `);
+    shader.fragmentShader = shader.fragmentShader.replace('#include <roughnessmap_fragment>', '#include <roughnessmap_fragment>\nroughnessFactor=clamp(roughnessFactor+(mineralGrain-.5)*.24,.12,.5);');
+    shader.fragmentShader = shader.fragmentShader.replace('#include <emissivemap_fragment>', '#include <emissivemap_fragment>\ntotalEmissiveRadiance+=vec3(1.,.32,.055)*(vein*2.3+veinHalo*.12);');
+  };
+  value.customProgramCacheKey = () => 'rhine-mineral-v1';
+  return value;
+}

package/components/orbitObjects.ts

@@ -0,0 +1,71 @@
+import { morphPaperPoint, paperBirdFolds } from './orbitBirdGeometry';
+import { paperBirdFlight, paperMorphAmount, rotatePaperPoint } from './orbitBirdFlight';
+
+const birdFolds = paperBirdFolds();
+const butterflyFolds = paperBirdFolds('butterfly');
+type Kind = 'paper' | 'technical';
+type Point = { x: number; y: number; depth: number };
+
+/** A lightweight object illustration remains available without WebGL. */
+export function drawOrbitObject(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, kind: Kind) {
+  const bird = kind === 'paper', scale = Math.min(width * (bird ? .175 : .28), Math.max(1, height - 76) * (bird ? .285 : .3));
+  const angle = bird ? Math.sin(time * .23) * .18 - .65 : time * .11 - .32, roll = bird ? -.12 : .08, tilt = bird ? .53 : .13;
+  const point = (x: number, y: number, z = 0): Point => {
+    const xx = x * Math.cos(angle) + z * Math.sin(angle), zz = -x * Math.sin(angle) + z * Math.cos(angle);
+    const yy = y * Math.cos(tilt) - zz * Math.sin(tilt), depth = y * Math.sin(tilt) + zz * Math.cos(tilt);
+    const p = 6 / (6 - depth);
+    return { x: width * .54 + (xx * Math.cos(roll) - yy * Math.sin(roll)) * scale * p, y: height / 2 - 18 - (xx * Math.sin(roll) + yy * Math.cos(roll)) * scale * p, depth };
+  };
+  const path = (points: Point[], fill: string | null, stroke: string | null, lineWidth = 1) => {
+    ctx.beginPath(); points.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
+    if (fill) { ctx.closePath(); ctx.fillStyle = fill; ctx.fill(); }
+    if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = lineWidth; ctx.stroke(); }
+  };
+  const dot = (p: Point, radius: number, fill: string) => { ctx.beginPath(); ctx.arc(p.x, p.y, radius, 0, Math.PI * 2); ctx.fillStyle = fill; ctx.fill(); };
+  ctx.clearRect(0, 0, width, height); ctx.globalAlpha = 1; ctx.shadowBlur = 0; ctx.setLineDash([]);
+  ctx.lineWidth = 1; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineDashOffset = 0;
+  if (bird) {
+    const flight = paperBirdFlight(time);
+    const projectBird = (x: number, y: number, z: number): Point => {
+      const local = rotatePaperPoint(x, y, z, flight.pitch, flight.yaw, flight.bank);
+      const [px, py, depth] = rotatePaperPoint(local[0] + flight.x, local[1] + flight.y, local[2] + flight.z, .53, -.65, -.12);
+      const perspective = 6 / (6 - depth);
+      return { x: width * .54 + px * scale * perspective, y: height / 2 - 18 - py * scale * perspective, depth };
+    };
+    const faces: {points:Point[];shade:string;depth:number}[]=[];
+    const folded = (vertices:number[][], triangles:number[][]) => triangles.forEach((indices,i)=>{
+      const points=indices.map(j=>projectBird(vertices[j][0],vertices[j][1],vertices[j][2]));
+      faces.push({points,shade:['#f5f2e4','#d8e0d0','#fdfaf0','#bcccb9'][i%4],depth:points.reduce((n,p)=>n+p.depth,0)/points.length});
+    });
+    const amount = paperMorphAmount(time);
+    for (const [index, fold] of birdFolds.entries()) {
+      const a = fold.wing * flight.wing;
+      folded(fold.points.map((p, i) => {
+        const [x,y,z] = morphPaperPoint(p, butterflyFolds[index].points[i], amount, fold.wing, fold.name);
+        return [x*Math.cos(a)-y*Math.sin(a),x*Math.sin(a)+y*Math.cos(a),z];
+      }),fold.faces);
+    }
+    faces.sort((a,b)=>a.depth-b.depth).forEach(face=>path([...face.points,face.points[0]],face.shade,'#8a9b8138',.55));
+  } else {
+    const shards = [{ x: 0, y: .04, z: 0, s: .88 }, { x: -.48, y: -.38, z: .12, s: .56 }, { x: .47, y: -.35, z: .13, s: .64 }, { x: -.18, y: -.58, z: -.42, s: .48 }, { x: .18, y: -.65, z: .48, s: .42 }];
+    const faces: { points: Point[]; shade: string; depth: number }[] = [];
+    shards.forEach((shard, n) => {
+      const p = (a: number, y: number, r: number) => point(shard.x + Math.cos(a) * r * shard.s, shard.y + y * shard.s, shard.z + Math.sin(a) * r * shard.s);
+      for (let i = 0; i < 6; i++) {
+        const a = (i / 6 + n * .13) * Math.PI * 2, b = a + Math.PI / 3;
+        const base = [p(a, -.8, .27), p(a, .65, .37), p(b, .65, .37), p(b, -.8, .27)];
+        const tip = [p(a, .65, .37), p(0, 1.5, 0), p(b, .65, .37)];
+        for (const points of [base, tip]) faces.push({ points, shade: ['#223532', '#344a43', '#1d292a'][i % 3], depth: points.reduce((sum, v) => sum + v.depth, 0) / points.length });
+      }
+    });
+    faces.sort((a, b) => a.depth - b.depth).forEach(face => path([...face.points, face.points[0]], face.shade, '#9b804f', .8));
+    for (let i = 0; i < 9; i++) {
+      const x = (i % 3 - 1) * .22, y = -.85 + Math.floor(i / 3) * .5;
+      path([point(x, y, .38), point(x + .06, y + .22, .38), point(x + .02, y + .32, .38)], null, '#edb355', 1.5);
+    }
+  }
+  for (let i = 0; i < 84; i++) {
+    const a = i * 2.399 + time * .04, radius = .9 + i % 11 * .1;
+    dot(point(Math.cos(a) * radius, Math.sin(a * 1.7) * 1.4, Math.sin(a) * .7), .5 + i % 4 * .35, bird ? '#b8a07180' : '#e9b258a0');
+  }
+}