Koi pond

'use client';

// <KoiPond3D>: a garden pond seen from above. Five koi swim slow loops under the surface, their
// bodies bending side to side as they go. Lily pads bob, one with a pink lotus, rings spread
// where something touched the water, reeds sway and a dragonfly hovers and darts. three.js.

import * as THREE from 'three';
import { ThreeFrame, seeded, type SceneSetup, type ThreeSceneProps } from './three-frame';

export const koiPondTheme = {
  grass: '#7cbf6a',
  shore: '#d9c9a3',
  pondFloor: '#2c5e63',
  water: '#4fa3a8',
  koi: '#f2763a',
  koiWhite: '#fbf6ee',
  koiGold: '#f5c04a',
  lilyPad: '#5aa65a',
  lotus: '#f4a3c0',
  rock: '#9aa1a6',
  reed: '#5f8f3e',
  bush: '#4f9a52',
  dragonfly: '#3d7fd1',
};
export type KoiPondTheme = typeof koiPondTheme;

const WATER_Y = -0.08;
const DEPTH = 0.75;

/** The pond's irregular outline: its radius at angle a. */
const pondRadius = (a: number) => 3.2 + 0.35 * Math.sin(3 * a + 0.4) + 0.22 * Math.cos(5 * a + 1);

const smoothstep = (a: number, b: number, x: number) => {
  const t = Math.min(1, Math.max(0, (x - a) / (b - a)));
  return t * t * (3 - 2 * t);
};

/** How the koi bends: its body swings side to side, more toward the tail. Fish-local x runs tail → head. */
const bend = (x: number, t: number, phase: number) => 0.11 * Math.sin(t * 5 + phase - x * 4) * ((0.55 - x) / 1.1) ** 2;

type Koi = {
  group: THREE.Group;
  parts: { geo: THREE.BufferGeometry; base: Float32Array }[];
  body: THREE.BufferGeometry;
  /** Per body vertex: 0 white, 1 orange, 2 gold. */
  mask: Uint8Array;
  path: (t: number) => [number, number];
  y: number;
  phase: number;
};

const setup: SceneSetup<KoiPondTheme> = ({ scene, camera, theme }) => {
  const rand = seeded(41);

  const flat = (color: string, extra: THREE.MeshStandardMaterialParameters = {}) =>
    new THREE.MeshStandardMaterial({ color, flatShading: true, roughness: 0.9, ...extra });
  const mats = {
    ground: new THREE.MeshStandardMaterial({ vertexColors: true, flatShading: true, roughness: 1 }),
    water: new THREE.MeshStandardMaterial({ color: theme.water, transparent: true, opacity: 0.32, roughness: 0.15, metalness: 0.1, depthWrite: false }),
    koi: new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.5 }),
    fin: new THREE.MeshStandardMaterial({ color: theme.koiWhite, transparent: true, opacity: 0.75, side: THREE.DoubleSide, roughness: 0.6 }),
    eye: new THREE.MeshBasicMaterial({ color: '#1d1d22' }),
    pad: flat(theme.lilyPad, { side: THREE.DoubleSide }),
    lotus: flat(theme.lotus, { side: THREE.DoubleSide }),
    lotusCore: flat('#f6d55c'),
    rock: flat(theme.rock),
    reed: flat(theme.reed),
    bush: flat(theme.bush),
    flower: flat('#ffffff'),
    cattail: flat('#7a5236'),
    dragonfly: flat(theme.dragonfly, { roughness: 0.4 }),
    wing: new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.55, side: THREE.DoubleSide, depthWrite: false }),
  };

  const hemi = new THREE.HemisphereLight('#e8f4ff', theme.grass, 1.1);
  const sun = new THREE.DirectionalLight('#fff4e0', 1.6);
  sun.position.set(4, 8, 3);
  scene.add(hemi, sun);

  // Ground: rings that follow the pond's outline, from the deep middle out across the lawn, so
  // the shore is a clean low-poly curve. Each band of faces takes one colour: pond floor, a
  // sandy shore, then grass.
  const RINGS = [0, 0.35, 0.6, 0.78, 0.9, 0.97, 1.03, 1.08, 1.2, 1.6, 2.6, 5];
  const SEGMENTS = 72;
  const ringPoint = (j: number, k: number): [number, number, number] => {
    const a = (k / SEGMENTS) * Math.PI * 2;
    const d = RINGS[j];
    const r = d * pondRadius(a);
    const y = d < 1.03 ? -DEPTH * (1 - smoothstep(0.5, 1.03, d)) : 0;
    return [Math.cos(a) * r, y, Math.sin(a) * r];
  };
  const positions: number[] = [];
  const bands: number[] = [];
  for (let j = 0; j < RINGS.length - 1; j++) {
    for (let k = 0; k < SEGMENTS; k++) {
      const a = ringPoint(j, k);
      const b = ringPoint(j, k + 1);
      const c = ringPoint(j + 1, k);
      const d = ringPoint(j + 1, k + 1);
      positions.push(...a, ...b, ...d, ...a, ...d, ...c);
      bands.push(j, j);
    }
  }
  const groundGeo = new THREE.BufferGeometry();
  groundGeo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
  groundGeo.setAttribute('color', new THREE.Float32BufferAttribute(new Float32Array(positions.length), 3));
  const paintGround = (th: KoiPondTheme) => {
    const grass = new THREE.Color(th.grass);
    const shore = new THREE.Color(th.shore);
    const floor = new THREE.Color(th.pondFloor);
    const c = new THREE.Color();
    const colors = groundGeo.attributes.color as THREE.BufferAttribute;
    bands.forEach((j, f) => {
      const d = (RINGS[j] + RINGS[j + 1]) / 2;
      if (d > 1.07) c.copy(grass);
      else if (d > 0.93) c.copy(shore);
      else c.copy(floor).lerp(shore, smoothstep(0.3, 0.93, d) * 0.45);
      for (let k = 0; k < 3; k++) colors.setXYZ(f * 3 + k, c.r, c.g, c.b);
    });
    colors.needsUpdate = true;
  };
  paintGround(theme);
  groundGeo.computeVertexNormals();
  scene.add(new THREE.Mesh(groundGeo, mats.ground));

  // Water: a flat, see-through sheet. The lawn rises above it outside the pond and hides it.
  const water = new THREE.Mesh(new THREE.PlaneGeometry(30, 30), mats.water);
  water.rotation.x = -Math.PI / 2;
  water.position.y = WATER_Y;
  water.renderOrder = 1;
  scene.add(water);

  // Rocks around the shore, fewer at the front so the pond stays open to the camera.
  for (let i = 0; i < 26; i++) {
    const a = rand() * Math.PI * 2;
    if (Math.sin(a) > 0.6 && rand() > 0.3) continue;
    const r = pondRadius(a) * (1.02 + rand() * 0.08);
    const rock = new THREE.Mesh(new THREE.DodecahedronGeometry(0.16 + rand() * 0.18, 0), mats.rock);
    rock.position.set(Math.cos(a) * r, 0.02, Math.sin(a) * r);
    rock.rotation.set(rand() * 3, rand() * 3, rand() * 3);
    rock.scale.y = 0.6;
    scene.add(rock);
  }

  // Low bushes and little white flowers dotted over the lawn.
  for (let i = 0; i < 9; i++) {
    const a = rand() * Math.PI * 2;
    const r = pondRadius(a) * (1.35 + rand() * 0.5);
    const bush = new THREE.Group();
    for (let k = 0; k < 3; k++) {
      const puff = new THREE.Mesh(new THREE.IcosahedronGeometry(0.22 + rand() * 0.12, 0), mats.bush);
      puff.position.set((rand() - 0.5) * 0.4, 0.12 + rand() * 0.08, (rand() - 0.5) * 0.4);
      bush.add(puff);
    }
    bush.position.set(Math.cos(a) * r, 0, Math.sin(a) * r);
    scene.add(bush);
  }
  const flowerGeo = new THREE.IcosahedronGeometry(0.04, 0);
  for (let i = 0; i < 40; i++) {
    const a = rand() * Math.PI * 2;
    const r = pondRadius(a) * (1.15 + rand() * 0.9);
    const flower = new THREE.Mesh(flowerGeo, mats.flower);
    flower.position.set(Math.cos(a) * r, 0.03, Math.sin(a) * r);
    scene.add(flower);
  }

  // Reeds with cattails in a clump at the back left; each sways from its base.
  const reeds = Array.from({ length: 9 }, () => {
    const a = 3.6 + rand() * 0.7;
    const r = pondRadius(a) * (0.92 + rand() * 0.12);
    const h = 0.8 + rand() * 0.6;
    const reed = new THREE.Group();
    const stalk = new THREE.Mesh(new THREE.CylinderGeometry(0.015, 0.025, h, 4), mats.reed);
    stalk.position.y = h / 2;
    reed.add(stalk);
    if (rand() > 0.35) {
      const tail = new THREE.Mesh(new THREE.CylinderGeometry(0.045, 0.045, 0.22, 6), mats.cattail);
      tail.position.y = h - 0.12;
      reed.add(tail);
    }
    reed.position.set(Math.cos(a) * r, WATER_Y, Math.sin(a) * r);
    scene.add(reed);
    return { reed, phase: rand() * 6 };
  });

  // Lily pads: discs with a notch, floating and bobbing. The first carries a lotus.
  const padSpots: [number, number, number][] = [
    [1.4, -1.2, 0.42],
    [1.95, -0.55, 0.3],
    [-1.6, 0.9, 0.36],
    [-1.1, 1.5, 0.26],
    [0.6, -2.1, 0.3],
    [-2.2, -0.9, 0.32],
  ];
  const pads = padSpots.map(([x, z, r], i) => {
    const pad = new THREE.Group();
    const disc = new THREE.Mesh(new THREE.CircleGeometry(r, 14, 0.35, Math.PI * 2 - 0.7), mats.pad);
    disc.rotation.x = -Math.PI / 2;
    pad.add(disc);
    if (i === 0) {
      const lotus = new THREE.Group();
      for (let k = 0; k < 8; k++) {
        const petal = new THREE.Mesh(new THREE.SphereGeometry(0.12, 6, 4), mats.lotus);
        petal.scale.set(0.45, 1, 0.3);
        const a = (k / 8) * Math.PI * 2;
        petal.position.set(Math.cos(a) * 0.08, 0.1, Math.sin(a) * 0.08);
        petal.lookAt(Math.cos(a) * 0.5, 0.5, Math.sin(a) * 0.5);
        petal.rotateX(Math.PI / 2);
        lotus.add(petal);
      }
      const core = new THREE.Mesh(new THREE.IcosahedronGeometry(0.05, 0), mats.lotusCore);
      core.position.y = 0.1;
      lotus.add(core);
      pad.add(lotus);
    }
    pad.position.set(x, WATER_Y + 0.01, z);
    pad.rotation.y = rand() * Math.PI * 2;
    scene.add(pad);
    return { pad, phase: rand() * 6 };
  });

  // Koi. Each part's geometry is built in the fish's own frame (x from tail to head) and bent
  // every frame from a copy of its rest positions.
  const makeKoi = (pattern: number, seed: number): Omit<Koi, 'path' | 'y' | 'phase'> => {
    const r = seeded(seed);
    const group = new THREE.Group();
    const profile = [
      [0.02, -0.55],
      [0.05, -0.42],
      [0.1, -0.2],
      [0.13, 0.05],
      [0.12, 0.25],
      [0.08, 0.38],
      [0.0, 0.46],
    ].map(([rr, y]) => new THREE.Vector2(rr, y));
    const body = new THREE.LatheGeometry(profile, 10);
    body.rotateZ(-Math.PI / 2);
    body.scale(1, 0.7, 1);
    body.computeVertexNormals();
    // Patches: blobs of orange on white (kohaku), white with an orange head, or all gold.
    const bp = body.attributes.position;
    const mask = new Uint8Array(bp.count);
    const blobs = Array.from({ length: 3 }, () => [-0.35 + r() * 0.75, (r() - 0.5) * 0.1, 0.1 + r() * 0.08]);
    for (let i = 0; i < bp.count; i++) {
      const x = bp.getX(i);
      const z = bp.getZ(i);
      if (pattern === 2) mask[i] = 2;
      else if (pattern === 1) mask[i] = x > 0.12 ? 1 : 0;
      else mask[i] = blobs.some(([bx, bz, br]) => Math.hypot(x - bx, (z - bz) * 1.6) < br) ? 1 : 0;
    }
    body.setAttribute('color', new THREE.BufferAttribute(new Float32Array(bp.count * 3), 3));
    group.add(new THREE.Mesh(body, mats.koi));

    const tail = new THREE.Shape();
    tail.moveTo(-0.5, 0);
    tail.quadraticCurveTo(-0.7, 0.05, -0.86, 0.2);
    tail.quadraticCurveTo(-0.76, 0, -0.86, -0.2);
    tail.quadraticCurveTo(-0.7, -0.05, -0.5, 0);
    const tailGeo = new THREE.ShapeGeometry(tail, 6);
    tailGeo.rotateX(-Math.PI / 2);
    group.add(new THREE.Mesh(tailGeo, mats.fin));

    const fins = new THREE.Shape();
    for (const side of [1, -1]) {
      fins.moveTo(0.18, side * 0.08);
      fins.lineTo(0.02, side * 0.26);
      fins.lineTo(0.06, side * 0.08);
      fins.closePath();
    }
    const finGeo = new THREE.ShapeGeometry(fins);
    finGeo.rotateX(-Math.PI / 2);
    group.add(new THREE.Mesh(finGeo, mats.fin));

    const eyes = new THREE.BufferGeometry();
    const eyeParts = [0.06, -0.06].map(z => new THREE.IcosahedronGeometry(0.018, 0).translate(0.34, 0.04, z));
    eyes.setAttribute(
      'position',
      new THREE.BufferAttribute(new Float32Array([...eyeParts[0].attributes.position.array, ...eyeParts[1].attributes.position.array]), 3),
    );
    group.add(new THREE.Mesh(eyes, mats.eye));

    const parts = [body, tailGeo, finGeo, eyes].map(geo => ({ geo, base: Float32Array.from(geo.attributes.position.array) }));
    scene.add(group);
    return { group, parts, body, mask };
  };

  const kois: Koi[] = [
    { pattern: 0, path: (t: number) => [Math.cos(t * 0.22) * 1.9, Math.sin(t * 0.44) * 0.9] as [number, number], y: -0.2 },
    { pattern: 1, path: (t: number) => [Math.cos(-t * 0.18 + 2) * 2.1, Math.sin(-t * 0.18 + 2) * 1.6] as [number, number], y: -0.28 },
    { pattern: 2, path: (t: number) => [0.4 + Math.cos(t * 0.27 + 4) * 1.2, -0.3 + Math.sin(t * 0.27 + 4) * 1.4] as [number, number], y: -0.17 },
    { pattern: 0, path: (t: number) => [Math.sin(t * 0.2 + 1) * 1.5, Math.cos(t * 0.4 + 2) * 1.3 - 0.2] as [number, number], y: -0.34 },
    { pattern: 1, path: (t: number) => [-0.6 + Math.cos(t * 0.25 + 1) * 1.1, 0.6 + Math.sin(t * 0.25 + 1) * 0.8] as [number, number], y: -0.24 },
  ].map(({ pattern, path, y }, i) => ({ ...makeKoi(pattern, 100 + i), path, y, phase: i * 1.9 }));

  const paintKoi = (th: KoiPondTheme) => {
    const palette = [new THREE.Color(th.koiWhite), new THREE.Color(th.koi), new THREE.Color(th.koiGold)];
    for (const k of kois) {
      const colors = k.body.attributes.color as THREE.BufferAttribute;
      k.mask.forEach((m, i) => colors.setXYZ(i, palette[m].r, palette[m].g, palette[m].b));
      colors.needsUpdate = true;
    }
  };
  paintKoi(theme);

  // Ripples: rings that spread and fade at a new spot each cycle (spot chosen from the cycle number).
  const ripples = Array.from({ length: 4 }, (_, k) => {
    const mat = new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, depthWrite: false });
    const mesh = new THREE.Mesh(new THREE.RingGeometry(0.92, 1, 40), mat);
    mesh.rotation.x = -Math.PI / 2;
    mesh.renderOrder = 2;
    scene.add(mesh);
    return { mesh, mat, period: 4 + k * 0.9, offset: k * 1.3 };
  });
  const hash = (n: number) => {
    const s = Math.sin(n * 127.1) * 43758.5453;
    return s - Math.floor(s);
  };

  // Dragonfly: a slim body with four wings that blur, hovering then darting to a new spot.
  const dragonfly = new THREE.Group();
  const dfBody = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.012, 0.42, 5), mats.dragonfly);
  dfBody.rotation.z = Math.PI / 2;
  const dfHead = new THREE.Mesh(new THREE.IcosahedronGeometry(0.04, 0), mats.dragonfly);
  dfHead.position.x = 0.22;
  dragonfly.add(dfBody, dfHead);
  const wings = [0.08, 0.0].flatMap(x =>
    [1, -1].map(side => {
      const wing = new THREE.Mesh(new THREE.PlaneGeometry(0.05, 0.22), mats.wing);
      wing.geometry.translate(0, side * 0.11, 0);
      wing.rotation.x = -Math.PI / 2;
      wing.position.set(x, 0.02, 0);
      dragonfly.add(wing);
      return { wing, side };
    }),
  );
  scene.add(dragonfly);
  /** Where the dragonfly hovers in each 5s hop: it holds still, then darts to the next spot. */
  const hoverSpot = (n: number) => {
    const a = hash(n + 3) * Math.PI * 2;
    const r = 0.8 + hash(n + 7) * 1.6;
    return new THREE.Vector3(Math.cos(a) * r, 0.5 + hash(n + 11) * 0.4, Math.sin(a) * r);
  };

  return {
    update(t) {
      camera.position.set(Math.sin(t * 0.04) * 2.5, 8.2, Math.cos(t * 0.04) * 6.8);
      camera.lookAt(0, -0.3, 0.2);

      for (const k of kois) {
        const [x, z] = k.path(t);
        const [nx, nz] = k.path(t + 0.05);
        k.group.position.set(x, k.y, z);
        k.group.rotation.y = Math.atan2(-(nz - z), nx - x);
        for (const { geo, base } of k.parts) {
          const p = geo.attributes.position as THREE.BufferAttribute;
          for (let i = 0; i < p.count; i++) {
            const bx = base[i * 3];
            p.setXYZ(i, bx, base[i * 3 + 1], base[i * 3 + 2] + bend(bx, t, k.phase));
          }
          p.needsUpdate = true;
        }
      }

      pads.forEach(({ pad, phase }) => {
        pad.position.y = WATER_Y + 0.01 + Math.sin(t * 0.9 + phase) * 0.012;
        pad.rotation.z = Math.sin(t * 0.7 + phase) * 0.03;
      });
      reeds.forEach(({ reed, phase }) => {
        reed.rotation.z = Math.sin(t * 0.8 + phase) * 0.06;
        reed.rotation.x = Math.sin(t * 0.6 + phase * 2) * 0.04;
      });

      ripples.forEach(({ mesh, mat, period, offset }, k) => {
        const cycle = Math.floor((t + offset) / period);
        const p = ((t + offset) % period) / period;
        const a = hash(cycle * 4 + k) * Math.PI * 2;
        const r = Math.sqrt(hash(cycle * 4 + k + 0.5)) * 2.2;
        mesh.position.set(Math.cos(a) * r, WATER_Y + 0.005, Math.sin(a) * r);
        mesh.scale.setScalar(0.05 + p * 0.7);
        mat.opacity = 0.5 * (1 - p);
      });

      // Dragonfly: hold for most of each hop, dart to the next spot at the end, bobbing all the time.
      const hop = t / 5;
      const n = Math.floor(hop);
      const dart = smoothstep(0.8, 1, hop - n);
      const from = hoverSpot(n);
      const to = hoverSpot(n + 1);
      dragonfly.position.lerpVectors(from, to, dart);
      dragonfly.position.y += Math.sin(t * 3) * 0.03;
      dragonfly.rotation.y = Math.atan2(-(to.z - from.z), to.x - from.x);
      wings.forEach(({ wing, side }, i) => {
        wing.rotation.x = -Math.PI / 2 + side * Math.sin(t * 60 + i) * 0.5;
      });
    },
    setTheme(th) {
      paintGround(th);
      paintKoi(th);
      mats.water.color.set(th.water);
      mats.fin.color.set(th.koiWhite);
      mats.pad.color.set(th.lilyPad);
      mats.lotus.color.set(th.lotus);
      mats.rock.color.set(th.rock);
      mats.reed.color.set(th.reed);
      mats.bush.color.set(th.bush);
      mats.dragonfly.color.set(th.dragonfly);
      hemi.groundColor.set(th.grass);
    },
  };
};

/** A garden pond from above: koi swimming loops under lily pads, ripples and a dragonfly. */
export function KoiPond3D(props: ThreeSceneProps<KoiPondTheme>) {
  return <ThreeFrame {...props} defaultTheme={koiPondTheme} setup={setup} background={t => t.grass} />;
}

'use client';

// Shared frame for every 3D scene: canvas sizing, render loop, pausing, theming and cleanup.
// Scenes provide a module-level `setup` function; this frame owns everything else.

import { useEffect, useMemo, useRef, type CSSProperties, type ReactNode } from 'react';
import * as THREE from 'three';
import styles from './three-frame.module.css';

/** Props every 3D scene accepts. `T` is the scene's theme (colour tokens). */
export type ThreeSceneProps<T> = {
  /** Override any of the scene's colours. Updates live without rebuilding the scene. */
  theme?: Partial<T>;
  /** Freeze the animation. Scenes also stop rendering while off-screen or in a hidden tab. */
  paused?: boolean;
  /** Animation speed multiplier (default 1). */
  speed?: number;
  className?: string;
  style?: CSSProperties;
  /** Content rendered on top of the canvas. */
  children?: ReactNode;
};

export type SceneContext<T> = {
  scene: THREE.Scene;
  camera: THREE.PerspectiveCamera;
  renderer: THREE.WebGLRenderer;
  theme: T;
};

export type SceneController<T> = {
  /** Advance the scene to `time` seconds (scaled by `speed`). */
  update: (time: number) => void;
  /** Apply new colours to existing materials and lights. */
  setTheme: (theme: T) => void;
};

/** Build the scene once. Must be defined at module level so its identity is stable. */
export type SceneSetup<T> = (ctx: SceneContext<T>) => SceneController<T>;

/** True when the browser can create a WebGL context. The probe context is released immediately. */
function webglAvailable() {
  try {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
    gl?.getExtension('WEBGL_lose_context')?.loseContext();
    return Boolean(gl);
  } catch {
    return false;
  }
}

/** Deterministic PRNG so scenes look the same on every load. */
export function seeded(seed: number): () => number {
  return () => {
    seed = (seed + 0x6d2b79f5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

type ThreeFrameProps<T extends Record<string, string>> = ThreeSceneProps<T> & {
  defaultTheme: T;
  setup: SceneSetup<T>;
  /** CSS background behind the transparent canvas, e.g. a sky gradient. */
  background?: (theme: T) => string;
  /** Time shown as a still frame under prefers-reduced-motion. */
  stillTime?: number;
};

export function ThreeFrame<T extends Record<string, string>>({
  defaultTheme,
  setup,
  background,
  stillTime = 4,
  theme,
  paused = false,
  speed = 1,
  className,
  style,
  children,
}: ThreeFrameProps<T>) {
  const hostRef = useRef<HTMLDivElement>(null);
  const merged = useMemo(() => ({ ...defaultTheme, ...theme }) as T, [defaultTheme, theme]);

  // Live values read by the render loop without restarting it.
  const live = useRef({ theme: merged, paused, speed });
  live.current.speed = speed;
  const control = useRef<{ schedule: () => void; redraw: () => void; setTheme: (t: T) => void } | null>(null);

  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;

    // Without WebGL, leave the CSS background and children visible (and skip three.js's console errors).
    if (!webglAvailable()) return;
    let renderer: THREE.WebGLRenderer;
    try {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: 'low-power' });
    } catch {
      return; // No WebGL: leave the background and children visible.
    }
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.domElement.className = styles.canvas;
    host.prepend(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 200);
    const controller = setup({ scene, camera, renderer, theme: live.current.theme });

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    let visible = true;
    let time = reduceMotion.matches ? stillTime : 0;
    let last = 0;
    let raf = 0;

    const draw = () => {
      controller.update(time);
      renderer.render(scene, camera);
    };
    const running = () => visible && !live.current.paused && !reduceMotion.matches && !document.hidden;
    const frame = (now: number) => {
      raf = 0;
      if (!running()) return;
      const delta = Math.min((now - last) / 1000, 0.05);
      last = now;
      time += delta * live.current.speed;
      draw();
      raf = requestAnimationFrame(frame);
    };
    const schedule = () => {
      if (reduceMotion.matches) time = stillTime;
      if (running() && !raf) {
        last = performance.now();
        raf = requestAnimationFrame(frame);
      } else if (!running()) {
        draw();
      }
    };

    const resize = () => {
      const { width, height } = host.getBoundingClientRect();
      if (!width || !height) return;
      renderer.setSize(width, height, false);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      draw();
    };

    const resizeObserver = new ResizeObserver(resize);
    resizeObserver.observe(host);
    const intersectionObserver = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      schedule();
    });
    intersectionObserver.observe(host);
    document.addEventListener('visibilitychange', schedule);
    reduceMotion.addEventListener('change', schedule);

    control.current = { schedule, redraw: draw, setTheme: controller.setTheme };
    resize();
    schedule();

    return () => {
      cancelAnimationFrame(raf);
      resizeObserver.disconnect();
      intersectionObserver.disconnect();
      document.removeEventListener('visibilitychange', schedule);
      reduceMotion.removeEventListener('change', schedule);
      control.current = null;
      scene.traverse(object => {
        const mesh = object as THREE.Mesh;
        mesh.geometry?.dispose();
        const materials = Array.isArray(mesh.material) ? mesh.material : mesh.material ? [mesh.material] : [];
        materials.forEach(m => m.dispose());
      });
      renderer.dispose();
      renderer.domElement.remove();
    };
  }, [setup, stillTime]);

  useEffect(() => {
    live.current.theme = merged;
    control.current?.setTheme(merged);
    control.current?.redraw();
  }, [merged]);

  useEffect(() => {
    live.current.paused = paused;
    control.current?.schedule();
  }, [paused]);

  const classes = [styles.root, className].filter(Boolean).join(' ');
  return (
    <div ref={hostRef} className={classes} style={{ background: background?.(merged), ...style }}>
      {children && <div className={styles.overlay}>{children}</div>}
    </div>
  );
}

.root {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.overlay {
  position: absolute;
  inset: 0;
}