@vibes.diy/prompts 14.3.58 → 14.3.59

package/llms/voxel.draft.md

@@ -1,196 +0,0 @@
-# Voxel worlds — the first draft: one grass block, turning in the sky
-
-A voxel app's first draft is a full-screen 3D viewport with the HUD floating
-over it, and in that viewport ONE block: a pixel-art grass block, green on top
-and dirt on the sides, turning slowly under a blue sky. The name card, the
-hotbar, the palette, the seeded world document and the look are all finished;
-the block is real, lit and drawn through the same instanced path the whole
-world will use.
-Terrain, placing and breaking, walking, saving edits and sharing the world are
-the next pass. What the draft owes that pass is the right skeleton: the engine
-is built once inside an effect, the block is ONE `InstancedMesh` with a
-count of 1, the viewport is `fixed inset-0` with the controls on top of it,
-and the palette is named once for the HUD and the blocks, so the next pass
-raises the count and adds to this file rather than rewriting it.
-
-Unlike the page-shaped draft above, a world does not flow down the page: the
-viewport is `fixed inset-0` and the controls sit on top of it.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef, useState } from "react";
-import { useFireproof } from "use-fireproof";
-import * as THREE from "three";
-import { Button, Badge } from "@vibes.diy/look";
-
-// The block-in-hand palette (shared by block colors and HUD swatches).
-const VOXEL_PALETTE = {
-  grass: "#6fcf5b", dirt: "#8a5a3b", stone: "#9b9b9b", wood: "#b5793a", glass: "#9fe3ff", candy: "#ff6fb1",
-  neon: "#39ff9e", water: "#2f8fe0", lava: "#ff5a2f", erase: "#ff4d6d", ink: "#1a1325", light: "#ffffff",
-};
-const HOTBAR = ["grass", "dirt", "stone", "wood", "glass", "candy"];
-const SKY = 0x8ecbff;
-
-// A 16×16 pixel-art face, painted once. `fringe` rows of green sit on top of dirt for the sides.
-function blockFace(kind) {
-  const canvas = document.createElement("canvas");
-  canvas.width = 16;
-  canvas.height = 16;
-  const ctx = canvas.getContext("2d");
-  const px = (x, y, color) => { ctx.fillStyle = color; ctx.fillRect(x, y, 1, 1); };
-  let n = kind.length * 7;
-  const rand = () => { n = (n * 9301 + 49297) % 233280; return n / 233280; };
-  for (let y = 0; y < 16; y++)
-    for (let x = 0; x < 16; x++) {
-      const fringe = kind === "side" && y < 3 + (x % 3 === 0 ? 1 : 0);
-      if (kind === "top" || fringe) px(x, y, rand() < 0.18 ? "#4fa83f" : VOXEL_PALETTE.grass);
-      else px(x, y, rand() < 0.2 ? "#6e4630" : VOXEL_PALETTE.dirt);
-    }
-  const texture = new THREE.CanvasTexture(canvas);
-  texture.magFilter = THREE.NearestFilter;
-  texture.minFilter = THREE.NearestFilter;
-  texture.colorSpace = THREE.SRGBColorSpace;
-  return texture;
-}
-
-export default function App() {
-  const { useLiveQuery } = useFireproof("skyIsland");
-  const { docs: worlds } = useLiveQuery("type", { key: "world" });
-  const world = worlds[0];
-  const mountRef = useRef(null);
-  const [held, setHeld] = useState(HOTBAR[0]);
-
-  // The engine, built once: renderer, scene, lights, the instanced block, the loop. React only draws the HUD over it.
-  useEffect(() => {
-    const mount = mountRef.current;
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    renderer.setSize(mount.clientWidth, mount.clientHeight);
-    mount.appendChild(renderer.domElement);
-
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(SKY);
-    scene.fog = new THREE.Fog(SKY, 8, 30);
-    const camera = new THREE.PerspectiveCamera(60, mount.clientWidth / mount.clientHeight, 0.1, 100);
-    camera.position.set(0, 1.4, 3.2);
-    camera.lookAt(0, 0, 0);
-    scene.add(new THREE.HemisphereLight(0xffffff, 0x8a5a3b, 0.9));
-    const sun = new THREE.DirectionalLight(0xffffff, 1.2);
-    sun.position.set(4, 8, 5);
-    scene.add(sun);
-
-    // The hello: one grass block, drawn the way the whole world will be — one shared cube, six shared
-    // face materials (BoxGeometry face order is +x, -x, +y, -y, +z, -z), one InstancedMesh. The next pass
-    // raises the count and fills more matrices; it never adds a Mesh per block.
-    const textures = { top: blockFace("top"), side: blockFace("side"), bottom: blockFace("bottom") };
-    const faces = ["side", "side", "top", "bottom", "side", "side"];
-    const materials = faces.map((f) => new THREE.MeshLambertMaterial({ map: textures[f] }));
-    const cube = new THREE.BoxGeometry(1, 1, 1);
-    const blocks = new THREE.InstancedMesh(cube, materials, 1);
-    scene.add(blocks);
-    const matrix = new THREE.Matrix4();
-    const spin = new THREE.Quaternion();
-    const up = new THREE.Vector3(0, 1, 0);
-    const at = new THREE.Vector3();
-    const one = new THREE.Vector3(1, 1, 1);
-
-    const onResize = () => {
-      renderer.setSize(mount.clientWidth, mount.clientHeight);
-      camera.aspect = mount.clientWidth / mount.clientHeight;
-      camera.updateProjectionMatrix();
-    };
-    window.addEventListener("resize", onResize);
-
-    const clock = new THREE.Clock();
-    let raf;
-    const loop = () => {
-      const t = clock.getElapsedTime();
-      spin.setFromAxisAngle(up, t * 0.5);
-      at.set(0, Math.sin(t * 1.2) * 0.06, 0);
-      blocks.setMatrixAt(0, matrix.compose(at, spin, one));
-      blocks.instanceMatrix.needsUpdate = true;
-      renderer.render(scene, camera);
-      raf = requestAnimationFrame(loop);
-    };
-    loop();
-
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", onResize);
-      Object.values(textures).forEach((t) => t.dispose());
-      materials.forEach((m) => m.dispose());
-      blocks.dispose();
-      cube.dispose();
-      renderer.dispose();
-      mount.removeChild(renderer.domElement);
-    };
-  }, []);
-
-  return (
-    <div className="fixed inset-0 select-none touch-none bg-background text-foreground font-sans">
-      <div ref={mountRef} className="absolute inset-0" />
-
-      <div className="absolute left-4 top-4 rounded-lg bg-card/90 px-3 py-2 text-card-foreground shadow-md">
-        <p className="font-bold">{world?.name ?? "Sky Island"}</p>
-        <p className="text-muted-foreground">Your first block is ready. Pick what goes in your hand.</p>
-      </div>
-
-      <Badge className="absolute right-4 top-4">Holding {held}</Badge>
-
-      <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2 rounded-lg bg-card/90 p-2 shadow-md">
-        {HOTBAR.map((type) => (
-          <Button key={type} size="sm" variant={type === held ? "default" : "outline"} onClick={() => setHeld(type)}
-            aria-label={type}>
-            <span className="inline-block h-4 w-4 rounded-sm" style={{ backgroundColor: VOXEL_PALETTE[type] }} />
-            {type}
-          </Button>
-        ))}
-      </div>
-      {/* TODO(next pass): the flat block map and instanced terrain, place and break the held block, walk with pointer lock, save edits as documents, share the world */}
-    </div>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "skyIsland": [
-    { "key": "island", "type": "world", "name": "Sky Island", "sky": "clear" }
-  ]
-}
-```
-
-Draft note: the next pass adds the terrain around this block, placing and breaking with the held block, walking the world, saving edits, and sharing the world with friends.
-
-## What stays the same in a voxel draft
-
-- **The viewport fills the screen**: the outer element is `fixed inset-0
-  select-none touch-none`, the renderer mounts into an `absolute inset-0` div,
-  and every control is an `absolute` layer over it. Never the page-flow `main`
-  with padding from the shape above.
-- **The engine is built once** in `useEffect(() => {...}, [])` with the
-  renderer, scene, lights, listeners and loop inside it, and a cleanup that
-  stops the loop, removes the listener and disposes every texture, material, the
-  instanced mesh, the geometry and the renderer. Per-frame values never live in React state.
-- **`setPixelRatio(Math.min(window.devicePixelRatio, 2))`**, a resize handler
-  that updates the renderer size and the camera aspect, a hemisphere plus a
-  directional light, and a `Fog` that matches the sky color.
-- **The hello is one grass block, turning, through the fast path**: one shared
-  `BoxGeometry` and an array of six shared materials, each face a 16×16
-  `THREE.CanvasTexture` painted in code with `NearestFilter` so the pixels
-  stay crisp, drawn as `new THREE.InstancedMesh(cube, materials, 1)` and
-  turned each frame with `setMatrixAt(0, …)` plus
-  `instanceMatrix.needsUpdate = true`. No texture URLs, no loaders.
-- **The palette table** is the Blocktopia voxel palette, in full, named once
-  for the block colors and the HUD swatches.
-- **The next pass keeps this skeleton**: the world becomes a flat `Map` keyed
-  `"x|y|z"`, drawn through the same ONE `InstancedMesh` of the exposed blocks
-  (the count raised, a matrix per block) with its shared geometry and
-  materials. Never a
-  `THREE.Mesh` per block, and never a geometry or material created inside the
-  block loop. Pointer lock comes from a click-to-play overlay whose visibility
-  follows the real lock state, and movement keys are the game's own set.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: terrain, placing and breaking, walking, saving edits,
-  sharing. The draft draws none of it.

package/llms/web-audio.draft.md

@@ -1,180 +0,0 @@
-# Web Audio — the first draft: one tone, played by a tap
-
-A sound app's first draft is the whole page around the instrument: the name,
-a row of named notes, a volume slider, a big Play button, and the last few
-notes played, listed live from the database. The capability's hello is real:
-every tap plays one short, shaped tone through the speakers, on iOS too. The
-sequencer or metronome on the audio clock, the effects chain and recording are
-the next pass. What the draft owes that pass is the right skeleton: one
-`AudioContext` in a ref, created inside the first gesture and resumed on every
-one after it, and a plain `playTone` helper that takes the context and a note,
-so the next pass adds a scheduler beside it rather than rewriting it.
-
-Web Audio is a browser built-in: there is no import, the constructor is
-`window.AudioContext` with the `window.webkitAudioContext` fallback.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef, useState } from "react";
-import { useFireproof } from "use-fireproof";
-import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from "@vibes.diy/look";
-
-// Named notes of a C major pentatonic, so any order of taps sounds sweet.
-const NOTES = [
-  { name: "C4", hz: 261.63 },
-  { name: "D4", hz: 293.66 },
-  { name: "E4", hz: 329.63 },
-  { name: "G4", hz: 392.0 },
-  { name: "A4", hz: 440.0 },
-  { name: "C5", hz: 523.25 },
-];
-const hzOf = (name) => (NOTES.find((n) => n.name === name) ?? NOTES[4]).hz;
-const timeOf = (ms) => new Date(ms).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit" });
-
-// The iOS-safe gate: create or resume the context and return it. Call it FIRST,
-// synchronously, inside the click handler, with no await before the sound starts.
-function unlockAudio(ctxRef) {
-  ctxRef.current ||= new (window.AudioContext || window.webkitAudioContext)();
-  const ctx = ctxRef.current;
-  if (ctx.state !== "running") ctx.resume(); // iOS suspends after lock or backgrounding
-  return ctx;
-}
-
-// One short tone: oscillator -> gain -> speakers, with an attack and a release, stopped at ~0.4 s.
-function playTone(ctx, hz, volume, wave) {
-  const t = ctx.currentTime;
-  const peak = Math.max(volume, 0.0001); // exponential ramps never touch zero
-  const osc = ctx.createOscillator();
-  const gain = ctx.createGain();
-  osc.type = wave;
-  osc.frequency.setValueAtTime(hz, t);
-  gain.gain.setValueAtTime(0.0001, t);
-  gain.gain.linearRampToValueAtTime(peak, t + 0.02); // attack
-  gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.4); // release
-  osc.connect(gain).connect(ctx.destination);
-  osc.start(t);
-  osc.stop(t + 0.42);
-  osc.onended = () => {
-    osc.disconnect();
-    gain.disconnect();
-  };
-}
-
-export default function App() {
-  const { database, useLiveQuery } = useFireproof("glassHarp");
-  const { docs: instruments } = useLiveQuery("type", { key: "instrument" });
-  // Only play documents carry createdAt; newest first, a handful of them.
-  const { docs: plays } = useLiveQuery("createdAt", { descending: true, limit: 6 });
-  const instrument = instruments[0];
-  const ctxRef = useRef(null);
-  const [note, setNote] = useState("A4");
-  const [volume, setVolume] = useState(0.5);
-
-  // The context is created by the first tap and closed when the app goes away.
-  useEffect(() => {
-    return () => {
-      ctxRef.current?.close();
-      ctxRef.current = null;
-    };
-  }, []);
-
-  const play = (name) => {
-    const ctx = unlockAudio(ctxRef); // same trusted handler, before anything async
-    playTone(ctx, hzOf(name), volume, instrument?.wave ?? "triangle");
-    setNote(name);
-    // The sound is already playing; saving can take its time.
-    database.put({ type: "play", note: name, createdAt: Date.now() });
-    if (instrument) database.put({ ...instrument, lastNote: name });
-  };
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">{instrument?.name ?? "Glass Harp"}</h1>
-      <p className="mt-1 text-muted-foreground">Pick a note, press Play, and let it ring.</p>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Play a note</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-5">
-            <div className="flex flex-wrap gap-2">
-              {NOTES.map((n) => (
-                <Button key={n.name} variant={n.name === note ? "default" : "outline"} onClick={() => play(n.name)}>
-                  {n.name}
-                </Button>
-              ))}
-            </div>
-            <label className="grid gap-2">
-              <span className="text-muted-foreground">Volume {Math.round(volume * 100)}%</span>
-              <input type="range" min={0} max={1} step={0.05} value={volume} onChange={(e) => setVolume(Number(e.target.value))} className="w-full" />
-            </label>
-            <Button size="lg" onClick={() => play(note)}>
-              Play {note}
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Just played</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-wrap gap-2">
-            {plays.map((p) => (
-              <Badge key={p._id} variant="secondary">
-                {p.note} · {timeOf(p.createdAt)}
-              </Badge>
-            ))}
-          </div>
-          <p className="mt-3 text-muted-foreground">Last note: {instrument?.lastNote ?? note}</p>
-        </CardContent>
-      </Card>
-
-      {/* TODO(next pass): a step sequencer and metronome scheduled ahead on ctx.currentTime, a delay with effects in its feedback loop, and recording a take */}
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "glassHarp": [
-    { "key": "harp", "type": "instrument", "name": "Glass Harp", "wave": "triangle", "lastNote": "G4" },
-    { "key": "play-1", "type": "play", "note": "C4", "createdAt": 1758400000000 },
-    { "key": "play-2", "type": "play", "note": "E4", "createdAt": 1758400001000 },
-    { "key": "play-3", "type": "play", "note": "G4", "createdAt": 1758400002000 }
-  ]
-}
-```
-
-Draft note: the next pass adds a step sequencer and metronome on the audio clock, a delay and filter chain, and recording a take to keep.
-
-## What stays the same in a Web Audio draft
-
-- **One `AudioContext`, in a ref, made by a gesture**: `unlockAudio(ctxRef)`
-  creates it on the first tap, re-checks `ctx.state` and resumes on every tap
-  after, and the effect's cleanup closes it. Never a context at module scope,
-  in `useState`, or in a mount effect.
-- **The iOS rule holds in every handler**: the unlock and the first
-  `osc.start()` run synchronously inside the same click, before any `await`,
-  timer, promise or state-driven effect. Saving to the database comes after
-  the sound has started.
-- **The hello is one shaped tone**: an `OscillatorNode` into a `GainNode`,
-  `setValueAtTime` to a floor of `0.0001`, `linearRampToValueAtTime` for the
-  attack, `exponentialRampToValueAtTime` for the release, `osc.stop` at about
-  0.4 s, and both nodes disconnected in `onended`. Nothing plays on load.
-- **`playTone(ctx, hz, volume, wave)` is a plain function** outside the
-  component, taking the context as an argument. The next pass's engine and
-  scheduler sit beside it in the same shape.
-- **Controls are ordinary elements**: named notes as `Button`s, volume as a
-  plain `<input type="range">`, read at the moment of the tap.
-- **The data is real**: the seeded instrument document holds the name, the
-  wave and the last note; each tap writes a `play` document with `createdAt`,
-  and a `useLiveQuery` list shows the newest few.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: the sequencer or metronome with lookahead scheduling on
-  `ctx.currentTime`, effects, recording. The draft schedules nothing on the
-  clock beyond the one tone.

package/llms/webxr.draft.md

@@ -1,159 +0,0 @@
-# Babylon.js WebXR — the first draft: a lit scene with a door into VR
-
-A WebXR app's first draft is the page around the scene (title, copy, a card
-holding the canvas) with one real Babylon.js scene running inside it: a lit
-box turning above a ground plane. The VR half is shown honestly: an "Enter
-VR" Button that lights up when the browser reports an immersive headset and
-opens the session through `scene.createDefaultXRExperienceAsync`, and reads
-"VR needs a headset browser" everywhere else. Hit testing, anchors, hand
-tracking, particles and shaders are the next pass. What the draft owes that
-pass is the skeleton: the engine and scene are built once in one effect with a
-full cleanup, the ground mesh the XR floor needs already exists, and the scene
-lives in a ref so the next pass adds features to this file rather than
-rewriting it.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef, useState } from "react";
-import { useFireproof } from "use-fireproof";
-import * as BABYLON from "@babylonjs/core";
-import { Card, CardHeader, CardTitle, CardContent, Button, Badge } from "@vibes.diy/look";
-
-export default function App() {
-  const { useLiveQuery } = useFireproof("floatingRoom");
-  const { docs: rooms } = useLiveQuery("type", { key: "room" });
-  const room = rooms[0];
-  const canvasRef = useRef(null);
-  const sceneRef = useRef(null);
-  const [vrReady, setVrReady] = useState(false);
-  const [inVr, setInVr] = useState(false);
-
-  // The engine, built once: scene, camera, lights, ground, one box, render loop, resize, cleanup.
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
-    const scene = new BABYLON.Scene(engine);
-    scene.clearColor = new BABYLON.Color4(0.06, 0.08, 0.14, 1);
-
-    const camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 1.7, -5), scene);
-    camera.setTarget(new BABYLON.Vector3(0, 1, 0));
-    camera.attachControl(canvas, true);
-
-    const ambient = new BABYLON.HemisphericLight("ambient", new BABYLON.Vector3(0, 1, 0), scene);
-    ambient.intensity = 0.5;
-    const sun = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(-1, -2, -1), scene);
-    sun.position = new BABYLON.Vector3(5, 10, 5);
-    sun.intensity = 0.8;
-
-    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 12, height: 12 }, scene);
-    const groundMat = new BABYLON.StandardMaterial("groundMat", scene);
-    groundMat.diffuseColor = new BABYLON.Color3(0.22, 0.3, 0.26);
-    ground.material = groundMat;
-
-    const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
-    box.position.y = 1.2;
-    const boxMat = new BABYLON.StandardMaterial("boxMat", scene);
-    boxMat.diffuseColor = new BABYLON.Color3(0.95, 0.55, 0.25);
-    box.material = boxMat;
-
-    scene.onBeforeRenderObservable.add(() => {
-      const dt = engine.getDeltaTime() / 1000;
-      box.rotation.y += dt * 0.8;
-      box.rotation.x += dt * 0.3;
-    });
-
-    sceneRef.current = { scene, ground };
-    engine.runRenderLoop(() => scene.render());
-    const onResize = () => engine.resize();
-    window.addEventListener("resize", onResize);
-
-    // Ask the browser once whether an immersive headset session is on offer.
-    let alive = true;
-    if (navigator.xr) {
-      navigator.xr
-        .isSessionSupported("immersive-vr")
-        .then((ok) => { if (alive) setVrReady(ok); })
-        .catch(() => { if (alive) setVrReady(false); });
-    }
-
-    return () => {
-      alive = false;
-      sceneRef.current = null;
-      window.removeEventListener("resize", onResize);
-      engine.stopRenderLoop();
-      scene.dispose();
-      engine.dispose();
-    };
-  }, []);
-
-  const enterVr = async () => {
-    const current = sceneRef.current;
-    if (!current) return;
-    const xr = await current.scene.createDefaultXRExperienceAsync({ floorMeshes: [current.ground], disableDefaultUI: true });
-    xr.baseExperience.onStateChangedObservable.add((state) => setInVr(state === BABYLON.WebXRState.IN_XR));
-    await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");
-  };
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">{room?.name ?? "Floating Room"}</h1>
-      <p className="mt-1 text-muted-foreground">{room?.tagline ?? "A quiet room with one bright box. Drag to look around, or step inside with a headset."}</p>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>The room</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <canvas ref={canvasRef} className="block aspect-video w-full rounded-lg outline-none touch-none" />
-          {/* TODO(next pass): hit testing, anchors, hand tracking, particles and shaders inside this same scene */}
-          <div className="mt-4 flex flex-wrap items-center gap-3">
-            {vrReady ? (
-              <Button onClick={enterVr}>Enter VR</Button>
-            ) : (
-              <Button disabled variant="outline">VR needs a headset browser</Button>
-            )}
-            <Badge variant="secondary">{inVr ? "In VR" : "On screen"}</Badge>
-          </div>
-        </CardContent>
-      </Card>
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "floatingRoom": [
-    { "key": "room", "type": "room", "name": "Floating Room", "tagline": "A quiet room with one bright box. Drag to look around, or step inside with a headset." }
-  ]
-}
-```
-
-Draft note: the next pass adds hit testing, anchors, hand tracking, particles and shaders to the same scene.
-
-## What stays the same in a WebXR draft
-
-- **The import is `import * as BABYLON from "@babylonjs/core"`**, never the
-  legacy `babylonjs` package, and every engine class is reached through the
-  `BABYLON.` namespace.
-- **The engine is built once** in `useEffect(() => {...}, [])`: `Engine`,
-  `Scene`, camera, lights, ground, mesh and `engine.runRenderLoop` all inside
-  it, per-frame motion in `scene.onBeforeRenderObservable`, and the scene kept
-  in a ref for the few calls React makes in.
-- **The cleanup is complete**: it removes the resize listener, stops the render
-  loop, disposes the scene and disposes the engine.
-- **Sizing**: the canvas is `block aspect-video w-full` inside a Card, and
-  `window` resize calls `engine.resize()`.
-- **The hello is one lit box on a ground plane** under a hemispheric light and
-  a directional light, turning on the engine's delta time. The ground doubles
-  as the XR floor mesh.
-- **VR is shown, never hidden**: `navigator.xr.isSessionSupported("immersive-vr")`
-  is checked in the effect and stored in state; a supported browser gets an
-  "Enter VR" Button that awaits `createDefaultXRExperienceAsync` with
-  `disableDefaultUI` and then `enterXRAsync("immersive-vr", "local-floor")`,
-  and every other browser sees a disabled Button reading "VR needs a headset
-  browser".
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: hit testing, anchors, hand tracking, particles, shaders.
-  The draft draws none of it.