@vibes.diy/prompts 14.3.36 → 14.3.38

package/llms/three-js.draft.md

@@ -0,0 +1,161 @@
+# Three.js — the first draft: one lit object turning in a viewport
+
+A Three.js app's first draft is the whole page around the scene (title, copy,
+a card holding the viewport, a control row) with one real, lit object turning
+inside it. The seeded document names the scene and holds its color, and the
+control row repaints the object live. Loading models, physics, particles,
+camera controls and textures are the next pass. What the draft owes that pass
+is the platform's own engine skeleton: the renderer, scene, camera, lights and
+loop are built once inside one effect, sized to their host, and fully disposed
+on unmount, and React talks to the running scene through a ref, so the next
+pass adds meshes and systems to this file rather than rewriting it.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef } from "react";
+import { useFireproof } from "use-fireproof";
+import * as THREE from "three";
+import { Card, CardHeader, CardTitle, CardContent, Button, Badge } from "@vibes.diy/look";
+
+// The finishes the control row offers, named once for the buttons and the material.
+const FINISHES = [
+  { label: "Lagoon", color: "#3fa7d6" },
+  { label: "Marigold", color: "#f4b942" },
+  { label: "Orchid", color: "#c86bd8" },
+  { label: "Moss", color: "#6fae5b" },
+];
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("spinStudio");
+  const { docs: scenes } = useLiveQuery("type", { key: "scene" });
+  const scene = scenes[0];
+  const hostRef = useRef(null);
+  // The running engine reads the color from here each frame, so a change never rebuilds it.
+  const colorRef = useRef(scene?.color ?? FINISHES[0].color);
+
+  useEffect(() => {
+    if (scene?.color) colorRef.current = scene.color;
+  }, [scene?.color]);
+
+  // The engine, built once: renderer, scene, camera, lights, one mesh, loop, resize, cleanup.
+  useEffect(() => {
+    const host = hostRef.current;
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(host.clientWidth, host.clientHeight);
+    host.appendChild(renderer.domElement);
+
+    const world = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(50, host.clientWidth / host.clientHeight, 0.1, 100);
+    camera.position.set(0, 1.2, 4.2);
+    camera.lookAt(0, 0, 0);
+
+    world.add(new THREE.HemisphereLight(0xffffff, 0x445066, 0.8));
+    const sun = new THREE.DirectionalLight(0xffffff, 1.4);
+    sun.position.set(3, 5, 2);
+    world.add(sun);
+
+    const geometry = new THREE.BoxGeometry(1.4, 1.4, 1.4);
+    const material = new THREE.MeshStandardMaterial({ color: colorRef.current, roughness: 0.35, metalness: 0.15 });
+    const mesh = new THREE.Mesh(geometry, material);
+    world.add(mesh);
+
+    const onResize = () => {
+      const w = host.clientWidth;
+      const h = host.clientHeight;
+      if (w === 0 || h === 0) return;
+      renderer.setSize(w, h);
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+    };
+    const observer = new window.ResizeObserver(onResize); // follows the host, not just the window
+    observer.observe(host);
+
+    const clock = new THREE.Clock();
+    let raf = 0;
+    const animate = () => {
+      const dt = Math.min(clock.getDelta(), 0.05);
+      mesh.rotation.x += dt * 0.5;
+      mesh.rotation.y += dt * 0.8;
+      material.color.set(colorRef.current);
+      renderer.render(world, camera);
+      raf = requestAnimationFrame(animate);
+    };
+    animate();
+
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      if (renderer.domElement.parentNode === host) host.removeChild(renderer.domElement);
+    };
+  }, []);
+
+  const paint = (color) => {
+    colorRef.current = color;
+    if (scene) database.put({ ...scene, color });
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground font-sans p-6">
+      <h1 className="text-3xl font-bold">{scene?.name ?? "Spin Studio"}</h1>
+      <p className="mt-1 text-muted-foreground">A little object on a turntable. Pick a finish and watch it catch the light.</p>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>Turntable</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div ref={hostRef} className="aspect-video w-full rounded-lg overflow-hidden bg-muted" />
+          {/* TODO(next pass): load a GLTF model, orbit controls, textures, particles and physics into this same scene */}
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            {FINISHES.map((f) => (
+              <Button key={f.label} size="sm" variant={f.color === scene?.color ? "default" : "outline"} onClick={() => paint(f.color)}>
+                {f.label}
+              </Button>
+            ))}
+            <Badge variant="secondary" className="ml-auto">{FINISHES.find((f) => f.color === scene?.color)?.label ?? "Lagoon"}</Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "spinStudio": [
+    { "key": "turntable", "type": "scene", "name": "Spin Studio", "color": "#3fa7d6" }
+  ]
+}
+```
+
+Draft note: the next pass adds loaded models, orbit controls, textures, particles and physics to the same scene.
+
+## What stays the same in a Three.js draft
+
+- **The engine is built once** in `useEffect(() => {...}, [])`: renderer,
+  scene, camera, lights, mesh and `requestAnimationFrame` loop all inside it.
+  React never rebuilds it; values React changes reach the loop through a ref
+  (`colorRef`), never through the effect's dependency list.
+- **The cleanup is complete**: it cancels the frame, disconnects the resize
+  observer, disposes every geometry and material it made, disposes the
+  renderer, and removes the canvas from its host.
+- **The viewport sizes to its host**, not the window: a `div` with a fixed
+  aspect (`aspect-video w-full rounded-lg overflow-hidden`) inside a Card, a
+  resize handler that updates the renderer size and the camera aspect, and
+  `setPixelRatio(Math.min(window.devicePixelRatio, 2))`.
+- **The hello is one lit object**: a `BoxGeometry` with a
+  `MeshStandardMaterial` under a hemisphere light and a directional light,
+  turning on a clock delta. Standard materials need light; the draft always
+  ships both.
+- **The page is complete around it**: title, a sentence of friendly copy, the
+  Card, and a control row of Buttons whose choice saves to the seeded
+  Fireproof document and shows up in the scene on the next frame.
+- **What waits for the next pass** is named in the `TODO(next pass)` comment
+  and the draft note: models, controls, textures, particles, physics. The
+  draft draws none of it and imports nothing beyond `three` itself.

package/llms/three-js.js

@@ -3,6 +3,7 @@ export const threeJsConfig = {
     label: "Three.js",
     description: "Three.js 3D graphics library for WebGL rendering: mesh geometry, materials, lighting, animation, cameras, textures, GLSL shaders, GLTF/OBJ/FBX model loading, physics, particle systems, post-processing, visual effects, 3js",
     cues: ["3d", "three.js", "threejs", "3js", "webgl", "shader", "shaders", "mesh", "gltf", "3d model", "3d scene"],
+    draftVariant: true,
     importModule: "three",
     importName: "THREE",
     importType: "namespace",

package/llms/three-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"three-js.js","sourceRoot":"","sources":["../../jsr/llms/three-js.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,WAAW,EACT,+NAA+N;IACjO,IAAI,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC;IAChH,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}
+{"version":3,"file":"three-js.js","sourceRoot":"","sources":["../../jsr/llms/three-js.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,WAAW,EACT,+NAA+N;IACjO,IAAI,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC;IAGhH,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/llms/voxel.draft.md

@@ -1,12 +1,17 @@
-# Voxel worlds — the first draft: a viewport that plays
-
-A voxel app's first draft is a full-screen 3D viewport with a block world you
-can fly through and look around, drawn the fast way, with the HUD floating over
-it. Placing and breaking blocks, walking with collision, endless terrain,
-saving edits and sharing the world are the next pass. What the draft owes that
-pass is the right skeleton: the world lives in a flat `Map`, the terrain is
-drawn as one `InstancedMesh`, and the engine is built once inside an effect —
-so the next pass adds to this file rather than rewriting it.
+# 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.
@@ -16,54 +21,36 @@ viewport is `fixed inset-0` and the controls sit on top of it.
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import * as THREE from "three";
-import { Button, Card, CardHeader, CardTitle, CardContent } from "@vibes.diy/look";
+import { Button, Badge } from "@vibes.diy/look";
 
-// The block-in-hand palette (shared by materials and HUD swatches).
+// 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"];
-const GAME_KEYS = new Set(["KeyW", "KeyA", "KeyS", "KeyD", "KeyC", "Space", "ShiftLeft"]);
-const SIZE = 24; // half-width of the starting island, in blocks
-const SEED = 7;
-
-const keyOf = (x, y, z) => `${x}|${y}|${z}`;
-const heightAt = (x, z) => Math.round(Math.sin((x + SEED) * 0.18) * 2 + Math.cos((z - SEED) * 0.15) * 2 + Math.sin((x + z) * 0.06) * 3) + 5;
-
-// The world model: every block, buried or not. Collision and picking read this, never the scene.
-function buildBlocks() {
-  const blocks = new Map();
-  for (let x = -SIZE; x <= SIZE; x++)
-    for (let z = -SIZE; z <= SIZE; z++) {
-      const h = heightAt(x, z);
-      for (let y = 0; y <= h; y++) blocks.set(keyOf(x, y, z), y === h ? "grass" : y > h - 3 ? "dirt" : "stone");
+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);
     }
-  return blocks;
-}
-
-const NB = [[1, 0, 0], [-1, 0, 0], [0, 1, 0], [0, -1, 0], [0, 0, 1], [0, 0, -1]];
-const isHidden = (blocks, x, y, z) => NB.every(([dx, dy, dz]) => blocks.has(keyOf(x + dx, y + dy, z + dz)));
-
-// One shared cube, one shared material, one draw call: the exposed blocks as instances with a color each.
-const CUBE = new THREE.BoxGeometry(1, 1, 1);
-const WORLD_MAT = new THREE.MeshLambertMaterial({ color: 0xffffff });
-function buildWorldMesh(blocks) {
-  const visible = [];
-  for (const [k, type] of blocks) {
-    const [x, y, z] = k.split("|").map(Number);
-    if (!isHidden(blocks, x, y, z)) visible.push([x, y, z, type]);
-  }
-  const mesh = new THREE.InstancedMesh(CUBE, WORLD_MAT, visible.length);
-  const m = new THREE.Matrix4();
-  const c = new THREE.Color();
-  visible.forEach(([x, y, z, type], i) => {
-    mesh.setMatrixAt(i, m.makeTranslation(x + 0.5, y + 0.5, z + 0.5));
-    mesh.setColorAt(i, c.set(VOXEL_PALETTE[type]));
-  });
-  mesh.instanceMatrix.needsUpdate = true;
-  mesh.instanceColor.needsUpdate = true;
-  return mesh;
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.magFilter = THREE.NearestFilter;
+  texture.minFilter = THREE.NearestFilter;
+  texture.colorSpace = THREE.SRGBColorSpace;
+  return texture;
 }
 
 export default function App() {
@@ -71,11 +58,9 @@ export default function App() {
   const { docs: worlds } = useLiveQuery("type", { key: "world" });
   const world = worlds[0];
   const mountRef = useRef(null);
-  const engineRef = useRef(null);
-  const [locked, setLocked] = useState(false);
   const [held, setHeld] = useState(HOTBAR[0]);
 
-  // The engine, built once: renderer, scene, world mesh, input, loop. React only draws the HUD over it.
+  // 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 });
@@ -84,85 +69,60 @@ export default function App() {
     mount.appendChild(renderer.domElement);
 
     const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x8ecbff);
-    scene.fog = new THREE.Fog(0x8ecbff, 40, 140);
-    const camera = new THREE.PerspectiveCamera(75, mount.clientWidth / mount.clientHeight, 0.1, 500);
+    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);
-    sun.position.set(30, 60, 20);
+    const sun = new THREE.DirectionalLight(0xffffff, 1.2);
+    sun.position.set(4, 8, 5);
     scene.add(sun);
 
-    const blocks = buildBlocks();
-    const worldMesh = buildWorldMesh(blocks);
-    scene.add(worldMesh);
-
-    const state = { pos: new THREE.Vector3(0, heightAt(0, 0) + 3, 8), yaw: 0, pitch: -0.2, keys: {}, running: true };
-    const canvas = renderer.domElement;
-    const onLock = () => setLocked(document.pointerLockElement === canvas);
-    const onMove = (e) => {
-      if (document.pointerLockElement !== canvas) return;
-      state.yaw -= e.movementX * 0.002;
-      state.pitch = Math.max(-1.5, Math.min(1.5, state.pitch - e.movementY * 0.002));
-    };
-    const onKeyDown = (e) => {
-      if (document.pointerLockElement !== canvas) return; // only while the world holds the mouse
-      if (e.target.isContentEditable || e.target.closest("input, textarea")) return; // typing stays typing
-      if (!GAME_KEYS.has(e.code)) return; // browser shortcuts stay browser shortcuts
-      state.keys[e.code] = true;
-      e.preventDefault(); // Space flies up, never scrolls the page
-    };
-    const onKeyUp = (e) => {
-      state.keys[e.code] = false;
-    };
-    const onBlur = () => { state.keys = {}; };
+    // 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();
     };
-    document.addEventListener("pointerlockchange", onLock);
-    document.addEventListener("mousemove", onMove);
-    window.addEventListener("keydown", onKeyDown);
-    window.addEventListener("keyup", onKeyUp);
-    window.addEventListener("blur", onBlur);
     window.addEventListener("resize", onResize);
-    engineRef.current = { requestLock: () => canvas.requestPointerLock() };
 
     const clock = new THREE.Clock();
-    const forward = new THREE.Vector3();
-    const right = new THREE.Vector3();
     let raf;
     const loop = () => {
-      if (!state.running) return;
-      const dt = Math.min(clock.getDelta(), 0.05);
-      const speed = (state.keys.ShiftLeft ? 18 : 9) * dt;
-      forward.set(-Math.sin(state.yaw), 0, -Math.cos(state.yaw));
-      right.set(forward.z, 0, -forward.x);
-      if (state.keys.KeyW) state.pos.addScaledVector(forward, speed);
-      if (state.keys.KeyS) state.pos.addScaledVector(forward, -speed);
-      if (state.keys.KeyD) state.pos.addScaledVector(right, speed);
-      if (state.keys.KeyA) state.pos.addScaledVector(right, -speed);
-      if (state.keys.Space) state.pos.y += speed;
-      if (state.keys.KeyC) state.pos.y -= speed;
-      camera.position.copy(state.pos);
-      camera.rotation.set(state.pitch, state.yaw, 0, "YXZ");
+      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 () => {
-      state.running = false;
       cancelAnimationFrame(raf);
-      document.removeEventListener("pointerlockchange", onLock);
-      document.removeEventListener("mousemove", onMove);
-      window.removeEventListener("keydown", onKeyDown);
-      window.removeEventListener("keyup", onKeyUp);
-      window.removeEventListener("blur", onBlur);
       window.removeEventListener("resize", onResize);
-      worldMesh.dispose();
+      Object.values(textures).forEach((t) => t.dispose());
+      materials.forEach((m) => m.dispose());
+      blocks.dispose();
+      cube.dispose();
       renderer.dispose();
-      mount.removeChild(canvas);
+      mount.removeChild(renderer.domElement);
     };
   }, []);
 
@@ -172,32 +132,21 @@ export default function App() {
 
       <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">WASD fly · Space up · C down · Shift fast</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)}
-            style={{ backgroundColor: type === held ? VOXEL_PALETTE[type] : undefined }}>
+            aria-label={type}>
+            <span className="inline-block h-4 w-4 rounded-sm" style={{ backgroundColor: VOXEL_PALETTE[type] }} />
             {type}
           </Button>
         ))}
       </div>
-      {/* TODO(next pass): place and break the held block with a voxel raycast, walk with gravity and collision, save edits as documents */}
-
-      {!locked && (
-        <button onClick={() => engineRef.current?.requestLock()} className="absolute inset-0 z-20 flex items-center justify-center bg-black/55">
-          <Card className="max-w-sm">
-            <CardHeader>
-              <CardTitle>{world?.name ?? "Sky Island"}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p>Click to play</p>
-              <p className="mt-2 text-muted-foreground">Mouse looks around. Esc gives the mouse back.</p>
-            </CardContent>
-          </Card>
-        </button>
-      )}
+      {/* 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>
   );
 }
@@ -212,7 +161,7 @@ export default function App() {
 }
 ```
 
-Draft note: the next pass adds placing and breaking blocks, walking with gravity and collision, saved edits per player, and inviting friends into the world.
+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
 
@@ -221,24 +170,27 @@ Draft note: the next pass adds placing and breaking blocks, walking with gravity
   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, world mesh, listeners and loop inside it, `engineRef.current` for the few calls
-  React makes in, and a cleanup that stops the loop, removes every listener
-  and disposes the mesh and renderer. Per-frame values live in the `state`
-  object, never in React state.
+  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, and a `Fog` that
-  matches the sky color.
-- **The world is a flat `Map` keyed `"x|y|z"`**, and it is drawn as ONE
-  `InstancedMesh` of the exposed blocks with one shared `BoxGeometry` and one
-  shared material, the color per instance. 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 `pointerlockchange` state, so it returns when the player presses
-  Esc. Mouse look clamps pitch to ±1.5 rad. A keydown calls `preventDefault`
-  only when the canvas holds the lock, the target is not a text field, and the
-  key is in the game's own set; held keys clear on blur.
+  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 both the instance colors and the HUD swatches.
+  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: placing and breaking, collision and gravity, endless
-  terrain, saving edits, sharing. The draft draws none of it.
+  and the draft note: terrain, placing and breaking, walking, saving edits,
+  sharing. The draft draws none of it.