Create Galton Cascade Three.js Demo

The task says "Wake up and do as you please." The previous execution created demo 030-morphogenesis. My purpose is to create cool Three.js demos in /space/demos/. So I should create a new demo (031) and update the index.

Let me first check the current state of the demos folder to see what exists, then brainstorm a new demo concept.

Let me install shell tools and explore.

Let me look at the current demos folder to see what's there.

The demos folder has 30 demos. The task is "Wake up and do as you please." Given my purpose, I should create demo 031. Let me look at the existing demos to understand the style and see what concepts have been covered, so I can pick something fresh.

Existing demos:

1. 001-spinning-cube - basic cube
2. 002-nebula-galaxy - particle galaxy
3. 003-mandelbulb-explorer - fractal raymarching
4. 004-fluid-dynamics - fluid sim
5. 005-gravity-sandbox - n-body gravity
6. 006-event-horizon - black hole
7. 007-sonic-reactor - audio visualizer
8. 008-void-runner - game (runner)
9. 009-azure-odyssey - ?
10. 010-abyssal-bloom - deep sea
11. 011-physarum-garden - slime mold
12. 012-powder-alchemy - falling sand
13. 013-clockwork-nebula - gears/clockwork
14. 014-neon-rain - matrix-style rain?
15. 015-aurora-borealis - aurora
16. 016-skitter - creatures
17. 017-coral-resonance - coral growth
18. 018-threshold - ?
19. 019-attractorium - strange attractors
20. 020-murmuration - flocking
21. 021-terraforge - terrain
22. 022-cloudsea - clouds
23. 023-frostline - frost/ice crystal growth
24. 024-koi-pond - koi fish pond
25. 025-ferrofluid - ferrofluid
26. 026-synchrony - synchronization (Kuramoto?)
27. 027-cymatics - cymatics (sound patterns)
28. 028-teslasphere - tesla coils/electric
29. 029-pyrosymphony - fire
30. 030-morphogenesis - reaction-diffusion

Let me check the index.html to see descriptions, and maybe peek at a recent demo to match style conventions.

Let me look at the index.html structure to see how cards are formatted.

*******************************************************************************************************************************************************************************************************************************************er.

Now I understand the conventions. The task is "Wake up and do as you please." Given my purpose, I'll create demo 031 with a fresh concept.

Let me brainstorm concepts not yet covered:

• Covered: galaxy, fractals (mandelbulb), fluid, gravity, black hole, audio viz, runner game, ocean(?), deep sea bloom, physarum, falling sand, clockwork, neon rain, aurora, skitter creatures, coral, threshold (?), attractors, murmuration (boids), terrain, clouds, frost, koi pond, ferrofluid, synchrony (Kuramoto), cymatics, tesla plasma, fireworks, reaction-diffusion.

Fresh ideas:

1. Cloth simulation / fabric — interactive cloth with wind, tearing. Not done yet.
2. Spider web / silk weaving — procedural web with physics.
3. Origami / paper folding — hard.
4. Rube Goldberg / marble run — physics game.
5. Double pendulum chaos gallery — chaotic pendulums with trails. Physics + chaos, beautiful.
6. Wave interference / ripple tank — 2D wave equation sim with interference, interactive sources. Not covered explicitly (cymatics is Chladni, fluid dynamics is navier-stokes). A ripple tank with wave equation, interference/diffraction, could be nice but maybe too close to cymatics.
7. L-system / procedural tree garden — growing trees, seasons. Not covered (coral is similar-ish but different).
8. Volumetric nebula raymarching — covered-ish by nebula galaxy.
9. Hyperbolic geometry / Escher — trippy.
10. Magnetic field lines / plasma torus — covered-ish by ferrofluid/tesla.
11. Cloth + soft body flag —
12. Kaleidoscope / mandala generator —
13. Marble/maze tilt game — a 3D labyrinth ball game with physics. Fun!
14. Space elevator / orbital mechanics sim — gravity sandbox covered.
15. Lightning storm clouds — tesla covered.
16. Bioluminescent tide / waves —
17. Double pendulum — "Chaospendulum" — a hall of double pendulums with glowing trails, showing sensitivity to initial conditions. Interactive: drag bobs, spawn pendulums, trace trails with fading phosphor. Beautiful with bloom. Physics: symplectic Euler or RK4.
18. Ink in water (Eulerian dye) — fluid covered.
19. Voronoi shatter / fracture — click to shatter glass panels in slow motion. Fun and visual.
20. Dune / sand ripple wind sim —
21. Fireflies in a jar / forest — swarm with light. Murmuration-ish but different vibe: firefly synchronization — covered by synchrony (which was Kuramoto fireflies? Let me check 026-synchrony description).
22. Rope/chain physics bridge — verlet ropes, interactive.
23. Kinetic sculpture / mobile (Calder) — balanced mobiles with physics, gentle rotation. Elegant!
24. Tensegrity —
25. Watercolor / ink marbling (suminagashi) —
26. 3D maze game with portal rendering —
27. Ant colony simulation — physarum covered similar.
28. Raymarched metaballs / lava lamp — metaballs raymarching with gooey blobs, interactive. Fun and pretty.
29. Galton board / plinko — physics, statistics visualization — a giant Galton board with thousands of balls, showing binomial distribution emerge. Interactive: adjust peg layout, drop rate, probabilities. Educational + beautiful. Physics via simple custom engine or cannon-es.
30. Pendulum wave machine — the classic pendulum wave (15 pendulums with slightly different periods creating mesmerizing patterns). Combined with double pendulums? Pendulum wave is beautiful and not covered. Could do a "Pendulum Wave" kinetic sculpture with glowing bobs, trails, bloom, audio ticks. But maybe too simple alone — combine pendulum wave + harmonograph?

Let me check what 026-synchrony was to avoid overlap.

Actually, let me think about what would be most impressive and distinct:

Option A: "Galton Cascade" — a giant kinetic Galton board machine. Thousands of glowing balls rain through peg fields, forming a live bell curve histogram. Custom 2D physics (circle vs peg) is easy and fast. Interactive: tilt gravity, change peg spacing/randomness, drop single balls, "quantum" mode with pegs as spinners. The emergent Gaussian is beautiful. Add bloom, audio plinks per peg hit (pentatonic based on x position → musical!), histogram bars glowing. This is like a "probability machine". Very charming, distinct from all previous. Physics is simple circle-peg collisions, can handle 2-4k balls at 60fps in JS easily.

Option B: "Pendulum Choir / Chaos Pendulums" — double pendulum art.

Option C: "Cloth & Wind" — verlet cloth flags/sails, tearing.

Option D: "Marble run / kinetic sculpture".

Option E: "Ripple tank interference" — wave equation with double-slit etc. Very pretty but close to cymatics/fluid.

Option F: "Lava lamp raymarched metaballs" — pretty.

Option G: "Spider web" — procedural web + verlet physics + dew drops. Very pretty and distinct! Interactive: pluck strands, wind, a spider? Dew drops refracting. Hmm, complex to make robust.

Option H: "Harmonograph table" — a sand harmonograph: pendulum-driven drawing machine creating Lissajous-like curves in sand, with glowing trails. Elegant, generative art. Interactive: adjust pendulum frequencies/phases/damping, rotary table. Beautiful trails with fade. Audio: soft tones matching frequencies. This is quite distinct and gorgeous with bloom. Plus a "gallery" of classic figures.

I think the Galton board ("Galton Cascade" / "The Probability Engine") is a strong choice: it's a kinetic sculpture + statistics visualization + musical (each peg hit plays a note; x-position maps to pitch → the Gaussian becomes audible as a melody distribution). It's interactive (tilt, peg density, drop modes), has thousands of physics balls, glowing histogram, bloom, and is educational. Nothing like it in the collection.

Alternatively the harmonograph is more "art". But Galton board has more interactive/game feel and physics wow.

Let me also consider "Plinko/Pachinko" — same family as Galton. A Galton board with pachinko aesthetics: neon, multi-ball, score zones... could gamify: bet on bins? Keep it as a beautiful "probability machine" with musical pegs.

Let me design "031 — Galton Cascade: The Probability Engine":

Concept: A towering glass-and-brass Galton board (bean machine) in a dark gallery. Glowing balls (up to ~3000) rain from a hopper through a triangular peg lattice, plinking musical notes, and stack into bins forming a live Gaussian. A live histogram overlay (theoretical normal curve drawn as a glowing line vs actual counts).

Features:

• Custom 2D physics engine (balls as circles, pegs as static circles, walls, bins). Spatial hash grid for ball-ball collisions (optional; could skip ball-ball for perf but stacking in bins needs ball-ball or a bin-fill trick). Hmm — stacking: real Galton boards stack balls in bins. Ball-ball collision with spatial hashing for 3000 balls is doable (each ball checks few neighbors). Radius small (~3-4 px equivalent). Let me include ball-ball collisions with a spatial grid, substeps. That's the meaty part but doable.
• Alternative simpler approach: treat balls in bins with "deposit" logic — when ball enters bin region and falls below stack height, it settles. But real stacking looks better. I'll do proper circle physics with a spatial hash; 2000-3000 balls at 60fps with 2-3 substeps should be OK in optimized JS (typed arrays). Let me be careful with performance: use Float32Array SoA, grid buckets as arrays of indices rebuilt each step.
• Pegs: triangular lattice, rows configurable (8-16). Ball deflects off pegs; add slight randomness (micro-jitter) to emulate chaos. Actually with deterministic physics, the entry point variance gives the distribution; add tiny random angular jitter on peg collision to ensure nice Gaussian.
• Musical: each peg collision triggers a note; pitch mapped to peg's x position (pentatonic scale across the board width), velocity by impact speed. Polyphonic plinks with WebAudio (Karplus-Strong-ish pluck or simple decaying sine+triangle). Volume limiter/voice pool.
• Histogram: bins at bottom; draw counts as glowing bars (instanced boxes or shader bars) + overlay theoretical normal curve (glowing line). Show live stats: count, mean, standard deviation, skewness, and a χ²-ish "Gaussian fit" meter.
• Modes/presets:
  • "Classic" symmetric board.
  • "Skewed" — pegs slightly biased (each peg has a probability bias to push left/right) → skewed distribution. Implement bias as slight tangential impulse direction preference.
  • "Bimodal" — a splitter peg near top forces balls into two lobes (e.g., a wedge that splits flow into two sub-boards) → bimodal distribution. Implement via a physical wedge/funnel geometry.
  • "Chaos" — pegs become spinners? Or bumpers that add random kicks → wider/flat distribution. Maybe "Turbulent": random air jets.
  • Maybe "Galaxy" mode? Keep 3-4 board presets: Classic / Skewed / Bimodal / Turbulent.
• Interactions:
  • Drag to orbit; scroll zoom.
  • Click "Drop" / hold to stream; auto-drop toggle with rate slider.
  • Slider: number of rows (board density), ball size?, tilt (gravity angle ±15° — fun: tilt the whole board, distribution shifts).
  • Button: "Sweep" — clear balls (a sweeper bar pushes balls out? simpler: balls fade and recycle).
  • Pointer: click on board to drop a burst at that x position? Or move a deflector. Maybe: click-drag on the hopper to position the drop point. Nice: draggable hopper.
• Visuals: dark gallery, glass panels (transparent), brass/metal pegs (instanced cylinders with emissive rim when hit — flash on hit!), balls as instanced spheres with emissive gradient by speed or by bin index (color map across x → rainbow-ish? or single accent with hot white when fast). Peg hit flashes: instanced peg color attribute updated on hit, decays. Beautiful!
• Floor: reflective dark floor (simple env or fake reflection: mirrored instanced spheres with low opacity? Could use a Reflector but adds cost; maybe just a glossy floor with roughness via env map). Keep simple: dark floor + contact glow.
• Post: UnrealBloom + grade pass (vignette/grain) consistent with previous demos.
• HUD: title, stats (balls dropped, in flight, mean μ, σ, fit %), controls panel, help overlay, toast on preset change.
• Adaptive quality tiers: ball count cap, bloom on/off, pixel ratio.
• Snapshots (PNG), keyboard shortcuts, touch support.

Physics details:

• World: 2D (x right, y up) mapped into 3D scene on a vertical plane (board standing upright, slight depth for visuals). Balls are spheres at z≈0 within a glass case of small depth; we can add tiny z jitter for visual richness but keep physics 2D. Actually to make it prettier, give balls slight z variation and render with depth; collisions still 2D. Glass case: two transparent planes front/back.
• Board dimensions: width W=20 units, height H=30. Peg spacing ~1.6. Rows up to 16. Ball radius ~0.32, peg radius ~0.28. Bins: vertical dividers below last row.
• Gravity: g = -30 units/s² (tuned). Substeps: 2-4 per frame with dt clamp.
• Collisions:
  • Ball vs peg: circle-circle; resolve: push out along normal, reflect velocity component with restitution ~0.35, plus tangential friction slight; add small random jitter to normal angle (±3°) for organic randomness; register hit event (flash + note) if impact speed > threshold.
  • Ball vs walls (left/right case, angled funnel walls at top, bin dividers): segment collision — closest point on segment, push out, reflect.
  • Ball vs ball: spatial hash; elastic-ish with restitution 0.2, positional correction split.
  • Settling: when ball speed < eps and inside bin region, mark sleeping (skip integration, still rendered). Wake if neighbor moves? Simpler: keep simulating all balls but with damping; with thousands resting in bins, ball-ball grid still costs. Sleep optimization: if speed < 0.5 for a while, set sleep flag; skip in integration; in grid collisions, sleeping balls act as static. Wake when hit by a moving ball with enough impulse. That keeps perf fine.
• Recycling: cap N balls (e.g., 2600). When bins overflow beyond cap, oldest sleeping balls in the fullest bin fade out (scale down) and recycle to hopper. Or a "sweeper" clears all. Implement ring-buffer recycling: when spawn needed and at cap, take oldest sleeping ball.

Audio:

• Pentatonic plink per peg hit: scale across x (e.g., C major pentatonic over 3 octaves). Voice pool of ~24 plucks: osc (triangle) + short exp decay + slight detune + a bandpass "wood" resonance. Master with limiter (DynamicsCompressor) and a gentle reverb (ConvolverNode with generated impulse) — previous demos likely did similar; keep consistent.
• Ambient: soft pad/noise bed? Maybe a low airy hum + room tone. Subtle.
• UI sounds: preset chime.
• Mute toggle (M), audio starts on first gesture.

Rendering:

• InstancedMesh for balls (sphere geometry low poly, MeshStandardMaterial with emissive; per-instance color via instanceColor; per-instance emissive intensity not directly supported — use instanceColor as emissive by using MeshBasicMaterial? Better: custom shader material for balls: color by speed (cool→hot), fresnel rim, fake lighting. A custom ShaderMaterial with instancing is fine and fast, looks glowy with bloom.)
  • Simpler: MeshStandardMaterial + instanceColor and rely on bloom for glow; emissive can't vary per instance easily. Use custom shader: compute simple lambert + fresnel + emissive = baseColor * (0.35 + speedGlow). I'll write a compact custom shader.
• Pegs: InstancedMesh of small cylinders (or spheres) with per-instance flash color (instanceColor updated on hit, decays each frame). Metal material standard.
• Bins/dividers: thin boxes, glass material (MeshPhysicalMaterial transmission is expensive; use MeshStandardMaterial transparent opacity 0.15 + depthWrite false). Frame: brass bars.
• Histogram overlay: a glowing line (THREE.Line with shader) showing theoretical normal scaled to counts; bars: maybe skip 3D bars since actual balls form the histogram; but a "ghost curve" floating above bins is a great touch. Draw normal PDF curve scaled by total dropped and bin width, updated per second. Also show μ/σ text in HUD.
• Backdrop: dark gallery wall with subtle vignette; a soft spotlight; dust motes (consistent with other demos).
• Floor: dark reflective — use a large plane with MeshStandardMaterial metalness 0.9 roughness 0.4 + env map; or add a cheap planar reflection of just the balls? Skip reflector; use env map (RoomEnvironment) for nice metal.

Structure the code like previous demos: single index.html, import map three@0.170.0, OrbitControls, EffectComposer/UnrealBloomPass, custom grade pass, RoomEnvironment.

UI: consistent panel style. Controls: preset buttons (Classic/Skewed/Bimodal/Turbulent), sliders: Rows (8–16), Drop rate, Tilt (−12°..12°), buttons: Drop Burst, Sweep, Audio, Snapshot, Help. Stats: dropped, in flight, μ, σ, fit. Toast for presets. Help overlay listing shortcuts.

Keyboard: Space = toggle stream, B = burst, C = sweep, 1-4 presets, T = tilt reset? , M mute, H help, S snapshot, R rotate? Keep a tidy set.

Adaptive quality: measure FPS; tiers High/Med/Low: ball cap 2600/1600/900, bloom on/on/off, pixelRatio min(dpr,2)/1.5/1.

Now, about the "fit" metric: compute chi-square-ish normalized error between bin counts and expected normal with same μ,σ,N → display as "Gaussian fit %" = 100 * (1 - min(1, err)). Fun.

Bimodal implementation: physical wedge — a triangle obstacle above center that splits the flow into two channels, each feeding half the board; resulting distribution bimodal. Simple: add a "splitter" segment pair (an inverted V) near the top plus a central divider extending down a few rows. Balls funnel left or right around it. Should produce two humps.

Skewed: give each peg a hidden bias b (e.g., 0.56 probability to deflect right): implement as after collision, add small tangential velocity kick in a preferred direction (or bias the random jitter asymmetric). Simplest: on peg hit, add kick vx += bias * k. With bias slider? Preset sets bias = +0.8 (right skew) — or alternate direction per preset click? Keep one skew preset (right-skewed); maybe clicking again flips direction. Nice touch: Skew button toggles L/R.

Turbulent: random horizontal air jets: every frame, each ball gets vx += noise(x,y,t) * strength; plus maybe swirling. Produces wider/flattened or even uniform-ish distribution. Also visual: faint streak particles to show wind. Keep simple: curl-ish noise force + subtle particle streaks? Might skip particles; add faint fog wisps? Keep scope contained.

Hopper: a funnel at top center that can be dragged left/right (pointer drag on hopper) to change drop x. Also "burst" drops 30 balls spread around hopper x.

Ball color: map x position → hue within a palette (e.g., cyan→magenta across board) so the histogram shows a smooth gradient; speed adds white-hot glow. Palettes: maybe 3 (Prism, Ember, Ice). Could keep one signature look to reduce scope, but palettes are cheap: uniform array of 3 colors or a hue range. I'll add 3 palettes cycling with P.

Scope check: This is a big build (~1300-1600 lines). Previous demos were ~50K files (1200+ lines). Fine.

Performance plan for physics with up to 2600 balls:

• SoA Float32Arrays: x, y, vx, vy, r(=const), sleep timer, state.
• Grid: cell size = 2ballDiameter; hash into Int32 buckets via head/next linked list arrays (classic): head[gridWgridH] Int32Array, next[N] Int32Array. Rebuild each substep. Collisions: for each ball, check 3x3 cells, pairs i<j.
• Peg collision: pegs also inserted into a static grid once (or just compute row range: pegs are in a lattice; for each ball, find nearby pegs via the same grid approach with a separate static grid). Simpler: static peg grid using same cell size; query 2x2 cells.
• Segments (walls, dividers, funnel, splitter): few dozen; check ball vs each segment with early AABB reject. Dividers ~ bins count (rows+1 ~ 17), walls ~6, splitter ~3. ~26 segments * 2600 balls * substeps(2) = 135k segment checks/frame — fine with cheap reject.
• Peg count: rows 16 → ~136 pegs. Ball-peg via grid: cheap.
• Ball-ball: 2600 balls, each ~9 cells query — typical few neighbors; fine.

Sleeping: balls asleep act as static obstacles (still in grid, pairs with awake balls resolved by moving only the awake one). Sleep when |v| < 0.6 and in bin area (y below last peg row) for > 0.5s. Wake on contact impulse > threshold. Also cap awake count.

Recycling: if at cap and stream on: recycle oldest asleep ball from the most populated bin (or the globally oldest asleep). Fade-out animation: scale down over 0.25s then teleport to hopper. Implement per-ball state: 0=flying,1=sleeping,2=dying,3=spawning(drop-in animation scale up). Scale in instance matrix.

Histogram curve: compute bin counts from sleeping+resting balls (count balls whose y < binTopY by x bin). Theoretical normal: N_total * binWidth * pdf(x; μ, σ) with μ,σ from board geometry (or measured). Draw as Line2? Simple THREE.Line with BufferGeometry updated each 0.25s, additive material, glow via bloom. Position curve slightly in front (z = +0.9) so it floats over the balls.

Also a subtle grid/backwall with faint dots? A dark back panel with soft radial glow behind the board for depth.

Camera: slight perspective, board centered, orbit limited (min/max polar, distance limits). Board tilted slightly? Keep vertical.

Tilt: rotate gravity vector AND the whole board visually? Real tilt: rotate board group by angle θ and set gravity along -y of board frame; physics computed in board-local frame — since physics is 2D in board space, just rotate the group; gravity stays (0,-g) in local space; visually the board tilts. Balls then pile skewed — correct! Because in board frame gravity unchanged... wait, if the board tilts but gravity in board frame stays -y, that's wrong: tilting the board shouldn't change physics in world frame; in board frame gravity becomes (g sinθ, -g cosθ). So: rotate group by θ AND set local gravity = (g sinθ, -g cosθ). Then balls drift toward the lower side — distribution shifts.

Bin overflow: if a bin fills above bin height, balls spill over dividers into neighbors — emergent and fine; recycling keeps cap.

Spawning: hopper at top; spawn with small random x jitter, vy=0, brief scale-in.

Edge cases: balls escaping (tunneling) — clamp within case AABB each substep; if y < floorY, collide floor inside bins (bin floor is the case floor). Max speed clamp.

Audio reverb: generate impulse response buffer (2s decaying noise) — cheap convolver. Voice pool plucks.

OK also need consistent "grade" pass: previous demos used a custom ShaderPass with vignette/grain/chromatic aberration. I'll write a compact version.

Let me also double check three@0.170.0 addons paths:

• three/addons/controls/OrbitControls.js
• three/addons/postprocessing/EffectComposer.js, RenderPass.js, UnrealBloomPass.js, ShaderPass.js, OutputPass.js
• three/addons/environments/RoomEnvironment.js

With r170, OutputPass handles tone mapping/color space. Use composer with RenderPass → UnrealBloom → gradePass (custom, operates in linear? Previous demos likely did bloom then grade then OutputPass). I'll do RenderPass → Bloom → OutputPass → Grade (grade after output for vignette/grain in sRGB space — simpler and fine).

Actually order: RenderPass renders linear HDR; UnrealBloom adds; OutputPass applies tone mapping + sRGB; then a grade ShaderPass with vignette/grain works in display space — acceptable and common in these demos.

Physics tuning (board units):

• Board: width 22 (x ∈ [-11, 11]), height: floor y=0, top y=34.
• Peg rows: R rows (default 12), vertical spacing sy=1.9, horizontal spacing sx=2.0. Row i (0=top) has pegs offset alternately: x = (j - count/2 + 0.5*(i%2)) * sx... Standard Galton: row i has pegs at x = (k - i/2) * sx for k=0..i? That's triangular expansion. Alternative: full lattice within fixed width: row i pegs at x positions spanning [-W/2+margin, W/2-margin], count = floor(width/sx), offset by half spacing on odd rows. Fixed-width lattice is easier and bins below align. I'll do fixed-width lattice: nx = 11 columns (x from -10..10 step 2), rows alternate offset by 1.0 (half sx) with 10 pegs on odd rows. Ball diameter ~0.62, peg radius 0.22, gap between pegs 2.0 - 2*0.22 = 1.56 > ball diameter 0.62 ✓.
• Bins: vertical dividers from y=0 to y=3.2, at x = -10, -8, ..., 10 aligned so each bin sits under a "valley" of the lattice. With sx=2, bins of width 2 → 10 bins (or 11). Ball radius 0.31 fits.
• Hopper at y≈33, funnel walls guiding to drop gap ~1.2 wide.
• Gravity 34; restitution peg 0.32; air drag 0.12/s; jitter on peg hit: rotate normal by rand*±0.05 rad + tangential kick rand ±0.25.
• Max ball speed clamp 40.

Ball count cap by tier: 2400/1500/800. Spawn rate slider 5..60/s. Burst 40.

Bin counting: binIndex = clamp(floor((x + 11) / 2), 0, 10) for balls with y < 3.4. Count each frame cheaply (or every 0.2s).

Normal curve: μ measured = weighted mean of bin centers, σ measured; curve y = A * exp(-(x-μ)²/(2σ²)), A = maxCount expected = NbinW/(σ√2π). Scale to scene: curve drawn at y = count * ballAreaPerCount? The visual stack height per count isn't linear (balls pack ~ hexagonally). Simpler: normalize curve peak to the tallest bin's stack height estimate: stackHeight(binCount) ≈ binCount * (π r² / (packing * binW)) → height per ball ≈ (π0.31²)/(0.85*2.0) ≈ 0.178 units/ball. So curve y(x) = expectedCount(x) * 0.178 * overlapFudge. I'll calibrate with a fudge factor uniform (0.9). Good enough visually; label it "expected curve".

Alternatively draw the curve in "count space" floating above as its own graph band? Floating over bins calibrated is cooler.

HUD stats: Dropped total, In flight, μ (bin units), σ, Fit %. Also "Rows", "Balls" maybe in controls.

Toast on preset change: "CLASSIC GAUSSIAN", "SKEWED FLOW", "BIMODAL SPLIT", "TURBULENT DRIFT".

Name: "031-galton-cascade" — title "Galton Cascade". Accent color: amber/gold (#ffc46b) with cyan secondary? Brass + teal gallery. Let me pick accent gold #ffb84d, secondary teal #4dd0e1. Palette options for balls: "Prism" (x→hue rainbow), "Ember", "Glacier".

Let me now also handle "do as you please" — the wake-up task explicitly allows anything; creating demo 031 fits my purpose perfectly.

Plan:

1. Create /space/demos/031-galton-cascade/index.html (the big file).
2. node --check the extracted JS.
3. Update /space/demos/index.html with awk insertion after the marker comment.
4. Verify.

Let me check how 029/030 did the grade pass and audio to stay consistent — maybe quickly skim one file for the composer setup pattern. Let me grep a few snippets from 030 to mirror conventions (import map, OutputPass usage).

Good — I have the conventions. Now let me write the new demo. I'll create /space/demos/031-galton-cascade/index.html.

Let me carefully design and write the full file. I'll write it in one go, then node --check the module script.

Key architecture:

attribute mat4 instanceMatrix; attribute vec3 instanceColor; attribute float aGlow; varying vec3 vColor; varying float vGlow; varying vec3 vNormal; varying vec3 vView; void main(){ vColor = instanceColor; vGlow = aGlow; vec4 mv = modelViewMatrix * instanceMatrix * vec4(position,1.0); vNormal = normalMatrix * mat3(instanceMatrix) * normal; // approx vView = -mv.xyz; gl_Position = projectionMatrix * mv; }

varying... void main(){ vec3 N = normalize(vNormal); vec3 V = normalize(vView); vec3 L = normalize(vec3(0.4, 0.8, 0.6)); float diff = max(dot(N,L), 0.0); float fres = pow(1.0 - max(dot(N,V),0.0), 2.5); vec3 col = vColor * (0.22 + 0.75diff) + vColorfres*0.9 + vec3(1.0,0.95,0.85)*vGlow; gl_FragColor = vec4(col, 1.0); }

const MAXB = 768; const px=new Float32Array(MAXB), py=..., vx, vy, scale, age, st (Uint8), sleepT(Float32), hueBase(Float32); let alive = 0; function spawnBall(x, y){ if(alive>=cap){ recycleOldest(); } i=alive++; ... st=3(spawn) scale from 0.01→1 over 0.15; } recycleOldest(): find sleeping with max age → set st=2 (dying), dieT... but alive-- compaction: when dying finishes, swap-remove index with last alive. Swap-remove complicates "oldest" tracking but fine (age stored per slot).

sub = 3; h = dt/sub (dt clamped ≤ 1/30) for each substep: build grid (balls) integrate awake balls: vx += gxh + turb; vy += gyh; drag: v = (1 - dragh); clamp speed; x += v*h collide walls/segments (awake balls) collide pegs via static grid (awake) ball-ball pairs via grid (awake vs anything; asleep-asleep skip) sleep update: if y < dividersTop+? and speed<0.7 → sleepT+=h else 0; sleepT>0.4 → st=1 (sleeping)

Now writing all of it. I'll be methodical. Physics constants:

Wait — with 16 rows: top row y = 14 + 15*1.9 = 42.5 > topY 41. Adjust: SY=1.85, FIRST_ROW_Y=13.5, 16 rows → 13.5+27.75=41.25. topY = 44, hopper y = 42.6? Let me set: FIRST_ROW_Y = 13.0, SY = 1.8, rows≤16 → top row = 13+27 = 40. Hopper rail y = 42.2, case top 44. Camera target y ~ 20. Board height 44, width 24 — portrait tower, fov 42 at distance ~52 to fit 44 height: fit = (44/2)/tan(21°) ≈ 22/0.383 ≈ 57. Camera (0, 22, 58), target (0, 20.5, 0). OK.

Divider top y = 7.0. Hmax (dissolve) = 11.6 (first row 13, ball r 0.26 → mound below pegs ✓).

Pegs per row: even rows (0,2,4...): x = -11 + k2.2 for k=0..10 → -11..11 (11 pegs). Odd rows: x = -9.9 + k2.2, k=0..9 → 10 pegs. Wait offset should be half spacing: -11+1.1 = -9.9 ✓.

Bins: last row index R-1. If (R-1) even → pegs at even lattice (-11..11) → gaps centered at -9.9.. → bins centered at odd lattice: centers x = -9.9+1.1? Hmm let me think again: balls fall through gaps between pegs. Last row pegs at X_p = {-11, -8.8, ..., 11}. Gaps at midpoints: -9.9, -8.7? midpoint of -11 and -8.8 is -9.9 ✓, then -7.7, ... 9.9 → 10 gaps → 10 bins centered at -9.9, -7.7, ..., 9.9 (spacing 2.2). Dividers at -11, -8.8, ..., 11 (at peg x positions!) plus walls at ±12.1? Dividers aligned under pegs ✓ classic. So bins count = 10, centers odd-ish. If (R-1) odd → pegs at -9.9..9.9 (10 pegs) → gaps at -11? no: midpoints: -8.8? midpoint(-9.9,-7.7) = -8.8 ... plus edges: balls also fall outside outermost pegs (between peg -9.9 and wall) → bins centered at ±11.55? Classic boards have bins under gaps including edges. To keep it simple and symmetric: bins centered at the even lattice points {-11, -8.8, ..., 11} (11 bins) with dividers at odd lattice {-9.9,...,9.9} + walls ±12.1. Edge bins centered ±11 bounded by divider ±9.9 and wall ±12.1: width 2.2 ✓.

So: parity of last row determines bin layout: bins centered on the other lattice. Implement buildBoard(R): peg lattice per row parity; lastRowParity = (R-1)%2; bin centers lattice = parity that last row is NOT... wait: if last row pegs on lattice A (even rows → lattice A = {-11+2.2k}), gaps at lattice B = {-9.9+2.2k} (10 gaps) → bins on lattice B (10 bins), dividers on lattice A. If last row on lattice B (10 pegs) → gaps: midpoints on lattice A interior {-8.8,...,8.8} plus edge gaps near walls at ±(11)? Edge gap center: between peg 9.9 and wall 12.1 → center 11.0 ✓ which is lattice A endpoint! So bins on lattice A (11 bins: -11..11), dividers on lattice B + walls.

So: lastRow lattice L → bins on other lattice; lattice A has 11 pts, B has 10. nbins = 10 or 11 depending. Fine — computed.

μ/σ displayed in "bin units"? Display in board units (x position) — more meaningful: μ ∈ [-11,11], σ in units. Show μ with + sign, σ.

Fit: expected via measured μ,σ (fit of shape). err = Σ|obs−exp|/(2N). fit = clamp(1−err)*100. For classic expect ~95-99; skewed lower vs normal (since compared to normal — that's the point! "Gaussian fit" drops for skewed/bimodal — delightful: the meter tells you how non-Gaussian you've made it).

Audio scale across x: map x∈[-12,12] to 15 notes of A-minor pentatonic spanning A3..A5: degrees [0,3,5,7,10,12,15,17,19,22,24,27,29,31,34]. freq = 220*2^(d/12).

Pluck synth: osc triangle freq f, gain g0=0.0001 → exp ramp to vel0.22 over 0.004 → exp decay 0.28; plus osc sine 2f gain 0.35g same env shorter; through a per-pluck bandpass? Skip bandpass; add master "body": a lowpass 5200 on pluck bus. Reverb send 0.3.

Noise bed: buffer 2s white → loop → lowpass 320 + gain 0.014; LFO 0.07Hz on freq 240..420.

Preset chime: two plucks (tonic, fifth) delayed 90ms.

Voices cap: activeVoices counter, max 30; each pluck onended--.

Master: gain 0.9 → compressor(threshold -18, ratio 6) → destination. Mute: master.gain = 0.

Now the render loop ordering and per-frame updates. Also stats DOM update at 4Hz.

Toast helper: showToast(title, sub) with timer.

Snapshot: flash div opacity animate.

Sweep: for all alive → st=2 (dying) with staggered delay? Dying uses dieT countdown; add per-ball dieDelay = rand*0.25 for sparkle cascade. Implement st=2 with scale decreasing after delay.

Spawn animation: st=3: scale 0→1 over 0.18s then st=0.

State enum: 0 flying, 1 sleeping, 2 dying, 3 spawning. Spawning balls still collide? Make them non-colliding until st=0 (skip in grid: only insert st 0/1). They're at top in gate area, brief — fine.

Dying balls: skip physics, skip grid (others pass through) — fine visually.

Age: age += dt for st 0/1 (for recycle oldest).

Recycle when spawn at cap: find i with st==1 max age → st=2, dieDelay=0. If none, find st==0 max age? skip spawn instead.

Bin overflow dissolve: every 0.2s check: counts per bin (resting only, st==1, py<7.2): if count*H_PER_BALL > Hmax → oldest sleeping in that bin → dying (one per check per bin). H_PER_BALL = 0.12.

Hmm — with flow 22/s and dissolve, equilibrium resting maybe ~500. In-flight ~ flow * fallTime(≈2.2s) ≈ 50 + settling. Fine.

Also cap spawn rate slider 4..60.

Tilt: boardGroup.rotation.z = tiltRad; gravity local as computed; on change wake all sleeping (avalanche). Slider input event → set target tilt; smooth: current tilt lerps to target; if |Δ|>0.0015 wake... waking every frame while lerping — just wake all each frame while |tiltVel|>small. OK.

Camera slight auto-sway? no.

Dust motes: 240 points; positions random in box; per-frame y += small, wrap; additive PointsMaterial size 0.35 opacity 0.5 color accent-ish; subtle.

Backwall glow: canvas radial gradient texture on plane 30x50 at z=-1.0 behind pegs... back panel at z=-0.95 (box depth). Put glow plane at z=-0.9? The case depth: balls at z=0 with sphere r 0.26; glass front z=+0.85, back panel z=-0.85. Peg cylinders length 1.5 centered z=0. Dividers depth 1.5. OK.

Glow texture: 256x256 canvas, radial gradient accent rgba(255,190,94,0.16) → transparent; plane 34x52 additive at z=-0.8.

Frame: 4 brass boxes around case perimeter (top/bottom/sides), plus plinth below (y -1.6..0) dark, plus gallery floor at y=-1.6.

Case walls in physics at x=±12.1? Visual glass at ±12.1? Let physics walls x=±12.0, glass planes slightly outside. Fine: wall segments x=±12.0 from y=0..44; floor y=0 segment -12..12. Ball radius keeps them inside visual case.

Now, code size ~ let's write it. I'll write the whole thing now, carefully. I'll aim for clean, commented code.

Also remember: controls panel needs pointer-events auto; hud/stats none.

Buttons: preset chips with active class.

Let me write the file now. I'll write it in one go with read_write_file_in_shell_environment (write mode). Then extract the module script with sed/awk into /tmp/app.js and run node --check.

Note: node --check on ES module: node --check assumes CommonJS unless .mjs. Use node --check with --input-type=module? node --check file.mjs treats .mjs as module ✓. So write extracted to /tmp/app.mjs and node --check /tmp/app.mjs.

Careful with template literals inside the HTML — fine.

Also careful: in GLSL strings, backticks — the whole script is inside HTML, no nesting issue.

Let me also design the grade pass shader:

OK. Writing now. This will be a large content write. Let me compose the entire file.

Also: help overlay content, toast, flash, and "chips" for palettes.

Keyboard handling: e.code.

One more thing — initial demo state: stream ON at rate 22, preset Classic, rows 12, tilt 0, palette Prism. On load, toast "GALTON CASCADE / the probability engine". Auto first-gesture audio.

Stats panel fields: DROPPED (total), RESTING, IN FLIGHT, μ, σ, GAUSSIAN FIT bar+%.

Alright — writing the file.

Let me also think about the skew implementation more: bias kick on peg hit: vx += bias * (0.6 + rnd0.5) where bias = ±1.1. Over 12 rows → Δx drift ≈ 12 * 1.1 * avg... velocity kick 1.1 per row, between rows fall time ~ sqrt(21.8/34)≈0.32s → drift per row ≈ 0.35 → total ≈ +4 units → visible skew right ✓. Also the kick randomizes → widens one side. Good.

Turbulent: force amplitude 30 vs gravity 34 → strong swirls; distribution flattens/wanders. Also add slight vertical: fy = turb0.4sin(x0.5 - t1.9). Fun.

Bimodal check: entry at ±3.4 onto row0 (y 13? no — splitter must be ABOVE first row). Wait, I placed splitter near top earlier (y 33-37) when board layout had pegs up high. New layout: pegs from y=13 up to 40, hopper at 42.2. Splitter: apex fin at (0, 41.0)-(0, 39.6)?? Balls drop from gate y≈41.9 at x≈hopperX(0)±0.25 → land on fin apex 41.0... too close to gate. Alternative: gate at 42.2, fin from (0,41.6) down to (0,39.8), slopes from (0,39.8) to (±3.6, 37.4). Balls hit fin/slopes, roll to ±3.6 at y≈37.4, then fall onto peg top row (y=40)?! Top row is at y=40 which is ABOVE 37.4 — conflict! The peg field occupies 13..40; the splitter must sit above 40. Slopes ending at y 37.4 would be inside the peg field.

Fix: for bimodal, the two streams must enter at the TOP row. So make the splitter deliver balls to x≈±3.5 at y≈40.5, just above top row: slopes from fin base (0, 42.0)? Gate at 42.2... cramped. Better: raise case: topY=46, gate rail y=44.0. Splitter: fin (0,43.6)-(0,42.2); slopes (0,42.2)-(±3.8,40.4); balls leave slope ends at (±3.8,40.2) with downward velocity, land on top row pegs (y=40) near x ±3.8 ✓. And classic mode: no splitter, balls fall from gate 44.0 onto top row 40 — falls 4 units ✓ fine.

Recompute layout: FIRST_ROW_Y=13, SY=1.8, R≤16 → top row y = 13+15*1.8 = 40 ✓. Case: floor 0, top 46, walls x ±12. Gate rail y=44.2, gate drops at y≈43.6. Divider tops y=7. Hmax=11.6.

Camera: fit height 46: dist ≈ 23.5/0.383 ≈ 61 → camera (0, 23, 62), target (0, 21.5, 0). maxDistance 110, minDistance 20.

Grid bounds: x [-12.6,12.6], y [-0.6, 46.2] → cell 0.9: cols 28, rows 53 → 1484 cells.

Bimodal with R rows: each stream diffuses with σ ≈ sqrt(R)*SX/2... for R=12: σ_stream ≈ sqrt(12)*1.1 ≈ 3.8 around ±3.8 → humps at ≈ ±3.8 with σ 3.8 → heavy overlap (separation 7.6 vs σ 3.8 → ratio 2 → visible double-hump, especially since stream entry x is tight). Should read bimodal-ish; with fewer rows (user can lower) crisper. Good enough — it's a physical simulation, whatever emerges is honest.

Skew direction toggle: preset button "Skewed" — clicking when already active flips bias sign; toast shows "SKEWED →" / "← SKEWED".

Now — writing! Also add subtle peg-row "guide" — no, keep clean.

Ball palettes (base color by x, hue mapping):

• Prism: hue = (x+12)/24 → full spectrum via HSL(h, 0.85, 0.6).
• Ember: deep red → gold: HSL(0.02 + t*0.11, 0.9, 0.5+0.12t).
• Glacier: HSL(0.55 + t*0.12, 0.8, 0.55+0.15t). Compute per ball per frame from current x (so colors flow as balls move — pretty!) — updating 700 colors/frame fine. Base color stored in instanceColor; aGlow from speed: glow = clamp(speed/28) * 0.9 + (st==2 ? pulse) + spawn flash.

Peg flash color: base brass rgb(0.55,0.42,0.22)? For Standard material instanceColor multiplies diffuse... base color white-ish then instanceColor tints: set material color white, metalness 0.85, roughness 0.32; instanceColor = brass * (0.5 + flash2.4) with flash decay. Brass = (0.72, 0.55, 0.30). Flash → (1.7,1.3,0.75)*... values >1 brighten. OK.

Env map: RoomEnvironment via PMREM, scene.environment; envMapIntensity default 1. Metals will look nice.

Lights: ambient 0x223044 0.6? With env map, add one directional for shading warmth: dir (6, 30, 18) intensity 0.7 color #fff2dd. No shadows (perf) — hmm previous demos had shadows sometimes; skip shadows, bloom + env carry the look. Add a subtle fake AO: dark gradient at bottom of back panel? The radial glow handles depth.

OK writing now for real. I'll produce the file content.

Also the index.html card description for 031 — write after.

Let me draft the JS carefully section by section mentally, then write once.

Potential bug areas to double-check while writing:

1. InstancedMesh + ShaderMaterial instanceMatrix attribute — declare attribute mat4 instanceMatrix; — BUT three's WebGLProgram might already define it if... no, for raw ShaderMaterial three does NOT inject; declaring manually is correct. However — three r170 ShaderMaterial: if you declare attribute instanceMatrix and the object isn't instanced → error; ours is. Also instanceColor — renderer binds mesh.instanceColor attribute named 'instanceColor' ✓ (must exist — created via setColorAt before first render).
2. instanceColor needsUpdate each frame.
3. aGlow InstancedBufferAttribute with setUsage(DynamicDrawUsage), needsUpdate.
4. instanceMatrix.setUsage(DynamicDrawUsage).
5. Matrix compose: use a reusable THREE.Matrix4, Quaternion identity, Vector3s. For scale animation use makeScale then setPosition? m.makeScale(s,s,s); m.setPosition(x,y,z) ✓.
6. Swap-remove: copy all per-slot arrays from last to i; alive--.
7. Grid cell clamp.
8. Segment list rebuild on preset/rows change: buildSegments() returns array of [x1,y1,x2,y2,r].
9. Pegs rebuild: positions array; peg InstancedMesh count set; static grid rebuild.
10. Curve: BufferGeometry with 121 vec3, dynamic; line material additive; also maybe a second "fill"? skip. Set frustumCulled false on line & balls & points (since instanced/dynamic bounds) — important! InstancedMesh with default bounding sphere may get culled incorrectly; set mesh.frustumCulled = false. Same for dust points (positions static though — compute bounds fine, but set false anyway).
11. OrbitControls import; damping in loop.
12. Audio: all in functions guarded by ctx existence; init on pointerdown once (and on keydown).
13. Mute: master.gain.value.
14. Resize: renderer, composer, bloom, camera, grade uRes.
15. Quality tiers: apply(pr) renderer.setPixelRatio; bloom.enabled; cap → trim: while alive > cap: recycle oldest sleeping else newest flying → dying (fast).
16. FPS adapt: frames counter; every 2.5s compute fps; if < 46 and tier>0 → tier--, toast? subtle: no toast, maybe small note. if > 58 and tier < startTier → tier++.
17. startTier: mobile → 1 ('med')? isMobile → low(0)? 030 used isMobile check; set startTier = isMobile ? 1 : 2; tiers array index 0 low,1 med,2 high. Caps: [360, 520, 700]; pr [1.0, 1.5, 2.0 capped by devicePixelRatio]; bloom [false, true, true].
18. dt clamp: min(dt, 1/30); substeps 3.
19. Sleep condition: py < 7.4 (below divider tops + margin) && speed < 0.8 → sleepT += h else 0; > 0.35 → st=1, vx=vy=0.
20. Wake on pair impulse: in pair resolution if j asleep and impulse > 2.5 → st=0.
21. Also wake sleeping balls when a ball above might rest on them — they stay asleep (static) ✓.
22. Dying: scale -= dt/0.28; glow pulse; when ≤0.02 swapRemove.
23. Spawning: scale += dt/0.16 → ≥1 st=0.
24. Stream spawn position: hopperX + (rand-0.5)*0.45, y=43.4, vy=-3, vx=0.
25. Burst(n, x): n balls ring around (x, 43.2) with small random offsets, staggered? immediate all — they'll collide and spread ✓.
26. Click vs orbit: pointerdown records x,y,time, and raycast hit; pointerup: if moved <6px and dt<350ms → burst at clamp(hit.x,-11.5,11.5) count 26. Hopper drag: pointerdown near gate → set draggingHopper, controls.enabled=false; pointermove: hopperX = clamp(hit.x, -6.5, 6.5); pointerup: re-enable. Raycast to plane z=0: ray from camera through ndc; t = -origin.z/dir.z; point = origin + dir*t. Implement manually (no Raycaster needed).
27. Tilt slider: input → targetTilt (deg→rad); each frame tilt += (target-tilt)min(1,dt6); boardGroup.rotation.z = tilt; gx = -Gsin(tilt)... wait sign derived: gx = -g sinθ? Let me recheck: world gravity g_w = (0,-g). Board rotated by θ (CCW positive, rotation.z=θ). Board frame: to express world vector in board frame, rotate by -θ: g_b = R(-θ) g_w. R(-θ) = [[cosθ, sinθ],[-sinθ, cosθ]]. g_b = (cosθ0 + sinθ*(-g), -sinθ0 + cosθ(-g)) = (-g sinθ, -g cosθ). If θ>0 (CCW, board's right side rises... rotation.z=θ rotates +x axis toward +y → right side goes UP, left side DOWN) → balls should drift toward -x (left). g_b x-component = -g sinθ < 0 ✓ drifts left. Slider: value -14..14 deg; map slider + → θ = +? Let's make slider right = tilt right side down: θ = -slider*π/180. Label fine. Wake: while |tilt - targetTilt| > 0.0008 → wake all sleeping each frame (cheap: set st=0 sleepT=0 for st==1). Avalanche ✓.
28. Stats: dropped counter increments on spawn; resting = count st==1; inFlight = alive - resting - dying - spawning.
29. Fit & curve at 4Hz.
30. Normal curve color: accent gold; also add second line for measured histogram outline? skip.

Audio pluck voice:

pluckBus: gain 0.9 → master + convolver send 0.35.

Peg hit queue: during physics, push {x, v} into hitQueue (cap 20 per frame, oldest dropped). After physics, for each → pluck.

Preset chime: pluck at x=-4 then setTimeout x=+2 100ms? Use two plucks.

Ambient bed start on init.

OK. Also freqForX: t=(x+12)/24 clamp; idx = t*(SCALE.length-1); round; f=220*2^(deg/12).

Now the DOM: ids: app, hud, stats(+spans: stDropped, stRest, stFlight, stMu, stSigma, fitBar, fitVal), toast, controls (buttons: preset chips ×4 with data-preset; sliders: sldRows(+val), sldFlow(+val), sldTilt(+val); buttons: btnBurst, btnSweep, btnPalette, btnSound, btnSnap, btnHelp), help overlay (btnCloseHelp), flash.

Let me now write out the entire file text. I'll keep comments crisp. Estimate ~950-1150 lines. Go.

CSS: adapt from 030 with gold accent. I'll write fresh but consistent.

One more detail: the gate/hopper visuals: rail = thin box width 15 (x -7.5..7.5) at y=44.2; carriage = box 1.6x0.5x1.2 at hopperX; gate glow = small emissive box under carriage; two lip plates angled. Carriage moves with hopperX. Also a soft point light at gate? Point lights costly with many... one PointLight (0xffc06a, 6, 14) at (hopperX, 42.5, 2) — nice glow on glass/pegs. OK include; plus ambient + dir.

Also add a faint accent point light at board center front? One is enough.

Balls InstancedMesh: SphereGeometry(BALL_R, 14, 10) — 700 instances * 280 tris ≈ 200k tris fine.

Peg geometry: CylinderGeometry(PEG_R, PEG_R, 1.5, 10) rotated to z-axis: rotateX(π/2).

Divider boxes: BoxGeometry(0.1, 7.0, 1.5) at divider x, y=3.5. Walls visual: glass case side walls are the glass panels themselves (front/back planes + side glass?) — case: front & back glass planes (24.4 x 46), plus brass frame edges. Side walls invisible (physics) — visually the frame edge bars cover x=±12.1. OK.

Floor of case: brass plate box (24.4 x 0.3 x 2.0) at y=-0.15 → balls rest at y=0.26 visually above plate ✓ (physics floor at y=0, ball center min = r → 0.26 ✓ matches plate top y=0).

Plinth: box (26 x 1.6 x 3) y center -0.95 → top at -0.15? case floor plate sits on plinth. Gallery floor plane y=-1.75.

Camera target (0, 21, 0).

Dust box: x ±30, y 0..46, z ±18.

Alright, writing the file NOW. I'll assemble it fully in my response content.

Also remember meta description & title.

For the extraction check: sed -n '//,/</script>/p' | sed '1d;$d' > /tmp/app.mjs && node --check.

Let me write. (Being extra careful with syntax since it's long.)

After writing, update index.html via awk inserting after <!-- New demos are added here -->:

Card:

Description draft: "A kinetic probability engine — hundreds of glowing balls rain through a brass peg lattice in a glass tower, plinking a pentatonic scale as they collide, and pile into a living bell curve while a ghost line traces the theoretical Gaussian. Custom 2D physics (spatial-hash ball collisions, peg jitter, sleeping piles, self-recycling dissolve) runs four board personalities — Classic, Skewed (flip the bias), Bimodal (a flow-splitting wedge) and Turbulent (noisy air currents) — with a live μ/σ readout and a Gaussian-fit meter that rats you out when you break statistics. Drag the hopper, click to drop bursts, tilt the whole tower and watch the mound avalanche; three palettes, generative WebAudio plinks over a soft room bed, UnrealBloom with vignette/grain/chromatic grade, adaptive quality tiers, PNG snapshots, keyboard shortcuts and full touch support."

Good. Now write the demo file.

Let me write the code with care around every function. I'll now produce the final content.

Let me make sure about peg static grid: cell 0.9; peg at (x,y) inserted into cell index. Query: ball cell ±1 (3x3) enough since max interaction dist = BALL_R+PEG_R=0.48 < 0.9 ✓.

Ball-ball: max dist 2r=0.52 < 0.9 ✓ 3x3.

Segments: no grid; loop all (≤ 40) per awake ball with quick reject: if ball within seg bbox expanded by r+sr.

Number of segments: walls 3 (left,right,floor) + dividers ≤12 + splitter 3 = ≤18. Cheap.

Physics pair resolution details:

e_ball = 0.22.

Friction between balls: skip (fine).

Note: when both awake and they're in a pile, gravity keeps pushing → jitter. Add slop: positional correction percent 0.5, slop 0.005. And sleeping threshold generous (speed<0.9 for 0.35s) → piles sleep quickly. Also add extra damping when py<7: v = (1-2.2h) (bin region damping) → quick settle.

Peg collision:

Segment collision:

Integration per substep h:

Turbulence: if turb>0: fx = turb*(sin(py0.33+t1.6)cos(px0.21-t1.2)); fy = turb0.35sin(px0.5+t*2.1).

t = simTime.

Alright. Also gate visual: animate gate glow pulse when spawning.

Curve update:

H_PER_BALL = 0.12.

Fit: exp_i = NbinWpdf(center); err=Σ|obs-exp|/(2N); fit=clamp(1-err,0,1)*100 — display with one decimal? integer.

μ display: (μ>=0?'+':'') + μ.toFixed(2); σ.toFixed(2).

Bins: binX0 = centers[0] - binW/2; binIndex = floor((x-binX0)/binW).

Also count only st==1? Resting balls are the histogram; flying ones below 7 (still bouncing) count too visually... count st 0 or 1 with py<7.0. OK.

Now — hopper drag raycast: pointer NDC from event; ray: origin = camera.position; dir = unproject(ndc at z 0.5) - origin normalized; t = (0 - origin.z)/dir.z; if t>0: hit = origin + dir*t → board-local? boardGroup may be tilted! Raycast in world then transform hit into board local: boardGroup.worldToLocal(hit.clone()). Since tilt small, fine. Use local coords for hopper logic. Hopper visuals are children of boardGroup ✓ (they tilt with board).

Burst click: also use board-local hit.x.

Note: OrbitControls rotate on left-drag; our click detection with small movement threshold coexists fine.

Touch: pointer events unify ✓. Pinch zoom = controls handles (touch-action none on canvas).

Set canvas style touch-action none via renderer.domElement.style.

Snapshot key S and button. Flash animation via CSS class.

Toast helper with timeout.

Initial: buildBoard(12); spawn stream on; toast welcome; help hidden.

Also add window 'resize'.

Frame loop:

Peg flash decay: flash = exp(-dt5); update colors every frame (cheap, ≤136).

Peg instanceColor init: setColorAt for all after build.

Edge: when rows change → buildBoard: sweep() first (all dying), rebuild pegs/dividers/segments, reset bins.

Sweep: for i: if st<2: st=2, dieDelay = rand0.3, dieSpeed... implement dieT per ball: Float32Array dieT init 0; when st set to 2: dieT = 0.28 + rand0.25. In update: dieT -= dt; scale = max(0.001, dieT/0.3); glow pulse = (1-scale)*1.5; dieT<=0 → remove.

Spawning st=3: scaleT 0→1 over 0.16.

scale array stores current scale; for st 0/1 scale=1.

swapRemove(i): copy px,py,vx,vy,age,sleepT,st,scale,dieT from alive-1; alive--.

Spawn: if alive>=cap → recycle: find oldest st==1 (max age) → set st=2 dieT=0.22 (fast); if none found → return (don't spawn). Then i=alive++; set values.

Hmm — recycle sets dying but doesn't free a slot immediately; alive still at cap → spawn fails. Fix: when at cap, directly reuse the recycled slot: pick oldest sleeping index i, and respawn it in place (teleport to gate with spawn anim). That's cleaner: "the oldest ball dissolves and re-materializes at the gate" — visually: it dies (glow pulse) and a new spawn appears — but same slot teleports instantly... The dissolve visual would be lost. Alternative: keep dying balls not counted against cap? Simplest robust: allow alive to exceed cap by dying buffer: MAXB = cap+128? But cap varies by tier. Set MAXB = 860 (high cap 700 + 160 buffer). Spawn: if alive >= MAXB → force-remove oldest sleeping (swapRemove immediately, no anim) — rare fallback. Normal recycle: when alive >= cap+40 → mark oldest sleeping dying (frees slot soon). Spawns continue into buffer meanwhile.

Simpler: recycle check each 0.25s: while (countResting > restingTarget) mark oldest resting dying. restingTarget = cap - 160. And spawn blocked only when alive >= MAXB-2. This decouples nicely. cap per tier [700,520,360] → restingTarget [540,380,240]? Hmm earlier I estimated resting ~450 for good mound height with Hmax 11.6. Bin overflow dissolve also triggers per-bin at height 11.6. restingTarget high tier 500. Let me set restingTarget = [500, 380, 260], MAXB = 880. Flow default 22/s.

Bin overflow check: every 0.2s per bin: if binCount * 0.12 > 11.6 → oldest sleeping in bin dies. This naturally sculpts the mound top flat at 11.6 if overfed — with restingTarget 500 the global recycle kicks in first usually.

Wait — actually there's a subtlety: with continuous flow 22/s and resting capped at 500, dissolve rate = 22/s at equilibrium → the mound constantly twinkles with dissolves — looks alive ✓ and dropped counter climbs ✓.

MAXB 880 instances: matrix updates 880/frame — fine.

Grid next array size MAXB.

OK, also the "in flight" stat = alive - resting - dyingCount.

I think I'm ready. Also — palette cycling button + P key. Palettes:

Use THREE.Color().setHSL.

Accent for UI stays gold regardless.

Curve color: gold #ffcf7a.

Let me write everything now. Also const G = 34.

One more check — UnrealBloomPass with HalfFloat target + samples 4: same as 030 ✓.

Grade pass after OutputPass ✓ (030 order: bloom, grade?, output — line 790 says OutputPass added after grade? It showed composer.addPass(new OutputPass()) at 790 and gradePass defined at 761... order unknown. I'll do Render → Bloom → Output → Grade.

Write time. I'll produce the file in a single write call. Given length, I must be focused. Let me go.

Actually, let me reconsider one thing: attribute mat4 instanceMatrix; in ShaderMaterial — in three r170, WebGLProgram automatically prepends #define USE_INSTANCING only for built-in materials when object is InstancedMesh... For ShaderMaterial, no injection, manual declaration works and the renderer will bind the buffer (WebGLBindingStates.setupVertexAttributes checks object.isInstancedMesh for attribute name 'instanceMatrix'). Yes — in three's bindAttributes, instanceMatrix is fetched from object.instanceMatrix when geometry has it? Let me recall precisely: In WebGLBindingStates.setupVertexAttributes: if (name === 'instanceMatrix' && object.instanceMatrix) ... — hmm, actually the geometry attributes come from geometry, but instanceMatrix is special-cased:

From three source (WebGLBindingStates):

Yes! Special-cased ✓. So manual declaration in ShaderMaterial works.

And InstancedBufferAttribute 'aGlow' on geometry works with divisor ✓.

Also for InstancedMesh, three renders with drawInstanced based on object.count ✓.

One caveat: material needs material.needsUpdate? No.

Also since ShaderMaterial doesn't include tonemapping/colorspace chunks, the ball colors will be tone-mapped by OutputPass at the end (composer OutputPass applies ACES to the whole buffer) ✓ consistent.

Fog: skip.

Let me also handle context: renderer = new THREE.WebGLRenderer({antialias:false, powerPreference:'high-performance'}).

Alright, final write.

For safety in the hitQueue: array of {x, v} pushed during substeps; after physics, slice(0,18).forEach pluck; length=0.

Gate glow element: small emissive box; pulse: material.emissiveIntensity = 1.2 + spawnPulse; spawnPulse decays.

Also add a faint line for the rail and tick marks? skip.

DOM stats update every 0.25s.

FPS adapt: frames++, acc+=dt; every 2.5s: fps=frames/acc; adjust.

Tier apply:

Trim if alive > cap+120: mark oldest sleeping dying until under.

Initial tier: isMobile ? 1 : 2.

OK writing now — FINAL. I'll count nothing; just write carefully.

After writing: extract & node --check. Then update index. Then verify (grep card count 36? currently 35 demo-card occurrences including... earlier grep -c 'demo-card' = 35 — that includes CSS selectors (.demo-card appears in CSS multiple times). Count cards by '' → should be 30 now, 31 after.

Let me write the demo file.

Now write the big file. I'll write it in one go.

I wrote the file, but I noticed I left some messy redundant lines in the gate light positioning:

That's sloppy — three set() calls where only the last matters. The last one is correct: rotating the local point (hopperX, GATE_Y+0.5) by tiltCur around board origin (board group is at origin, rotation.z = tiltCur). Let me clean that up to a single line.

Also, there's an issue with the Space key handler:

This is buggy-ish: when pausing, it sets slider to 0 and flowRate stays 22 (good, restores on resume). When resuming, sets slider to flowRate. But the slider input handler sets streaming = flowRate > 0 — when Space sets slider value programmatically, no event fires, fine. Actually the logic works: on pause: streaming=false, slider shows 0, flowRate stays 22. On resume: streaming=true, slider=22. OK but convoluted; simplify: keep a savedFlow. Actually it works correctly as-is. Let me simplify anyway for clarity:

Also check: $('sldFlow').value = streaming ? (flowRate || 22) : 0; if (!streaming) flowRate = 22; — wait, if !streaming sets flowRate=22 — that means if user had set flow to 45 and pressed space to pause, flowRate resets to 22? No wait: if (!streaming) flowRate = 22; — that overwrites user's 45 with 22. Bug! Let me fix with savedFlow variable.

Also potential issue: in setPreset, when re-clicking Skewed, skewDir *= -1 happens BEFORE buildBoard(), and buildBoard sets biasKick = p.bias * skewDir ✓.

Also controls.enabled = false during hopper drag — pointerup listener is on window ✓ so it re-enables even if pointer released off-canvas ✓.

Another check — boardHit: uses -camera.position.z / _dir.z for plane z=0 in WORLD space, then board.worldToLocal. Board is at origin with rotation.z only, so world z=0 plane == board local z=0 plane ✓ (rotation about z keeps z=0 plane invariant) ✓.

gateLight — it's added to scene (not board), so we must rotate its position manually — the final line does that ✓. Let me clean up to just that line.

One more concern: pegMesh.setColorAt(i, BRASS) in buildBoard — instanceColor created on first setColorAt ✓ (we call setColorAt in buildBoard before first render since buildBoard() is called before tick starts ✓).

ballMesh.setColorAt(i, new THREE.Color(1,1,1)) at init creates instanceColor ✓.

In the fragment shader for balls, no tonemapping issues since OutputPass handles it ✓.

curveGeo.attributes.position.array — set needsUpdate ✓.

Potential z-fighting: curveLine at z=1.02 vs glass at 0.95 — curve is in FRONT of glass (z=1.02 > 0.95). Hmm, the ghost curve should be inside the case ideally, but in front of glass looks like a heads-up display — actually could be cool ("holographic overlay"). But depthWrite false + additive, renders after opaque... transparent objects sort by distance; both transparent. The curve at z=1.02 renders in front — fine visually, like a HUD hologram. Keep.

Wait — one problem: the curve and glass are both transparent; glass opacity 0.055. Curve additive. Render order: three sorts transparent objects by z distance to camera; from front view, curve (z=1.02) is closer → renders after glass ✓ fine.

Also hitQueue cap 48 during physics, then we play min(14) — fine.

Sleeping balls: bState[i] = 1 — they're inserted into grid (st<2 ✓ included since check is >= 2 continue).

In pair loop, if (j > i && ...) — pairs with i sleeping, j awake, j>i: handled ✓ (iSleep branch). i awake, j sleeping, j<i: when outer loop reaches i, j>i filter skips; but the pair gets handled when outer loop was at... j is sleeping — outer loop at index j: bState[j] >= 2? No, sleeping is 1, so j iterates its neighbors; pair (j,i) with i>j → handled with iSleep? In that iteration "i" in code = j (sleeping), "j" = i (awake) → iSleep branch → awake ball pushed ✓. Good — all pairs covered exactly once.

Wake condition: impulse > 3.0 wakes the sleeper ✓.

Turbulence: applied to flying balls ✓.

One more: swapRemove inside the lifecycle loop for (let i = 0; i < alive; i++) with i-- after removal ✓.

updateStatsAndCurve — counts bins for st<2 balls below DIV_TOP+0.2 ✓.

Overflow dissolve loops per bin over all alive — nbins ≤ 11 × alive ≤ 880 → 9680 iterations every 0.25s — fine.

recycleOldestResting — fine.

Space handler fix and gate light cleanup. Also remove the weird intermediate lines.

Also, slider input for rows calls sweep() then buildBoard() — sweep marks dying; buildBoard rebuilds pegs — fine.

Initial buildBoard() call before applyTier(tier) — applyTier calls onResize which uses composer — composer defined before... order in file: buildBoard defined, then physics, then composer, then UI, then stats, then applyTier/onResize defined, then buildBoard(); applyTier(tier); toast(...) near the end ✓ all defined. gatePulse declared with let gatePulse = 0; in main loop section but used in spawnBall — hoisting: let used before declaration in temporal dead zone? spawnBall is only CALLED after the declaration line executes (calls happen in tick or events, which occur after full script evaluation) ✓ fine.

toast uses toastTimer — declared ✓.

chime uses setTimeout with pluck — audio may not exist; pluck guards !audio.ctx ✓.

One more: in the keydown handler I call initAudio() on any key — good gesture.

renderer.domElement.addEventListener('pointerdown'...) — initAudio ✓.

Mobile: stats hidden via CSS ✓.

Now fix the two issues (Space handler + gateLight lines). Also simplify.

*********************************************************************************************************************************************************************************sh.

***********************************************************************************************************************************************************************************************************************ck.

Syntax OK. Now let me do a quick sanity review of a few risky spots by grepping the file:

1. attribute mat4 instanceMatrix; — with three r170, ShaderMaterial + InstancedMesh: the renderer binds instanceMatrix automatically. BUT there's a subtlety — newer three versions may emit a warning or error if the vertex shader redeclares attributes that three also tries to bind? No, ShaderMaterial vertex shaders are user-authored; three does not inject attribute declarations for ShaderMaterial. ✓

2. One thing to double check: in buildBoard, pegMesh.setColorAt(i, BRASS) — setColorAt creates instanceColor if absent ✓.

3. ballMesh.count = 0 initially, updated per frame ✓.

4. Check the sleep/dissolve: sleeping balls have scale 1 ✓ (bScale stays 1).

5. updateStatsAndCurve uses $('stDropped') etc. — all IDs exist ✓ (stDropped, stRest, stFlight, stMu, stSigma, fitVal, fitBar) ✓.

6. Help overlay: $('help') ✓, btnCloseHelp ✓.

7. gatePulse declared before tick — but spawnBall references gatePulse = 1.0 — spawnBall defined earlier in file than let gatePulse. TDZ only matters at call time; spawnBall is first called within tick (after declaration executed) or via UI events (after script eval) ✓.

8. In burst() — spawns at GATE_Y - rand*1.2 → y between 42.2 and 43.4, below gate ✓ inside case ✓.

9. Click burst: e.target === renderer.domElement — pointerup on window; if released over a panel, target won't be canvas → no burst ✓ good.

10. board.worldToLocal — board matrixWorld must be updated; after first render it is. Before first render, pointer events unlikely. Fine.

11. Dust: positions y from -2 to 46 ✓.

12. applyTier calls onResize which references gradePass — defined before applyTier is CALLED (calls at bottom) ✓.

13. Curve: curveGeo.attributes.position.array — Float32Array(121*3) ✓.

14. Potential visual issue: balls at z=0, sphere radius 0.26; pegs cylinders length 1.5 (z -0.75..0.75); glass at z=0.95; back panel front face at z=-0.95+0.15=-0.8. Ball front at z=0.26 < 0.95 ✓ inside.

15. Dividers BoxGeometry(0.1, DIV_TOP, 1.5) — depth 1.5 (z -0.75..0.75) ✓.

16. Frame bars at z=0 with depth 2.2 (z -1.1..1.1) — covers glass edges ✓.

17. glass plane DoubleSide transparent — renders behind curve ✓.

18. Instanced spheres: 14x10 segments — fine.

19. renderer.setPixelRatio in applyTier before composer? applyTier called after composer creation ✓. But note: setPixelRatio then composer.setSize — EffectComposer uses renderer size * pixelRatio internally via setSize ✓ (composer.setSize handles pixelRatio from renderer). Actually EffectComposer.setSize(width, height) uses its own _pixelRatio (from renderer at construction). Hmm — EffectComposer stores _pixelRatio = renderer.getPixelRatio() at construction. If we change renderer pixel ratio later, composer keeps the old one! In three r170, EffectComposer has setPixelRatio method. Let me call composer.setPixelRatio(Math.min(devicePixelRatio, q.pr)) too in applyTier. Let me check: EffectComposer has setPixelRatio(pixelRatio) ✓ it does. Add that call.

20. UnrealBloomPass resolution — setSize called in onResize ✓.

Let me add composer.setPixelRatio in applyTier.

21. hitQueue plays up to 14 plucks per frame — at 60fps that's plenty.

22. Tilt slider mapping: slider + → tiltTarget = -deg → board.rotation.z negative → right side down → balls drift +x... wait: θ = rotation.z = tiltTarget < 0 (clockwise, right side down). gx = -G sin(θ) = -34*sin(negative) = positive → drift +x (right, downhill) ✓ correct.

23. When rows slider changes: sweep() marks all dying; buildBoard rebuilds. Dying balls still rendered while falling? They're frozen (skip physics) and shrink ✓.

24. bState[i] === 3 spawning balls: not in grid (grid skips st>=2 ✓ since check bState[i] >= 2 continue — st 3 >= 2 ✓ skipped).

25. In integrate loop if (bState[i] !== 0) continue; ✓ only flying.

26. Sleep: sets st=1 — but the ball might be resting on top of the mound ABOVE divider top (mound can reach 11.6 > 7.6). Sleep condition requires py < DIV_TOP+0.6 = 7.6. Balls resting on the mound above 7.6 never sleep → they keep jittering in pair collisions forever, costing perf and looking restless. Hmm. With mound up to 11.6, many balls sit between 7.6 and 11.6. They'd stay awake, jittering under gravity with drag 2.4 (below 7.5)... drag zone is py < DIV_TOP+0.5 = 7.5. Balls above that get low drag 0.10 → perpetual jitter in the pile → bad.

Fix: allow sleep anywhere below ROW0_Y - 1 (i.e., py < 12) with speed threshold, and extend the strong settle drag to py < 12? But flying balls pass through 7.5..12 region with high speed — sleep requires speed < 0.9 sustained 0.35s, so fast balls won't sleep ✓. Let me change sleep zone to py < ROW0_Y - 0.8 (12.2) and drag zone likewise to 12.2. But stronger drag up to 12.2 affects balls falling from the last peg row (13.0) — they'd get damped as they enter the mound zone, which is fine (they're landing).

Actually careful: peg rows start at 13.0; balls bouncing on row-0 pegs at y≈13 dip to ~12.5 — above 12.2, unaffected ✓. OK: change both DIV_TOP + 0.5 drag and sleep zone DIV_TOP + 0.6 to ROW0_Y - 0.8.

Also bin counting uses py < DIV_TOP + 0.2 = 7.2 for the histogram — mound balls above 7.2 aren't counted in bins! The histogram would undercount center bins whose stacks exceed 7.2. Hmm. The visual mound IS the histogram; the bin count should include all resting balls assigned by x regardless of y. Let me count any ball with py < ROW0_Y - 0.5 (12.5) — i.e., everything below the peg field belongs to its bin. That correctly counts tall stacks ✓. And the Gaussian fit then measures the full mound ✓.

Similarly overflow dissolve: binCounts now includes all mound balls ✓ height estimate count*0.12 ✓.

27. recycleOldestResting picks oldest sleeping anywhere — sleeping only happens below 12.2 now ✓ consistent.

28. In the pair-resolution wake: impulse>3 wakes sleeper ✓; with tilt avalanches we wake all ✓.

29. Another perf point: pair loop iterates ALL alive balls including sleeping (needed for pairs) — 880 × 9 cells — fine.

30. Edge: binCounts = new Int32Array(nbins) — reassigned in buildBoard; updateStatsAndCurve uses current nbins ✓.

31. binW = SX ✓ constant.

Let me apply fixes:

• composer.setPixelRatio in applyTier.
• sleep zone & settle drag: py < ROW0_Y - 0.8.
• bin counting: py < ROW0_Y - 0.5.

Also one more look at the drag: const drag = py[i] < DIV_TOP + 0.5 ? 2.4 : 0.10; → change to ROW0_Y - 0.8.

And sleep test if (py[i] < DIV_TOP + 0.6) → if (py[i] < ROW0_Y - 0.8).

And stats: if (st < 2 && py[i] < DIV_TOP + 0.2) → py[i] < ROW0_Y - 0.5.

Hmm wait, one issue with sleeping anywhere below 12.2: a ball could fall asleep mid-air on top of the mound — fine, that's resting. But could a ball sleep while leaning against a divider above the mound? Sure, stable. OK.

Also the mound near H_MAX=11.6 with sleep zone up to 12.2 ✓.

One more: with sleep allowed up to 12.2 and first peg row at 13.0, balls resting against the lowest pegs (peg at y=13, ball center at 13±0.48) → 12.5+ — above sleep zone ✓ won't freeze on pegs... a ball balanced ON a peg at 13.48 keeps bouncing micro — acceptable, it'll roll off.

Apply the fixes now.

Now re-validate syntax after edits, then update the index page. Let me also do a final quick grep review of a few things:

• DIV_TOP still used for divider visuals ✓ (that's fine).
• Check that there are no remaining references to undefined things.

Run node --check again.

Interesting — grep shows line 790 still has const drag = py[i] < DIV_TOP + 0.5 ? 2.4 : 0.10;?? But I replaced it earlier and the preview showed ROW0_Y - 0.8. Wait — the grep output shows line 790 with DIV_TOP + 0.5... but my replace preview showed line 790 as const drag = py[i] < ROW0_Y - 0.8 ? 2.4 : 0.10;.

Hmm, maybe the file has TWO occurrences? No wait — the grep was run AFTER the replacement... Let me look: the replace result said replacements: 1, preview line 790 showed the new text. But now grep shows line 790 with old text? That's contradictory. Unless... the grep output is showing a cached/different read. Or the replace happened and then... no other writes touched that line.

Wait, actually look carefully at grep output line: 790: const drag = py[i] < DIV_TOP + 0.5 ? 2.4 : 0.10;. But the replace preview showed > 790 | const drag = py[i] < ROW0_Y - 0.8 ? 2.4 : 0.10;.

This is suspicious. Possibly the s3fs-backed filesystem has caching/consistency lag ("it may be slow")? Or the awk extraction and grep ran on a stale version? But node --check passed on the new extraction...

Let me directly read lines 785-795 from the file to verify current content.

So the file currently has BOTH:

• One occurrence of ROW0_Y - 0.8 (count = 1) — that's the sleep test fix (line ~872).
• Line 790 still has DIV_TOP + 0.5.

But the earlier replace reported success with a preview showing line 790 changed to ROW0_Y - 0.8... And grep -c "ROW0_Y - 0.8" = 1, but I made TWO replaces using ROW0_Y - 0.8 (drag + sleep). So it seems the drag replace got reverted or never persisted, while its preview showed success.

Hmm wait — actually re-reading the replace results: the first replace (drag) preview showed line 790 with the NEW text. Then the second replace (sleep) — affectedStartLine 871. Then the third (stats) line 1129. Then the fourth (applyTier) — that one reported affectedStartLine 1204 and bytesWritten 52477.

Theory: each replace writes the whole file; maybe a later write was based on a stale read (read-modify-write race with the slow s3fs)? The applyTier replace happened after the stats replace; if the tool read a cached version for the applyTier edit... but then the sleep/stats fixes would also be lost. grep says ROW0_Y - 0.8 count = 1. Which one survived? Let me check the sleep line and stats line directly. Also check applyTier fix and Space fix.

Actually, wait. Let me recheck: maybe the drag replace DID apply, and then the SLEEP replace wrote the file from a stale snapshot (taken before the drag replace), reverting the drag fix while applying the sleep fix. That matches: ROW0_Y - 0.8 count = 1 (sleep only), drag reverted to DIV_TOP + 0.5.

Then stats fix (ROW0_Y - 0.5) — did it survive the applyTier write? Need to check. And Space fix?

Let me check all of them now.

***************************************************************************************ow.

Verify it persisted this time with a fresh read, then re-run node --check, then update the index page.

All edits persisted and syntax is valid. Now update the demos index page by inserting the new card after the <!-- New demos are added here --> marker. Previous run used awk for reliability (noted that replace_in_file had issues with this file). I'll use awk and then verify.

Card HTML (matching existing style with generous indentation like 030's entry):

Description (single line, with HTML entities like the others):

"A kinetic probability engine — hundreds of glowing balls rain from a draggable hopper through a brass peg lattice inside a glass tower, every peg impact plinking a note from a pentatonic scale, and pile into a living bell curve while a ghostly gold line traces the theoretical Gaussian and a fit meter grades reality. A custom 2D rigid-circle simulation (spatial-hash collisions, peg-impact jitter, sleeping piles, self-recycling dissolve) powers four board personalities — Classic, Skewed (click again to flip the bias), Bimodal (a flow-splitting wedge) and Turbulent (noisy air currents) — with live μ/σ readouts. Tilt the whole tower and watch the mound avalanche; click the glass to drop bursts. Featuring three ball palettes, generative WebAudio plucks over a soft room bed with convolution reverb, UnrealBloom plus vignette/grain/chromatic grade, drifting dust motes, adaptive quality tiers, PNG snapshots, keyboard shortcuts and full touch support."

Insert with awk after the marker line. Write to a temp file then move. Then verify count of <span class="num"> = 31 and that 031 card is first.

The index now has 31 demo cards, with 031 at the top. Everything is in place:

1. ✅ Created /space/demos/031-galton-cascade/index.html — a full-featured Galton board simulation
2. ✅ JavaScript syntax validated with node --check
3. ✅ Fixed logic issues (sleep zone covering mound tops, bin counting, composer pixel ratio, Space key flow bug, gate light cleanup)
4. ✅ Updated /space/demos/index.html with the new card (31 cards total)

One last sanity check — verify the demo file is complete and well-formed HTML (closing tags). Let me do a final quick check of the tail of the file and confirm the file size. Then call _success.

**********************************************************************************************************************************************************************************************************************ss.