create_demo_059_zoetrope

The task says "Wake up and do as you please." This is a fresh turn. The previous execution was about WebGL2 Puppeteer testing for demo 058-microcosm, which hit a time limit. But this new task is just "Wake up and do as you please."

Given my purpose is to create cool Three.js demos in /space/demos/, I should probably check the state of the demos folder, and either continue previous work (like finishing the microcosm demo testing) or create a new demo. The instruction "do as you please" gives me freedom.

Let me start by installing shell tools and inspecting the current state of /space/demos.

Let me check the current state of the demos folder and the background processes from the previous run.

The environment was reset (previous Xvfb/http server processes are gone — only s3fs mounts remain). The demos folder has 58 demos. The last demo was 058-microcosm. The previous run was testing it.

Since the task says "Wake up and do as you please", I have freedom. Options:

1. Create a new demo (059) — this is my purpose.
2. Verify 058-microcosm works.

Let me first quickly check the state of 058-microcosm and the index page, then decide. The previous run's summary indicates 058 was created and a test harness was being run. Let me check whether 058-microcosm is complete and listed in index.html.

Actually the best use of my time: create a brand new impressive demo (059-something). That's my purpose. Let me check the index to see if 058 is listed, then create demo 059.

Let me look at a recent demo to understand the conventions used, and check the index.html tail.

058-microcosm exists and is listed in the index (index.html is 56KB and presumably includes it). Let me check that the index includes 058.

Then I'll create a new demo 059. Let me think about what to build.

Recent demos list for variety: spinning cube, nebula galaxy, mandelbulb, fluid dynamics, gravity sandbox, event horizon, sonic reactor, void runner, azure odyssey, abyssal bloom, physarum garden, powder alchemy, clockwork nebula, neon rain, aurora, skitter, coral resonance, threshold, attractorium, murmuration, terraforge, cloudsea, frostline, koi pond, ferrofluid, synchrony, cymatics, teslasphere, pyrosymphony, morphogenesis, galton cascade, wavefront, gossamer, magnetosphere, cloud chamber, wavefunction, epicycle, sandpile, kinetic theory, lumen lab, squish lab, neon tilt, hyperfold, photon garden, critical point, bridge works, primordial, coasterworks, sakura grove, voxelia, neon district, supercell, caldera, domino rally, phantom jam, wavewalker, basin, microcosm.

So what's a cool new idea? Ideas:

• Reaction-diffusion on a 3D surface (probably done via morphogenesis?)
• Lightning / plasma tree growth (done: teslasphere)
• Ocean waves Gerstner (done: wavefront, wavewalker, cloudsea?)
• Volumetric clouds raymarched (done: cloudsea, supercell?)
• SPH water simulation in a glass tank with GPU particles — "aquarium" — water sloshing in a box, interactive. There's "basin" maybe? Let me check what basin is. Actually I can't easily check all. Let me grep the index titles.

Let me fetch the titles of all demos from index.html to avoid duplication.

The grep didn't work due to multiline. Let me use a different approach with python or tr.

Interesting — the index only shows 22 cards? Let me check where 058 is. The regex might have missed entries because of different HTML structure. Total demos: 58 folders. The index might be paginated or the regex only matches a subset. Let me check if 058 is in the index.

058-microcosm is not in the index yet — the previous run created the demo but ran out of time before updating the index page. I need to:

1. Add 058-microcosm to the index.
2. Create a new demo 059.

First, let me look at 058-microcosm's index.html to get its title/description for the index page. Then I'll create a new demo.

Let me check the header of 058-microcosm/index.html.

*****************************************************************************************************************************************************************************************************************************************************it.

Now I understand the structure. First, add the 058 card to the index. Then create demo 059.

For demo 059, let me brainstorm something cool that hasn't been done:

Already done (from titles): Basin (magnetic pendulum), Wavewalker (pilot-wave droplet), Phantom Jam (traffic waves), Domino Rally, Caldera (volcano), Supercell (tornado), Neon District (cyberpunk city), Voxelia (voxel), Sakura Grove, Coasterworks (rollercoaster), Primordial, Bridge Works (bridge physics), Critical Point, Photon Garden, Hyperfold (4D?), Neon Tilt, Squish Lab (softbody), Lumen Lab (optics), Kinetic Theory (gas), Sandpile, Epicycle, Wavefunction, Cloud Chamber, Magnetosphere, Gossamer, Wavefront, Galton Cascade, Morphogenesis, Pyrosymphony (fireworks music?), Teslasphere, Cymatics, Synchrony (coupled oscillators/metronomes), Ferrofluid, Koi Pond, Frostline, Cloudsea, Terraforge, Murmuration, Attractorium, Threshold, Coral Resonance, Skitter, Aurora, Neon Rain, Clockwork Nebula, Powder Alchemy, Physarum Garden, Abyssal Bloom, Azure Odyssey, Void Runner, Sonic Reactor, Event Horizon, Gravity Sandbox, Fluid Dynamics, Mandelbulb, Nebula Galaxy, Spinning Cube, Microcosm (particle life).

New idea candidates:

1. Kinetic Sculpture / Double Pendulum art — probably too close to basin/epicycle.
2. Mycelium network / root growth — similar to physarum/coral.
3. Paper plane / flight sim — gameplay, could be nice but flight sims are common.
4. Ising model / cellular automata 3D — critical point may be Ising.
5. Origami / paper folding — hard.
6. Gravity well / general relativity lensing — event horizon done.
7. Boids predator-prey ecosystem on GPU — murmuration done (boids). Microcosm is particle life.
8. Spring-mass cloth flag in wind with procedural wind, tearing — squish lab is softbody, cloth might be distinct enough.
9. L-system forest growing in real time — sakura grove probably has trees.
10. Spider web with dew — gossamer is likely a web.
11. Lightning storm — teslasphere.
12. Rain on window with droplets merging — neon rain exists.
13. Ant colony / termite nest building — new! Stigmergic agents building emergent structures (termites piling wood chips). That's cool and distinct from physarum.
14. Slime mold computing a maze — physarum exists.
15. Ball-sorting / pachinko machine — galton cascade exists.
16. Kaleidoscope shader — could be pretty but maybe too simple.
17. Water ripple / SPH fountain — wavefront/wavewalker.
18. Rocket orbital mechanics game (Kerbal-style 2D/3D) — new! Build rockets, launch, orbit. Could be great gameplay.
19. Pinball machine with physics and bloom — new! Fun interactive gameplay.
20. Dice tower / marble run builder — domino rally / galton exist.
21. Black hole + accretion disk — event horizon done.
22. Mandelbrot zoom — mandelbulb is 3D fractal; a deep zoom 2D mandelbrot with perturbation theory in shader is limited by float precision in GLSL. Skip.
23. Voronoi shatter / glass breaking — could be cool: click to shatter glass panes with physics shards. Distinct.
24. Turing patterns on 3D morphing blob — morphogenesis likely reaction-diffusion.
25. Ocean buoyancy sim with floating boat — wavewalker/wavefront.
26. Snow globe interactive — shake snow globe, snowflakes swirl with fluid sim. Cute but maybe small scope.
27. Laser puzzle game — lumen lab is optics.
28. Mechanical watch / escapement — clockwork nebula is clock-ish. Epicycle too.
29. Rubik's cube 3D playable — gameplay! Could be nice with animations. But maybe less "wow".
30. Tetris 3D / Blockout — gameplay with bloom neon aesthetic. Fun.
31. Kraken / tentacle IK creature — "skitter" is likely a spider. Tentacle IK could still be cool.
32. Bioluminescent deep sea jellyfish field — abyssal bloom likely covers it.
33. Neural network visualizer with particles flowing through layers — new! Interactive MNIST-like, or just signal pulses. Could be very cool: trainable tiny network in-browser classifying drawn digits. That's advanced and educational. Hmm, MNIST needs data. Could do a toy: network learns XOR/spiral classification live, visualize decision boundary + activations in 3D. "Neuroviz". That's a nice distinct demo.
34. Fourier series drawing machine — epicycle is exactly that likely.
35. Chladni plate — cymatics.
36. Plasma globe — teslasphere.
37. Rainforest canopy / ecosystem sim — primordial?
38. Asteroid mining / space game — void runner likely.
39. Portal effect — hyperfold?
40. Snow accumulation on objects — frostline maybe.
41. Campfire with sparks and heat shimmer — caldera/pyrosymphony are fire-ish.
42. Interactive double-slit quantum experiment — wavefunction likely.
43. Geodesic dome builder — meh.
44. Knot theory — trefoil morphing knots with tube geometry — could be beautiful: animated morphing knots, parametric. "Knot garden". Maybe too niche.
45. Dla crystal growth — morphogenesis?
46. Wind tunnel / aerodynamics sim over airfoil with smoke streamlines — new! Interactive airfoil shape, angle of attack, streamlines, lift/drag display. Educational + beautiful. Distinct from fluid dynamics playground (which is dye stirring). Could be nice.
47. Solar system with accurate-ish orrery — epicycle?
48. Pachinko / plinko — galton.
49. Terrarium / bonsai — sakura grove.
50. Musical step sequencer in 3D — sonic reactor is audio.
51. Catenary / rope physics — bridge works / gossamer.
52. Geyser / hot springs — caldera.
53. Firefly swarm synchronization — synchrony might be metronomes but firefly sync is related. Hmm.
54. Virus spread / epidemic network sim — could be meh.
55. Glacier carving valley — frostline maybe.
56. Coral growth — coral resonance.
57. Honeycomb / bees building — newish.
58. Origami crane flying — meh.
59. Gothic stained glass shader — kaleidoscope-like, pretty.
60. Zoetrope 3D — animated sculpture that animates at certain rotation speed — VERY cool and unique! A 3D zoetrope: instances of a figure in animation frames arranged in a circle, spun at a speed where a strobe or camera shutter sync makes them animate. Can implement "shutter sync" by sampling: the classic effect. In real-time 3D we can do a "strobe light" mode where the scene is only rendered/lit at flashes. That's a genuinely novel, wow demo. Distinct from everything.
61. Perpetual motion marble machine — galton/domino adjacent.
62. Ice crystals / snowflake generator (Koch / dendrite) — frostline maybe.
63. Aurora — done.
64. Tide pool / starfish — koi pond adjacent.
65. Flocking fish in a kelp forest — murmuration adjacent.
66. Smoke ring / vortex gun toy — fluid adjacent.
67. Pin art toy / pinscreen — cute: a field of pins pressed by shapes/hand. GPU-driven pin matrix that deforms with shapes. Interactive, satisfying. Could be nice but moderate wow.
68. Magnetic putty — ferrofluid done.
69. Ray-traced spheres scene with progressive accumulation — "Lumen lab" is optics; a mini path tracer could still be new. But WebGL2 compute limits... doable in fragment shader with progressive accumulation. Might be heavy but ok with small resolution. Hmm, "Photon Garden" might be light transport.
70. Jelly simulation — squish lab.
71. Termite cathedral builder — I like this one a lot: hundreds of termite agents that randomly pick up and drop wood chips; emergent pillars and arches form (stigmergy). Render chips as instanced boxes, termites as instanced glowing bugs, bloom, camera orbit. Distinct from physarum (trails) — this one builds 3D structures. Very cool emergent demo.
72. Dune formation / sand ripple sim — sandpile adjacent but different: aeolian ripples. Meh.
73. Ink diffusion in water (marbling art) — fluid adjacent.
74. Origami tessellation folding — hard.
75. Space elevator / orbital ring — meh.
76. Crowd evacuation sim — meh.
77. Ferrofluid — done.
78. 3D chess — no AI. skip.
79. Slot car / RC drift toy — void runner adjacent.
80. Rainbow caustics under water surface with godrays — lumen/photon adjacent.

Top candidates: 3D Zoetrope (novel, wow), Termite Cathedral (emergent, satisfying), Neural network visualizer (educational), Wind tunnel (educational).

I'll go with the 3D Zoetrope — it's a genuinely fresh concept, visually striking, and interactive. Concept:

Demo 059 — "Zoetrope — Living Sculpture"

Design:

• A turntable with N frames of an animation (e.g., a bouncing/stretching ball, a walking creature, a growing flower, a flapping bird...). Instances arranged in a ring, each at a different animation phase.
• The disk spins at angular velocity ω. When strobe frequency f_strobe = ω/(2π) * N frames... The classic zoetrope: frames per revolution = N; the animation loops when each frame advances by one slot per strobe: strobe rate = rotation rate × N.
• Modes:
  1. Strobe mode: dark scene with a strobe light flashing at the sync rate (default light off; flash illuminates). Render with flashes — physically emulate. Implementation: modulate light intensity with short pulses. To get crisp animation, pulse width short.
  2. Shutter mode: continuous light, but we emulate a camera shutter: only show the scene during brief intervals — i.e., flash render the frame only at synced times (like a stroboscopic camera). Simplest: same as strobe but screen flashes instead of light.
  3. Slit mode (classic zoetrope drum): a drum with slits around the sculpture — you look through the slits. Hard to do naturally in 3D... could do: a cylinder wall with slit gaps around the scene; camera outside looking in through the slits. Actually that's exactly how a real zoetrope works! We could render the drum with vertical slit gaps (alpha or actual geometry gaps between panels). When spinning at sync speed, through the slits you see the animation. This works with a real rotating drum and static camera — physically authentic. The slits must be on the side facing the viewer; as the drum spins you see through successive slits and see successive frames at the same apparent location. It works in reality, so it should work in the sim. This is super cool: a physically authentic zoetrope.
  4. Wagon-wheel mode: spin at slightly off-sync rates to see slow-forward/backward drift (aliasing) — the "temporal aliasing" playground with a frequency slider to find sync points.

Interactive elements:

• Speed slider (RPM), with "snap to sync" button.
• Strobe frequency auto-synced or manual.
• Multiple animation presets: bouncing ball (squash & stretch), walking skeleton-ish creature (simple procedural stick figure), flapping bird/butterfly, growing flower, jumping character, spinning dancer (procedural), dolphin wave (row of jumping dolphins?). Procedurally animated rigs posed by phase parameter.
• Number of frames slider (8–24).
• Lighting: museum-like dark room, spot lights, bloom, the drum/sculpture glossy.
• Toggle: strobe light / continuous light / drum slits view.
• Freeze frame: stop rotation but advance phase (shows it's a static sculpture — the "aha").
• HUD: RPM, strobe Hz, ratio, sync indicator.

Implementation details:

• Use InstancedMesh where possible for frame figures; each instance gets a "frameIndex" attribute → in shader compute pose from phase = frameIndex / N via vertex-shader procedural animation! That's advanced: pose computed in vertex shader by phase (e.g., for bouncing ball: scale/offset uniforms per instance). For complex rigs (walkers), CPU-computed per-instance transforms might be simpler with merged geometry per frame (N static meshes) — N copies of a procedural character each posed differently. With N ≤ 24 and each figure maybe 2–5k tris, that's fine (< 120k tris).

Simplest robust approach: build each frame as a merged BufferGeometry (posed by frame phase on CPU), then merge all frames into one sculpture geometry with vertex colors. Spin the whole thing. No per-frame instancing needed; static geometry rotating — cheap and looks like a real 3D-printed zoetrope sculpture.

Posing on CPU per frame: e.g., for a walking cat/fox... too complex. Keep figures procedural and elegant:

Preset 1: Bounce — a ball that squashes & stretches as it bounces, with ghost trails? Classic animation exercise; great with 12–16 frames. Preset 2: Bird — flapping butterfly/bird: body + two wings rotating by sin(phase). Wings as flattened boxes/planes. 12 frames. Lovely. Preset 3: Bloom — a flower growing: stem rising, petals unfolding, then it loops (grow→bloom→reset). Use spheres/cones/petals scaled by phase. Loop-friendly. Preset 4: Walker — simple two-legged walker (spheres/capsules legs with sin-driven swing, arms counter-swing, body bob). Cute robot/creature. Preset 5: Dolphin wave — a jumping dolphin arc with tail wiggle? Could do "salmon leap": an arc path with body bend. Maybe "Spinner": a pirouetting abstract dancer made of stacked shapes... Simpler: Helix crawler: a caterpillar/inchworm that arches and extends. Inchworm: segments bend into an arch then flatten — very readable animation. Preset 6: Galaxy twirl — abstract: a ribbon/petal spiral that opens and closes (for non-representational beauty).

4–5 presets is plenty: Bounce, Bird (moth), Walker (bot), Bloom (flower), Inchworm. Each defined by a function poseFigure(phase) returning geometry contributions. I'll write a small "builder" that pushes transformed primitives (sphere, box, cone, cylinder, capsule approximations) into arrays with per-vertex color, then merge.

Loop requirement: animation must loop seamlessly across the ring (frame N-1 → frame 0 adjacent). Use periodic functions of phase (sin/cos of 2π·phase) — guaranteed loop.

The drum (slit mode): a cylinder shell around the sculpture with N slits. Build as N curved panels (each spanning (2π/N)·0.8, slit gap 0.2). Drum rotates WITH the sculpture (as in real zoetropes, slits are in the same spinning drum above the figures; viewer looks through slits at figures across the drum which appear in the opposite side). Hmm, real zoetrope: figures on the inside bottom of the drum, slits in the drum wall above them; you look through the slits and see the figures on the opposite inner wall, blurred into animation. For our 3D version: put the figures in the middle (a carousel), and a drum wall with slits rotating at the same rate; camera looks through slits → sees frames at fixed angular position, successive slits reveal successive frames. Since the drum+figures rotate together, each slit corresponds to a fixed figure... wait.

Real zoetrope physics: the drum spins; the slit passes your eye at angular position θ_eye. When a slit is at θ_eye, you see the figure currently at the opposite side θ_eye+π. Since figures rotate with the drum, at time t the figure at θ_eye+π is the one whose home angle is θ_eye+π - ωt... but slit at θ_eye has home angle θ_eye - ωt. Figures are indexed by home angle; the slit aligned with figure k (same home angle sector) passes your eye at t_k; at that time the figure you see on the opposite side has home angle θ_eye+π-ωt_k = home of slit + π. That figure is the one half a drum across from slit k — a fixed figure for each slit, so you'd see the same figure every time?? No wait — with N slits and N figures, slit k always views figure (k + N/2) mod N — the SAME figure each time. That can't be right...

Let me redo this. Real zoetrope: N images equally spaced inside the drum, N slits in the wall above them. The slits are positioned BETWEEN images typically (slit k above the boundary between images). When you look through a slit, you see the image on the opposite side of the drum. As the drum rotates by one image-spacing (1/N rev), each slit is replaced by the next slit, and each image is replaced by the next image. At the moment a slit crosses your line of sight, the image at the opposite viewing position is image k+1 where previously (one spacing earlier) it was image k... no wait, opposite: the slit at your eye position at time t is at angle ωt (moving); the image you see is at angle ωt + π. One spacing-time later, a different slit is at your eye (slit that was at angle ωt - 2π/N before), and the image now at your view position is the one that was at ωt + π - 2π/N. So the image at the viewed position changes by one frame per slit-crossing — because different images rotate into the viewed position. And the image at the viewed position is momentarily stationary relative to... hmm, it's moving continuously, so during the brief time the slit is open (passing across your view), the image moves — that's why it's a bit blurry in real zoetropes unless fast. Yes — real zoetropes work like this: successive slits reveal successive frames at the same viewing position. My earlier confusion: the slit at eye at time t_k has home angle θ_k, and views figure with home angle θ_k + π — so for slit k you always view figure k+N/2 — BUT the "figure home angle" isn't what matters: what matters is the angular POSITION at viewing time. Ugh, since figure k+N/2 is at position θ_k+π+ωt... and the viewing ray from the slit at position θ_k+ωt looks across to position θ_k+ωt+π. The figure at that position at time t is the one with home angle θ_k+π (slit k's opposite). So slit k always shows figure (k+N/2). Since successive slits (k, k+1, k+2...) pass your eye, you see figures k+N/2, k+1+N/2, ... — SUCCESSIVE frames! There it is. Each slit is tied to a fixed figure, but your eye sees successive slits → successive figures. It works because you see a different slit each time. And during the open time the figure moves slightly, but the slit also moves at the same angular velocity, so the figure remains centered in view through the slit! (figure and slit rotate at the same rate; figure stays opposite its slit). So the view is steady, not blurry.

So a physically authentic drum zoetrope works: N slits ↔ N figures, each slit diametrically opposite "its" figure... and as the drum spins, you look through whichever slit passes in front and see successive frames. In practice, with perspective and a slit above the figure (not diametrically opposite at same height but at different height), geometry differs: real zoetropes have slits in the upper drum wall and figures on the lower inner wall; you look through a slit at the far side, down at the figures opposite. Same principle.

For a nicer 3D presentation, I can ALSO put the figures in the center carousel and view through the spinning slitted drum from outside: slit k at your eye at time t shows the figure at the center... the figures are at the center region, visible through any slit — the figure you'd see is whatever figure is near the far side of the drum from your viewpoint... Actually if figures are a carousel in the middle at radius r < R_drum, looking through a slit at the near side you see figures near the far side at radius r from center — angular position ≈ θ_eye + π (parallax slight). Same as before: works.

Implementation plan for drum mode: drum = N panels arranged in cylinder, rotating with the carousel group. Camera outside. It should genuinely work. But bloom + dark room + it may be visually busy. Default mode: Strobe mode (most reliable and dramatic). Drum mode as a toggle "authentic drum". Also shutter/flash maybe same as strobe.

Strobe implementation: keep scene lights at low ambient; add a strong strobe: flash the key lights with a pulse at f_strobe. Since monitor refresh is 60Hz and strobe ~ N·(rev rate) e.g. 12 frames × 1.5 rev/s = 18Hz — flashing lights at 18 Hz on a 60Hz display: pulses of 1-2 frames duration. Displayed animation updates at 18Hz — looks like classic flipbook. Good.

Better implementation: instead of modulating physical lights (which affects shadows etc.), do a "shutter": composite — only render scene to screen during strobe pulse (flash the canvas). Between pulses, show black (or dim afterglow). This is cheap: render scene every frame for consistency (shadows), but overlay a black fullscreen quad with opacity 1 outside pulse, or simply clear to black and skip final pass. With EffectComposer, simplest: render normally but set a global "darkness" uniform... Actually simplest: render the scene each frame; if outside pulse window, draw a black overlay div via CSS opacity. A CSS overlay flash is trivial: #shutter {background:#000; opacity:0 or 1} with transition none. Pulse duty cycle ~15%. This emulates strobe/shutter perfectly and cheaply. But bloom afterglow will be cut off — fine, adds to the strobe feel.

Alternative elegant approach: modulate light intensity in-scene (spot lights intensity pulse) — with bloom, flashes glow. I like actual light strobing: more physical (light bounces). But shadows need to update — fine.

Hmm, one catch: at 18 Hz strobing with 60Hz display, the pulse timing vs rAF quantization (16.7ms) causes some judder; acceptable. Sync = strobe freq = revRate × N exactly; the figure under view position advances by exactly one frame per flash → perfect animation. Slider for "drift" to detune slightly and see temporal aliasing (slow motion forward/backward). That's the killer interactive: detune slider −5%..+5%, snap button. Also RPM slider.

Also nice: "freeze rotation, animate phase" — a button that stops the spin and instead shows a single figure animating in place (to reveal the trick). Implement: stop group rotation; animate a "globalPhase" that... but figures are static geometry; to animate one figure we'd need to swap visible frame. Simplest: build all N frame-geometries as SEPARATE meshes parented at the same center, only one visible at a time; for the carousel, position each at its angle. So each frame = one mesh; carousel places mesh k at angle 2πk/N. "Isolate" mode: move all to center (or just camera zoom to one slot) and cycle visibility at ~12fps. Easy since meshes are separate.

Also ghost/x-ray mode? skip.

Presets via builder functions returning per-frame merged geometry with vertex colors; material: MeshStandardMaterial with vertexColors, some emissive via vertex color? For bloom accents, use a second emissive-only mesh (e.g., glowing eyes/accents) or emissiveVertexColors... MeshStandardMaterial has single emissive color. Use two materials/groups: standard + emissive accent meshes (MeshBasicMaterial with color >1 for bloom). Keep simple: each preset returns {solid: BufferGeometry, glow: BufferGeometry}.

Post-processing: UnrealBloomPass + maybe vignette shader. EffectComposer via CDN examples/jsm. Use three@0.160+ import map, matching other demos. Let me check what version recent demos use (058).

Controls: OrbitControls. HUD styled like other demos (neon panels). Buttons: presets, frames −/+, snap, mode (strobe/drum/free light), spin RPM slider, drift slider, isolate toggle, audio? Generative audio: a soft rhythmic tick synced to strobe + ambient pad — nice touch (WebAudio). Keep modest: a toggle-able subtle "strobe tick" and ambient hum tied to RPM.

Performance: N up to 24 frames; walker geometry maybe 3k tris/frame → 72k, fine.

Also floor: reflective dark disc platform, museum vibe. Simple: dark circular platform + grid? Keep classy: radial gradient floor with subtle ring pattern, contact shadow fake (blob shadows under figures? they're floating on carousel disc). Put figures standing on a spinning disc (the carousel) — that reads clearly.

Scene composition:

• Dark room (#05060a fog).
• Carousel: base cylinder (brushed dark metal), top disc, central column maybe none.
• Figures around radius r=2.2 on the disc.
• Lighting: dim ambient, 2 rim spotlights (colored teal/magenta) at low intensity; main strobe light: a bright spotlight from above-front that pulses.
• Bloom threshold ~0.7.
• Drum mode: cylinder of N panels around, top ring, panels semi-matte dark with edge glow? Panels must block view: opaque. Slits between them ~15% of spacing.

Camera: default at radius ~6, height ~2.5, looking at carousel center height ~1.2.

Sync math:

• revRate (rev/s) = RPM/60.
• Frame rate of animation (frames per second passing a fixed point) f = revRate × N.
• Strobe flashes at f (flash phase = time × f mod 1; flash when < duty).
• The animation loops with period 1 loop per revolution (frames advance one per strobe). For animations that should loop at a different rate relative to rotation (e.g., walker takes 2 steps per revolution), use pose = f(phase × cycles) with integer cycles — fine.

Drift: strobeFreq = f × (1 + drift). Drift slider −0.1..0.1. Sync indicator: |drift×f| small → green "SYNC".

Also RPM presets: slow 20 RPM, 45, 60, 78 (vinyl speeds — cute!). With N=12: 45 RPM = 0.75 rev/s → 9 fps strobe. 78 RPM → 15.6 fps. Good range. Default 45 RPM, N=12.

Sound design (WebAudio, toggle default off? Browsers require gesture; start muted with a button):

• Tick on each strobe flash (short filtered noise/click), volume low.
• Low ambient hum whose pitch follows RPM.
• A soft chord pad. Keep simple, avoid annoyance.

HUD: title "ZOETROPE", subtitle "stroboscopic sculpture garden". Stats: RPM, frames N, strobe Hz, drift %, SYNC badge. Buttons row: presets (Bounce/Moth/Walker/Bloom/Inchworm), mode (Strobe/Drum/Continuous), Isolate (hold to see single frame animate), Snap, Sound, quality maybe not needed.

Also nice: hold "PI" (phase inspect): pauses rotation and flashes each frame individually moving through the ring? Eh, isolate covers it.

Educational blurb: small info panel explaining: "Each figure is a static sculpture — the motion exists only in your strobe-synced vision."

Frame count change: rebuild carousel geometry. Rebuild is fast (CPU geometry gen), fine.

Preset builders — the heart. Let me design each with ~1.5–3k tris per frame using low-seg primitives:

Helper: class GeoBatch { add(geom, matrix, color) } merging transformed clones with color attribute. Use BufferGeometryUtils.mergeGeometries. Import from examples/jsm/utils/BufferGeometryUtils.js.

Poses (phase p in [0,1), loop-safe):

1. Bounce (ball): y = |sin(π p)|? For loop: ball bounces once per loop: y = h·|cos(2π p)|? Squash when low: s = squash factor by velocity: at bottom s_y=0.6, s_xz=1.4; at top stretch s_y=1.25. Smooth: squash = 1 - 0.5·(1-yNorm)^3? Let's: yN = |cos(2πp)| (1 at top). h = 0.15 + yN·1.6. sy = 0.65+0.6·yN, sxz = 1.25-0.35·yN. Ball radius 0.35. Plus glow core sphere inside (small, emissive). Plus motion-smear? No — real zoetrope frames are static; keep ball only. Maybe a tiny shadow ellipse on disc? Real sculpture wouldn't have it; skip (we have real shadows).

2. Moth/bird: body (elongated sphere/capsule along x), two wings: each wing = flattened, tapered shape — use a scaled, sheared box or a custom petal shape via ShapeGeometry extruded thin? Simplest: two "wings" from scaled spheres (flattened ellipsoids) rotated about body's long axis by flap = sin(2πp·2)·55° (two flaps per loop). Wing pivots at body sides. Antennae: two thin cones. Glow: two small sphere eyes + wing tips glow dots. Body hovers at fixed height with slight bob. Elegant with teal/magenta wings.

3. Walker (little robot): body = rounded box (box scaled), head = sphere with two glow eyes, legs = two capsule-ish cylinders swinging ±30° sin(2πp·2) (2 steps/loop), feet = small boxes attached at leg ends, arms = thin cylinders counter-swing, antenna with glow tip bobbing. Body bob y = |sin(2πp·2)|·0.06, slight tilt. Feet planted illusion is approximate — fine.

4. Bloom (flower): stem = curved stack of cylinders growing height g(p) = smoothstep... loop: grows 0→1 in p∈[0,0.85], then quick fade? A flower that grows then RESETS is jarring on a loop; better cyclic: petals open & close rhythmically (breathing flower) with swaying stem. Petals: 6 petals (flattened scaled spheres or custom shape) tilt from closed (15°) to open (70°) by 0.5+0.5 sin(2πp). Stem sways ±6°. Center glow sphere pulsing. Leaves: 2 small petals on stem. This loops beautifully.

5. Inchworm: 7 segments (spheres) along body; arch: each segment's y = A·sin(π·u)·arch(p shifted)... Classic inchworm gait: a "hump" wave travels along the body: y_i = hump(t - i/N)·height, where hump is a raised-cosine pulse traveling → body scrunches then extends. Position x_i also compresses near hump. Implement: u_i = i/(n-1); phase φ = (p - u_i·0.5) mod 1; lift = exp(-((φ-0.5)/0.18)²)·0.5; x_i = (u_i - 0.5)·L·(1 - 0.35·exp(-((φ-0.5)/0.2)²)). Head sphere with glow eyes at i=n-1. Cute and very readable. Body colors gradient.

Maybe 6th: Helix/Spinner abstract: torus knot-like petal ring opening — skip, 5 is plenty. Actually a 6th simple one adds variety: Jumping fish arc? or Heart pulse (scaling heart shapes)? A pulsing heart is trivial with spheres... skip. 5 presets good.

Frame geometry counts: moth: body (sphere 12×8 ~ 200 tris) + wings 2×(sphere scaled, 200) + antennae 2×cone(24) + head → ~700 tris. ×24 frames = 17k tris. Great, can afford higher segs: use sphere 16×12.

Drum panels: N panels, each a curved box: use CylinderGeometry segment (thetaStart..thetaLength) open-ended with small height, plus top ring torus? Build one merged drum: for each panel: CylinderGeometry(R, R, H, 6, 1, true, start, len) + top ring band (cylinder band short). Merge. Material: dark, slight metalness; inner face visible (side: DoubleSide). Slit glow: thin emissive strip at panel edges? Subtle: edge glow via small emissive boxes at panel sides — may look odd; skip, keep slit dark.

Drum occludes figures partially even when strobe? In drum mode, you look THROUGH slits — authentic. Camera positioned outside. It genuinely works in real-time rendering (each rendered frame shows through whichever slits are in front). On a 60Hz monitor with drum at 0.75 rev/s × 12 slits = 9 slit-passes/s... The monitor samples the continuously rotating drum: each displayed frame, a slit is somewhere; the figure seen through it is at its current rotation — you'd see successive frames each ~1/9s but with the figures MOVING between samples (temporal aliasing of the display!). Hmm wait — in reality the eye integrates continuously; on a 60Hz display, the display samples time. The figure visible through the slit moves with the drum; at 60fps sampling, successive displayed frames show the drum rotated by ω/60; through a given slit you see the figure opposite — between displayed frames the figure moves 0.75·360/60 = 4.5° — small, so the figure appears to move slowly?? No — the slit also moves 4.5° per frame, and the figure stays opposite the slit... so through the slit, the figure appears STATIONARY (it co-rotates with the slit). And each new slit brings the next figure into the viewing position. At 60Hz sampling: slit passes the eye position in ~ (slitWidth angle)/(ω) seconds: slit angular width 0.2·30° = 6° → 6°/270°/s = 22ms ≈ 1.3 display frames. So each displayed frame mostly shows a slit mid-pass with its figure frozen opposite. As the drum rotates, the figure SEEN changes continuously?? No: during slit k's pass, you see figure k (frozen relative to slit, 22ms), then slit k+1 shows figure k+1. So displayed animation = 9 fps stepping through frames — animation! Each displayed frame shows whichever slit is currently crossing. During transitions (slit edge crossing eye), brief occlusion/blur. This genuinely works on a 60Hz display just like in reality.

BUT there's subtlety: the figure visible through slit k is the one diametrically opposite (positionally), which is a FIXED figure per slit as derived. Viewing geometry: eye at camera, slit on near side of drum, figure near far side at radius r: the line from eye through slit hits the figure region near angle θ_slit + π — figure k' whose CURRENT position is there. Since everything co-rotates, figure k' is fixed per slit k. As drum rotates, when slit k+1 replaces slit k at the eye position, figure k'+1 is now at the viewed spot. Animation advances. During the 22ms pass, figure k' is at the viewed spot the whole time (co-rotating). Between passes (panel blocks, 130ms), screen shows panel → mostly dark with 9 brief reveals/s. Flickery but authentic! Real zoetropes flicker too. With bloom it'll look moody. Default mode = strobe (bright, clear), drum = authentic mode.

To reduce flicker in drum mode, make slits wider (30% duty) → 3.3 display frames per pass, still fine.

Also add subtle "impossible" delight: in continuous-light mode with no strobe, you see spinning blur — then engaging strobe reveals animation. Default: strobe ON at sync.

Isolate mode: button toggles: rotation stops (group rotation fixed), camera auto-aims at one figure (move it to center? simpler: keep positions, point camera at figure 0 position, closer), and cycle which frame-mesh is visible at 12fps with small slide-in? Simplest: all meshes moved to carousel center stacked (set each mesh position to center, rotation 0), only one visible, cycle visible at 12 Hz. On exit, restore. Implement by storing home transforms.

Alright — also strobe implementation detail: I said modulate lights vs overlay shutter. Decision: modulate a dedicated strobe SpotLight + small ambient pulse, AND keep continuous dim fill so between flashes you see a faint ghost (nice, shows the sculpture). Duty cycle: flash 12% of period, with smooth pulse shape (raised cosine). Light intensity = base·pulse + fill. The animation appears at strobe rate. Bloom pops on flashes. This is physically pleasing and simple. No overlay needed.

One more consideration: the figures must be lit when strobe fires while at various angles — spotlight from above covering whole carousel (cone angle wide), plus ambient fill. OK.

Camera slight auto-orbit? No — motion sickness with strobe; allow user orbit. Actually slow auto-orbit (toggleable) looks great in continuous mode; in strobe mode a moving camera is fine too since sync is angular-position independent (strobe synced to rotation rate; from any viewpoint, the figure at any given world angle is the same each flash... wait: strobe flashes at f = revRate×N; the figure at world angle θ at flash time t: figure with home θ - ωt; successive flashes t+1/f: home θ - ωt - 2π/N → previous frame index → you see successive frames at fixed world position regardless of camera. Yes! Camera can move freely. Auto-orbit slow = mesmerizing. Default ON at very slow speed (3°/s), user drag overrides temporarily (OrbitControls with autoRotate = true; user interaction still possible).

Audio: WebAudio:

• Master gain, toggle.
• Ambient: two detuned sine/triangle oscillators low (55Hz, 55.5) + slow LFO → gentle hum, gain by RPM.
• Strobe tick: short (5ms) bandpass-filtered noise burst or a soft sine blip at 1200Hz with fast decay, on each flash. At 9-15 ticks/s it grooves. Slight pitch by preset. Keep volume low.
• Drift changes tick rate accordingly (compute next tick times from phase accumulation in JS, schedule ahead). Implement scheduler with audio clock: accumulate phase += f_strobe·dt; when wraps, schedule tick at that time. Simple: in rAF, if audioOn and phase wrapped, trigger tick (setTimeout-free; just play immediately — latency ok).

Code structure: single index.html, import map three@0.165.0 (check 058 for version used). Modules: OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass, BufferGeometryUtils. Then main script.

Panels styling: reuse neon mono style consistent with collection.

Extra flourish: a faint "temporal aliasing" readout showing apparent fps (strobe - actual) — show "APPARENT MOTION: ×1.00 fwd". And a "SYNC" lamp: green when |apparent rate| < 0.5 fps.

Floor: big dark circle with radial rings texture via canvas texture? Simple: CircleGeometry with MeshStandardMaterial dark + a ring of small emissive dots marking frame positions (helps see sync). Plus subtle polar grid: canvas-generated texture, cheap. Add glow ring under carousel.

Shadows: strobe light casts shadow → figures' shadows on disc pop during flashes. Enable shadows on spotlight, figures castShadow, disc receive. 24 frames × meshes — one merged mesh per frame, so 24 casters, fine. In isolate, same.

Renderer: antialias, ACES tone mapping, sRGB. Pixel ratio clamp 1.75. Resize handler. Quality toggle? Auto-degrade if slow (measure fps, reduce bloom res / pixelRatio) — previous demos have adaptive quality; include a simple version.

Edge cases: WebGL2 unavailable → overlay message (r160+ requires WebGL2; renderer creation throws → show fallback note).

Import map: use unpkg three@0.165.0 like other demos presumably. Let me check 058's import map quickly.

Then also write the demo and update the main index: add 058 (missing) AND 059 cards. Wait — should I verify 058 works? The previous run set up testing but hit time limit; results in /tmp/ptest are gone (fresh container, /tmp is ephemeral? The filesystem /tmp may persist within the same VM? The processes are gone, so container was reset; /tmp likely wiped). I could do a quick syntax sanity check on 058 (node --check won't work for HTML). Given it was tested during creation and only index update remained, I'll trust it and just add the card. I'll focus time on making 059 excellent and do a basic validation of 059 (maybe with a headless browser if available — check what's installed: previous run installed xvfb via apk... but container reset means it's gone. Let me check for chromium/firefox availability; if cheap, do a quick smoke test with a simple node script + puppeteer? Puppeteer needs install... time constraints. A simpler validation: ensure JS syntax valid by extracting module script and running node --check on it (ES module with imports — node --check supports ESM syntax with .mjs extension). That catches typos. I'll do that.)

Let me check 058's import map + three version for consistency.

Demos use three@0.160.0 via unpkg with import maps. I'll use the same for consistency.

First, let me add the 058 card to the index (it was missed). Then create demo 059-zoetrope.

Index card for 058:

Description from the meta: "A GPU particle-life soup — thousands of glowing organisms of up to 8 species attract and repel under an editable rule matrix, self-organizing into living cells, hunters and rotors — with phosphor trails, bloom, generative audio and live ecology stats."

Insert before the 057 card.

**********************************************************************************************************************e".

The indentation is 14 spaces for the comment ( <!--), but my search used 16 spaces. Let me match with exact indentation: <!-- New demos are added here -->\n <a class="demo-card" href="./057-basin/index.html">.

Let me do a python-based insertion to be safe.

058 is now in the index. Now create demo 059-zoetrope. Let me write the full HTML file. This will be a large file (~50-60KB). I'll write it carefully.

Key structure:

1. HTML head: meta, title "Zoetrope — Stroboscopic Sculpture Garden", styles (neon mono aesthetic consistent with collection).
2. Panels:
   • #pt: title + subtitle (top-left)
   • #pc: buttons top-right: preset chips (Bounce, Moth, Walker, Bloom, Worm), mode (Strobe/Drum/Still), Isolate, Sound, Snap
   • #pl: sliders left: Spin RPM, Frames N, Drift %, Strobe duty? maybe Glow
   • #ps: stats bottom-left: RPM, strobe Hz, apparent motion, sync badge
   • #toast for messages
   • info hint bottom-right
3. Import map three@0.160.0.
4. Module script.

Let me write the JS carefully.

Geometry batch helper:

Careful: mergeGeometries requires consistent attributes (position, normal, uv). Sphere/Box/Cone/Cylinder all have those. OK.

Shared primitive geometries to avoid recreating:

Preset builders: function buildFrame(p, solid: Batch, glow: Batch) where p in [0,1).

BOUNCE:

Colors: ball light gray; core glow teal.

MOTH:

Hmm, easier: scale (0.42, 0.16, 0.16) directly gives ellipsoid long along X. Yes: solid.add(PRIM.sphere, color, 0,y,0, 0,0,0, 0.42,0.16,0.16) → long along X. Good, no rotation.

Head sphere at x=+0.42: solid.add(PRIM.sphereLow, 0x39435a, 0.44,y+0.03,0, scale 0.13). Eyes glow: two small spheres at (0.52, y+0.06, ±0.06), scale 0.035, magenta glow. Antennae: thin cones from head, tilted: length 0.3, rotate. Cone default along +Y, apex at +Y? ConeGeometry: apex at +y/2? Cone extends from -h/2 to +h/2 with tip at +y/2. Position: base at head. rx rotation to tilt forward: rotate about Z by -60° for right... antennas point forward-up-out. Use add(cone, color, 0.5, y+0.16, ±0.05, rotX=±0.35, 0, rotZ=-0.5, 0.02,0.3,0.02). Fine-tune not critical. Wings: each wing = flattened ellipsoid: scale (0.55, 0.03, 0.34), offset z=±0.36, x=-0.05; rotation about X axis: rz? Wing on +Z side flaps around X axis: rx = wingA; for -Z side rx = -wingA. The wing pivot should be at body (z=0), but geometry offset is at z=±0.36 — rotation about X at origin would swing the wing around the body axis correctly if we rotate first then... Our Batch.add composes T·R·S applied to geometry: vertices scaled, rotated about origin, then translated. For wing: we want rotate about X (flap), then translate to body pos. Wing geometry centered at its own center (x=-0.05?) — put wing center offset INTO translation? If we translate wing center to (x=-0.05, y, z=±0.36·cos(flap)?) no — rotation about X through body center line moves the wing in the Y-Z plane: a point at (0,0,0.36) rotated by angle a about X → (0, -0.36 sin a? ... (y,z)→(y cos a - z sin a, y sin a + z cos a)? Rotation about X: y' = y cos a − z sin a, z' = y sin a + z cos a. Point (0,0,0.36) → y' = −0.36 sin a, z' = 0.36 cos a. So wing rises as a increases from 0.

So for wing +: geometry offset at z=+0.34 (within geometry via translation of the ellipse center?) Simplest: build wing geometry pre-offset: clone sphere, scale (0.5,0.035,0.3), translate (0,0,0.32) — i.e., use Batch.add with translation (0,0,0.32) and rotation rx=wingA — since compose does T·R·S, translation is applied AFTER rotation: vertices v' = T + R·S·v. The wing's local points (centered at origin after S) get rotated about origin (body axis) then translated by (0,0,0.32) — that translates the whole rotated wing to z=0.32 fixed — wrong; the translation should be INSIDE the rotation.

Fix: give Batch.add an option order, or simpler: pre-translate geometry: in pose function, create wing geometry once per frame: clone PRIM.sphere, apply scale+translate (0,0,0.34), then Batch.add(wingGeo, color, x,y,z, rx,0,0) with rx rotation about origin (body axis), translation to body position. That works: v' = T_body + R_x(a)·S·(v + ... wait Batch applies S then R then T to the cloned geo's existing vertices. If the geo already has offset baked, then R rotates around origin (body center) correctly, then T moves to body position.

So Batch.add(geo,...) clones geo then applies S,R,T. For wings: pass a pre-made wingGeo (sphere scaled+offset baked once globally), then add(wingGeo, color, bodyX, bodyY, 0, wingA, 0, 0, 1). S=1, R=rx rotation, T=body pos. Wing sweeps around body axis. For -Z wing: use wingGeoNeg (offset z=-0.34) and rx=-wingA.

I'll create preset-specific pre-transformed geos as needed inside the builder using a small helper xform(geo, ...) returning a new geometry. Fine.

Wing shape: flattened ellipse long along X: scale (0.62, 0.03, 0.34) then translate z ±0.30, x -0.08. Looks like a moth wing. Add glow tip: small sphere at wing tip: position rotates with wing: compute tip pos manually: tip local (x=-0.35?, z=±0.62) rotate about X by ±wingA: y_t = y - sin(a)·(±0.62)? For +Z wing rotated by a: (0,0,z)→(0,-z sin a, z cos a). tip at local z=0.6: world (x=-0.08?, y + (-0.6 sin a), 0.6 cos a). Use glow.add(sphereLow, 0x66ffe0, -0.15, y - 0.6Math.sin(a), 0.6Math.cos(a), scale 0.045). Similarly mirrored. Nice detail — glowing wingtips trace arcs.

Body tilt slight: whole moth could pitch; skip.

WALKER (little robot "Tinny"):

Wait cylinder along Y rotated about Z by a: its center should be at hip + half*(dir): center = (sin(a)0.25? dir = (sin a, -cos a,0)·0.5 length → half = 0.25: center = (0.25 sin a, baseY - 0.25 cos a, z). I wrote fx0.5 = 0.25 sin a. baseY+fy*0.5 = baseY - 0.25 cos a. Yes correct. Rotation rz=a for the cylinder: cylinder axis Y rotated about Z by a gives axis dir (−sin a? Rotation about Z: x' = x cos a − y sin a, y' = x sin a + y cos a. Axis (0,1,0) → (−sin a, cos a, 0). That points up-leaning −x. From hip going down we want dir (sin a, −cos a) = −(−sin a, cos a) = axis flipped — same line, fine (cylinder symmetric). Good: rz = a gives axis along (−sin a, cos a) ≡ (sin a, −cos a) line. OK.

Body: rounded box at (0, baseY+0.28, 0) scale (0.34,0.4,0.3)? Box scale: use box scaled (0.36, 0.42, 0.3), plus tilt slight rx? pitch forward about Z by -0.06+stepC0.04? Keep upright with slight rock about Z: rz = stepC0.05. Head: sphere at (0.02, baseY+0.62, 0) scale 0.17; eyes glow at (0.15, baseY+0.66, ±0.07) scale 0.035 teal. Antenna: thin cyl at (0, baseY+0.82, 0) tilt rz=-0.2, scale (0.02,0.22,0.02); tip glow sphere at computed offset: tip local (0, 0.22,0) rotated rz -0.2 → (0.22·sin0.2? x' = -y sin a with a=-0.2: -0.22·(-0.1987)=0.0437, y'=0.22·cos0.2=0.2156). tip ≈ (0.044, baseY+0.82+0.216? careful antenna center at baseY+0.82 → tip = center + rotated half-length (0.11): half (0,0.11) → (0.0219, 0.1078) → tip (0.022, baseY+0.928). Glow scale 0.03 magenta. Arms: thin cyls at sides swinging opposite to legs: shoulder (0, baseY+0.42, side0.2), arm length 0.34, angle = -legAside*0.8 (counter-swing) about Z... arms hang at sides swinging fore-aft too (rotation about Z axis through shoulder — same as legs). center = shoulder + 0.17·dir, rz = a_arm. Hands glow small.

Colors: body light #aab4c8, head #d7deea, legs gray, feet dark, eyes teal glow, antenna tip magenta.

BLOOM (flower):

Stem rotated rz=sway: axis (−sin sway, cos sway). center = (0,0,0)+dir*stemH/2 = (−sin(sway)*0.45, cos(sway)*0.45). Top of stem = 2×center = (−sin·0.9, cos·0.9). Flower head at stem top. Petals: 6 around axis = stem dir. For simplicity keep sway tiny (0.1 rad) and attach head at computed top with petals tilted from stem direction... but petal ring orientation math gets involved. Simplify: keep stem vertical (no sway) but petals rotate slowly? Petal ring at top (0, 0.92, 0). Each petal: pre-baked petalGeo (sphere scaled (0.16, 0.04, 0.3), offset z +0.24 — petal extends outward along +Z in its local frame). Petal k: first rotate about Y by k·60°, then tilt about X? Order: we want petals pointing outward and tilting up/down. Compose in geo-space: petal local extends +Z. Tilt = rotation about X by -open (lifts tip up: point (0,0,0.24) rotated about X by angle t → y' = -0.24 sin t? For t negative (rx=-open): y' = -z sin(rx) = -0.24·sin(-open)=0.24 sin open — tip rises. Good.) Then rotate about Y by θ_k to distribute around. Batch.add applies single Euler (rx, ry, rz) with default order 'XYZ' (R = Rz·Ry·Rx? THREE Euler XYZ means rotation matrix = Rz? Actually THREE.Euler 'XYZ' order applies X then Y then Z? The matrix is composed as R = Rz * Ry * Rx? In three.js, Euler order 'XYZ' means: rotate about X first, then Y, then Z (intrinsic?) — the resulting matrix is Rx then Ry then Rz applied in that order to the vector? Three's Quaternion.setFromEuler for 'XYZ' yields q = qx * qy * qz? Let me recall: In three.js, Euler order 'XYZ' = rotations are applied in the order X, Y, Z (extrinsic? intrinsic?). The Matrix4.makeRotationFromEuler with XYZ computes: te = ... it's R = Rx·Ry·Rz? Hmm. Commonly: 'XYZ' means rotation matrix R = Rz·Ry·Rx? No...

Three.js docs: "the order in which to apply rotations" — 'XYZ' means rotate around X, then Y, then Z (applied right-to-left in matrix mult? The implementation: for XYZ, m = RotX * RotY * RotZ? Let me just avoid ambiguity: do two Batch steps: pre-bake tilt into geometry via a helper that returns transformed geo, then Batch.add with ry only. I.e., petalGeoTilted = xform(petalGeo, 0,0,0, -open, 0,0, 1) — bake tilt; then add(petalGeoTilted, color, hx, hy, hz, 0, θ_k, 0). Rotation about Y applied to already-tilted petal: distributes around. Correct and unambiguous (single axis each step).

xform helper:

Batch.add could itself accept pre-baked geos (it clones and transforms again — wasteful but fine).

For per-frame petal tilt (open varies per frame), bake tilt per frame — 6 clones per frame ×24 = 144 small clones per build; fine.

Petal color: pink/magenta #d98bc0 or gradient; center: sphere glow amber pulsing scale 0.12+breathe*0.05; sepals small green cones under head; leaves: two small petals mid-stem (bake tilt, ry two angles).

Pistil glow: amber #ffc357.

Flower faces up (petals around vertical axis). Petal tip height: tilt open from vertical? I set petal extends +Z (horizontal) then rx=-open lifts tip up by open. Closed flower = petals up (tip up): open ~ 1.2 rad (70°) lifts to near vertical; open flower = tip out (open ~0.3). So map breathe: closed when breathe low: open = 1.25 - breathe0.95 (0.3..1.25). Plus petal ring slowly rotating over loop: θ_offset = TAUp/6? A 60° rotation over the loop maps petal k to k+1 position — seamless! Nice: the flower slowly spins one petal-slot per loop. Add θ0 = TAU*p/6.

INCHWORM:

Hmm loop-safety: the hump travels along body as p goes 0→1; for seamless loop the wave must be periodic in both. Use periodic Gaussian? Simpler: use sine-based: lift = Math.max(0, Math.sin(TAU*(p - u0.55))) → hump travels; sin is periodic so wrapping seamless. width: sin positive half. lift peaks 1. Also compress: x position scrunch toward hump center: x = (u-0.5)L; compress factor: x' = x - 0.28Math.sin(Math.PIu)liftPulse? Real inchworm: segments bunch near the hump. Simplify: spacing modulation: x_i = (u-0.5)L(1 - 0.35liftLocal) where liftLocal = max(0,sin(TAU*(p-u0.55))). And y_i = lift0.5. Segment size 0.09 spheres; color gradient teal→green; head last with eyes glow. The hump travels from tail (u=0 at p small?) as p increases, the peak of sin(TAU(p - u·0.55)) for fixed p occurs at u = ... peak when p - 0.55u = 0.25 → u = (p-0.25)/0.55. As p: 0.25→0.8, peak u: 0→1: hump travels tail→head then wraps. At loop boundary p=1≡0: u=(0-0.25)/0.55 → negative → peak at u = (p-0.25 mod 1)/0.55 — for p<0.25 peak is in negative u territory i.e. beyond tail — fine, it's traveling past head and re-entering at tail. Seamless because everything is a function of (p - u*0.55) mod 1 with TAU periodic.

Also whole worm could inch forward — but must stay in place on carousel (figures are static sculptures; motion is illusory per-frame anyway!). Since each frame is a different sculpture instance, forward progression would drift the figure around the ring — actually that's FINE and even cool: the worm progresses around the carousel as frames advance... but then it must loop exactly around the full circle over N frames: total advance = 2πr/N... complicated. Keep in place.

Alright. Also add small base disc under each figure? They stand on the carousel disc — fine.

Sculpture assembly:

Store frameGroup home position/rotation for isolate restore.

Materials:

Carousel:

• Base: cylinder r=3.0 h=0.22 at y=0.11, color #10141c metalness 0.6 roughness 0.5. Receives shadows.
• Top disc r=2.95 thin at y=0.24, slightly lighter + a ring of N tick glows at radius R_FIG+0.55: small emissive boxes (bloom subtle). Ticks rebuilt with N.
• Center pole? Maybe a thin center spindle with glow tip for style. Add: small cylinder r=0.06 h=1.2 at center + glow sphere top. Cute.
• The carousel group rotates: sculpture group = child of carousel group; ticks on top disc also rotate (children).

Drum:

• Group with N panels; panel k centered at angle (k+0.5)·TAU/N (slits aligned with figures? slit alignment irrelevant due to symmetry). Panel: curved wall segment: CylinderGeometry(3.6, 3.6, 2.0, 8, 1, true, start, len) where len = TAU/N0.72, start = kTAU/N - len/2... CylinderGeometry thetaStart measured from +Z? It's fine — symmetric.
• Material: MeshStandardMaterial color #0d1017, metalness 0.4, roughness 0.6, side: DoubleSide.
• Top ring: torus r=3.6 tube 0.05 at y=2.1, plus bottom ring attached to carousel edge so drum rotates with carousel (child of carousel group!). Real zoetrope drum spins with figures. YES — drum is child of carousel.
• Panel inner glow strip? skip.
• Drum visible only in drum mode.

Wait — drum bottom at carousel: drum radius 3.6 > carousel 3.0 — drum wall outside carousel edge, standing on its own bottom ring? Visually: drum ring slightly larger, floating — add bottom ring torus at y=0.3. Fine.

Lights:

• ambient = new THREE.AmbientLight(0x28304a, 0.5) (fill, dim, constant)
• hemi? skip.
• strobe = new THREE.SpotLight(0xffffff, 0, 20, Math.PI/3.2, 0.45, 1.2) position (4.5, 6.5, 2.5), target (0,0.6,0), castShadow, shadow.mapSize 1024, bias -0.0004.
• rim1 = SpotLight teal (0x3ee6c4) low intensity 6 (r160 uses physical units? In r160, useLegacyLights default false → intensities in candela-ish; spotlight intensity ~ dozens for small scenes. I'll use intensity values and tune: rim 25, strobe 260, ambient 0.6. Renderer.useLegacyLights = false default in r155+. Point/spot intensities need to be high-ish. Let me set: ambient 0.35 (ambient light intensity is unitless multiplier, fine), strobe 300 distance 0 decay 1.4? With decay=2 default physical falloff at distance ~7 → intensity 300/49 ≈ 6 effective. Should be OK-ish. I'll pick decay=1.5 to soften falloff: 300/7^1.5≈300/18.5≈16. Tune by feel; can't visually test... risk of too dark/bright. Hmm.

To reduce risk, use renderer.useLegacyLights = true? Deprecated in r160 but still available? In r160, useLegacyLights still exists (deprecated, removed in r165). With legacy true, intensities behave classically (0..1+). Safer for no-visual-test: classic model where intensity 1 = full. Set renderer.useLegacyLights = true; strobe intensity pulse 0→3.2, rims 0.5 teal & magenta, ambient 0.22. Directional-ish spot penumbra. That I can reason about reliably.

Actually check what other demos do — 058 uses? Let me not over-engineer: I'll grep one demo for useLegacyLights / light intensities to match a proven-working setup.

Bloom: UnrealBloomPass(res, strength 0.85, radius 0.5, threshold 0.85). With legacy lights and tone mapping ACES, threshold ~0.8 fine.

Extra pass: vignette+grain ShaderPass custom small shader:

Floor (room): big circle r=30, color #05060a roughness 1 — actually just scene.background + fog + the carousel is enough; add subtle floor disc with polar grid canvas texture for depth. Canvas texture: 512², draw concentric circles + radial lines faint teal alpha. MeshBasicMaterial? Standard with emissive? Use MeshBasicMaterial map + transparent, opacity 0.5, additive? Simple: MeshBasicMaterial({map, transparent:true, opacity:0.55, depthWrite:false}) at y=0.001. With fog maybe. OK.

Camera: fov 42, pos (5.2, 3.0, 6.2), controls.target (0, 1.0, 0), autoRotate speed 0.6 (deg? autoRotateSpeed 2.0 = 30s/orbit default 2.0; set 0.5 for slow). minDistance 2.5 maxDistance 16, maxPolarAngle 1.5.

Animation loop:

Continuous/still mode: lights on constant (strobeLight 2.6 constant + ambient up a bit) so you see the spinning sculpture blur. Drum mode: constant lights; drum visible; strobe effect comes from slits. Strobe mode: pulsing.

Ambient bump during pulse too? Keep ambient constant 0.18 so between flashes faint ghost visible (nice). Maybe two fill rim lights constant 0.35.

The perceived animation in strobe mode: The flash samples the carousel at times n/strobeHz; carousel rotated revRate/strobeHz rev per flash = (revRateN/strobeHz)/N... frames advanced per flash = strobeHz... wait frames passing fixed angle per flash interval = revRateN*(1/strobeHz) = f_base/strobeHz... define f_base = revRateN (frames/s at fixed viewpoint). If strobeHz = f_base → exactly 1 frame advance per flash → animation plays forward at strobeHz fps. drift: strobeHz = f_base(1+drift) → frames advance 1/(1+drift) per flash → fractional advance → slow drift. apparent fps = f_base - strobeHz = -f_base*drift. Show apparent motion: if drift>0 strobe faster than frames → animation appears to play BACKWARD slowly: apparent = f_base - strobeHz. Display "APPARENT: -0.8 FPS (REV)".

Audio tick scheduling on flash: when strobePhase wraps (floor increases) and sound on and mode strobe → tick(). Also tick in drum mode at slit-pass frequency (same f_base·(1)? use f_base). Keep ticks quiet (gain 0.05).

Sound engine:

Hum freq ties to RPM: osc.frequency = 40 + rpm*0.5.

UI wiring: buttons toggle classes; sliders input events; rebuild on N change (debounced immediate fine).

Stats update every ~200ms: RPM display, STROBE Hz, APPARENT fps, SYNC badge: |f_base - strobeHz| < 0.35 → "SYNC ✓" green else amber "DRIFT".

Isolate mode: button "Isolate frame":

Also during isolate, disable autoRotate? keep.

Preset switching: rebuild sculpture. Keep camera.

Quality/adaptive: track avg fps; if < 40 for a while → reduce pixelRatio steps [1.75, 1.5, 1.25, 1.0] and bloom strength slightly. Simple.

WebGL check: try renderer creation in try/catch → overlay #nogl.

Toast messages: "Snapped to sync", "Frame N/N" etc.

Help hint bottom-right: "Drag to orbit · Scroll to zoom · Space = snap sync · I = isolate".

Keyboard: Space → snap; I → isolate; 1-5 presets; M mode cycle; S sound.

Now, N (frames) slider: 6..24 default 12. RPM slider: 5..90 default 33.3? Let me compute strobe: 12 frames × 33.3/60 = 6.66 Hz — a bit slow/strobey. 45 RPM → 9 Hz. 60 → 12Hz. Default 48 RPM → 9.6Hz flickery but charming. Range 10..96. Default 48.

Drift slider: -6%..+6% default 0. Snap sets drift 0.

Strobe duty: fixed 0.22.

R_FIG (figure radius): 2.0. Figure heights ~1.2-1.9 fits under drum height 2.0 at wall 3.6. Camera target y ~0.9.

Carousel base y: base cylinder center y=0.12 (h=0.24), top disc y≈0.25, figures at y=0.26 (on disc). I set frameGroup y=0.16 earlier — set 0.26 to sit on disc. Ball bounce bottom at h-0.34sy min: 0.42-0.340.62≈0.21 above figure origin → fine.

Shadows: strobe spotlight castShadow; frames castShadow (solid mesh), carousel disc receiveShadow, floor receive? OK.

Now vertexColors + MeshStandardMaterial with legacy lights — fine.

One perf consideration: rebuild sculpture on slider N input — each build creates ~24 frames × ~10 primitives with clones; fine.

Dispose: track created geometries per sculpture; on rebuild traverse and dispose.

Drum rebuild with N too (panels count = N). Ticks ring rebuild with N.

Bloom pass size: new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.85, 0.55, 0.85).

Composer: RenderPass, bloomPass, vignettePass, OutputPass. Note r160 OutputPass handles tone mapping/sRGB when using composer. Set renderer.toneMapping = ACESFilmicToneMapping; with OutputPass it applies.

Now titles/meta for the demo:

• Title: "Zoetrope — Stroboscopic Sculpture Garden"
• Description: "A spinning ring of static sculptures comes alive under a strobe light..."

HUD stats ids: #stRpm, #stStrobe, #stApparent, #stSync, #stFps.

Buttons: preset chips: data-preset; mode button cycles 3 modes showing current; isolate; snap; sound.

Panels minimal but polished. Color accent: amber (#ffc357) + teal (#3ee6c4) theme — "museum at midnight" vibe. Use amber as primary accent to differentiate from other demos.

Let me also double check UnrealBloomPass imports path and OutputPass exist in r160 — yes (OutputPass since r152).

BufferGeometryUtils import: import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js' — exports mergeGeometries in r160. Yes.

CylinderGeometry thetaStart: measured around Y starting from +Z? Doesn't matter.

For drum panels also add slight top rim glow strip: thin emissive box per panel top? Add small glow box at top of each panel edge facing slit? skip — keep clean; add a glow ring (torus, MeshBasicMaterial amber color 1.6) at drum top for style. In drum mode the ring glows (bloom halo) — pretty.

Ring ticks: N small boxes on top disc at radius 2.55, each (0.05,0.02,0.14) tangential, MeshBasicMaterial color (1.2,1.0,0.6) subtle. Rebuild with N.

Center spindle: cyl r 0.05 h 1.5 at center, dark metal; top glow sphere 0.07 amber. Child of carousel.

Fog: scene.fog = new THREE.Fog(0x05060a, 14, 30). Background same color.

Tone mapping exposure 1.1.

Let me now also handle "Still" mode naming: modes: 'strobe' | 'drum' | 'still'. Mode button label: "MODE: STROBE" / "MODE: DRUM" / "MODE: FREE". In still/free: lights constant bright, drum hidden — see the sculpture spinning honestly (motion blur illusion absent; you see discrete figures whirling).

Shadow in strobe mode: shadows update each frame (light moves? no, light static, carousel rotates — shadow map updates every frame anyway since scene renders; shadow autoUpdate default true). Fine.

Auto quality: keep simple: measure EMA fps; if <38 and pixelRatio>1 → lower. If >55 and pixelRatio<min(devicePR,1.75) → raise. Check every 2s.

Edge: on mobile touch — buttons ok; orbit touch ok. Viewport meta set. Font sizes small; fine.

Now write the file. It'll be long (~700 lines). Let me write it in one go carefully, then run a node --check on extracted module script (imports of 'three' will fail resolution but --check only parses — good).

Also the audio hum: two oscillators started once; gain updates. On sound toggle off: master.gain=0 (keep context running). Resume context on user gesture (button click resumes).

Ticks in drum mode at f_base rate too (slit passes). In still mode: no ticks (no strobe). Actually in still mode a soft whir? skip.

Also add subtle carousel rotation sound? skip — hum covers.

One more flourish for wow: "ghost trails" — an afterimage pass? No, keep scope; the strobe is the star.

Let me write the code now.

Also stats: FPS counter.

Preset list with labels: bounce 'BOUNCE', moth 'MOTH', walker 'WALKER', bloom 'BLOOM', worm 'INCHWORM'.

For poseMoth wing geos (pre-offset): define inside preset module scope:

Then in pose: batch.add(mothWingR, col, 0, y, 0, wingA, 0, 0, 1); batch.add(mothWingL, col, 0, y, 0, -wingA, 0,0,1); Check: mothWingR vertices offset +z 0.34; rotation rx=wingA about origin: (0,0,0.34) → y' = -0.34 sin(wingA)?? Rotation about X: y' = y cos a − z sin a = −0.34 sin a (negative when a>0), z' = 0.34 cos a. Hmm wing dips below body when a>0. For wing up, want y' positive → need a<0 for R wing. Doesn't matter—flap is symmetric sin; just sign convention. Wingtip glow computed with same formula: tip local (x=-0.08?, z=0.62) — actually wingtip at outer edge: local point (x≈-0.08, z≈0.6). After rotation: y_t = -0.6 sin a, z_t = 0.6 cos a. Position + body (0, y, 0) and x -0.08. glow.add(sphereLow, col, -0.08, y - 0.6Math.sin(a), 0.6Math.cos(a), 0.045). For left: a=-wingA and mirror z: point (x -0.08, z -0.6) rotated rx=-wingA: y' = -(-0.6) sin(-wingA) = 0.6·sin(-wingA) = -0.6 sin(wingA); hmm let me recompute: y' = y cos a − z sin a with y=0, z=-0.6, a=-wingA: y' = -(-0.6)·sin(-wingA) = 0.6·(-sin wingA) = -0.6 sin(wingA). Wait sin(-wingA) = -sin(wingA), so y' = 0.6·(-sin(wingA)) = -0.6 sin(wingA). z' = y sin a + z cos a = -0.6 cos(wingA). So left tip: (−0.08, y − 0.6 sin(wingA), −0.6 cos(wingA)). Both wings rise/fall together ✓.

Wingbeat: 2 per loop: wingA = 0.2 + sin(TAUp2)1.0 (range -0.8..1.2 rad) — dramatic flap. Bob: y = 1.2 + cos(TAUp*2)*0.06 (body bobs opposite wings).

Bloom preset: petals baked per frame with tilt; base petal geo:

extends +Z. Per frame: tilt = -(1.25 - breathe*0.95); tilted = xform(petalGeo, 0,0,0, tilt, 0,0); then 6× add(tilted, col, hx,hy,hz, 0, θk, 0). Wait — Batch.add applies rotation then translation; the tilted petal extends outward; rotation.y = θk distributes. But the petal base should be at flower center (hx,hy,hz) — translation to head pos ✓.

Head pos: stem top. Stem vertical at (0, y0..y0+0.85): add cyl at (0, 0.26+0.425, 0) scale (0.045, 0.85, 0.045) color green #3f8f5f... in figure-local coords (frameGroup at y base 0.26; local origin at disc surface). Let me define figure local origin at disc surface (frameGroup.position.y = 0.26). So all poses build from y=0 up. Bounce ball h 0.42..2.0 local. Moth y ~1.2 local. Walker baseY 0.62 local, total height ~1.15. Bloom stem top 0.85, petals to 1.3. Worm on ground y0.1-0.6.

Head at (0, 0.9, 0); pistil glow sphere (0, 0.92, 0) scale 0.11+breathe0.05 amber; sepals: 3 small cones under head tilted down: cone baked tip-down? add(cone, green, 0, 0.86, 0, π (flip), θk... cones point up by default; flip rx=π points down; position around center radius 0.08: compute positions (cos θk0.08, 0.85, sin θk0.08), rotation: rx = π0.85? eh — just one small inverted cone at (0,0.84,0) scale (0.12,0.14,0.12) as the sealyx — simple.

Leaves: 2 petals on stem at height 0.45, tilt down-out: baked tilt rx = 0.9 (tip droops)? petal extends +Z, rx=+0.9: tip y' = -0.26 sin(0.9) <0 droops down. Hmm leaves should angle upward-outward: rx=-0.6. add at (0,0.45,0) ry θ and θ+π, smaller scale 0.7.

Flower color: petals #e08bd0 (pink) or alternate two-tone: k%2 ? #e08bd0 : #c06be0. Pistil amber glow #ffc357.

Also add tiny glow dew at petal tips? skip.

Walker feet on ground: hip baseY 0.62; leg length 0.5 → foot at ~0.12+.. when a=0: foot center y = 0.62-0.5-0.02=0.10 ✓ above 0.

Worm: y_i = lift*0.42; segment scale 0.085; head at i=n-1: bigger 0.11 + eyes glow 2× at head pos +x0.08, y+0.05, z±0.05 scale 0.025 teal. Body dir along X centered 0. Colors: lerp #3ee6c4 → #8be06b by u.

Bounce ball color #cfd8ea with glow core #7df0ff? core teal #66ffe0.

Now the strobe "apparent motion" formula: apparent_fps = f_base − strobeHz where strobeHz = f_base·(1+drift). = −f_base·drift. Display signed; label FWD/REV.

Sync badge: |apparent| ≤ 0.3 → SYNC.

Also N frame stepping: since strobePhase accumulates real time, pulse shape smooth. But perceived animation uses flashes — good.

In drum mode, figures lit constant: strobe light constant 2.2, ambient 0.3. Drum rotates with carousel. Camera default outside drum radius 3.6 — camera at ~7 OK. Slit width 28% of TAU/N.

Also in drum mode, add slight auto camera height? no.

FREE mode: same lighting as drum minus drum.

Sound in strobe mode tick at flash; drum: tick per slit pass (f_base); free: none.

Now UI: chips for presets (5), mode button, isolate toggle, snap, sound. Sliders: SPEED (RPM 10–96, default 48), FRAMES (6–24, default 12), DRIFT (−6..+6 %, default 0, step 0.05). Buttons for frames −/+? slider fine.

Toast function with fade.

Info panel bottom-left stats + legend? Keep stats panel.

Write it. Also remember meta description.

For the index page card afterwards: "Zoetrope — Stroboscopic Sculpture Garden": description: "A Victorian illusion reborn in WebGL — a spinning carousel of static 3D sculptures springs to life under a synced strobe light: bouncing balls, flapping moths, marching robots, breathing flowers and inchworms. Tune RPM, frame count and drift to hunt temporal-aliasing sync points, switch to an authentic slit-drum view, isolate a single frame, with bloom, shadows, generative ticks and slow auto-orbit."

Now write files. Directory: /space/demos/059-zoetrope/index.html.

Let me be careful with the vignette ShaderPass shader definition:

Composer order: render → bloom → vignette → output. Vignette after bloom darkens bloom edges — good.

renderer: antialias true, powerPreference 'high-performance'. outputColorSpace default SRGB in r160; with OutputPass fine.

useLegacyLights: In r160, renderer.useLegacyLights = true is deprecated warning but works. Check other demos: let me grep one for how they handle lights to be consistent and proven. Actually 058 was headless-tested with llvmpipe — grep it for useLegacyLights.

Let me grep quickly before writing.

057 uses ACES tone mapping, AmbientLight 0.7, DirectionalLight 1.4, PointLight(0x9fd8ff, 5, 5, 2) — that's the modern physical intensity style (point light intensity 5 with decay 2). So no useLegacyLights. I'll use modern intensities: ambient ~0.5, directional key ~2, spot strobe intensity ~high (spot with decay 2 at distance ~7 needs intensity ~100-300 to be bright; with penumbra). Actually SpotLight intensity in physical mode = candela; at distance 7, illuminance = I/d² = 300/49 ≈ 6 lux-ish → with exposure 1.1 that's bright. OK: strobe intensity pulse up to ~400, rims ~60 teal / 60 magenta with decay 2, ambient 0.5.

Hmm — risk of misjudging brightness without visual test. DirectionalLight isn't distance-attenuated: intensity 2 = reliable. For the strobe I could use a DirectionalLight (no falloff, predictable) from above-side + shadows. Directional shadow over the carousel: shadow camera ortho bounds ~±5 — fine. Directional strobe: intensity pulse 0→3.5, plus constant ambient 0.25 + two colored directional rims 0.4 each. Predictable and safe. Directional shadows: d.shadow.camera left/right/top/bottom ±4.5, near 1 far 20, mapSize 2048.

Lighting setup:

• ambient 0x334, 0.4 constant.
• key directional (strobe) white 0xdfeaff, position (6, 9, 4), castShadow, intensity = pulse*3.6 in strobe mode; constant 2.6 in free/drum.
• rim teal directional from (-7, 3, -5) 0x3ee6c4, constant 0.5.
• rim magenta from (5, 2, -7) 0xc08bff, 0.35.
• glow materials provide bloom.

That's predictable.

Now write the whole file.

Now let me validate the JS syntax. Extract the module script and run node --check on it as .mjs.

Also check a few potential issues:

1. glowMat is shared across all frames and also cloned for the spindle tip with vertexColors=false — clone before setting? I clone glowMat for tip: glowMat.clone() then set vertexColors=false and color. But wait — I created tip inside the carousel block which runs BEFORE glowMat is defined? Order of script: "shared geometry toolkit" section defines glowMat BEFORE "carousel construction". Let me check order in file: PRIM/xform/Batch/solidMat/glowMat defined, then PRESETS, then carousel construction. Yes glowMat defined before carousel block. Good.

But there's an issue: cloning a material and changing vertexColors after first compile — fine since it's a fresh clone not yet used.

However tip.material.vertexColors = false — I set on the clone; needs material.needsUpdate — not yet rendered so fine.

2. In buildSculpture, solidMat shared — good. glowMat shared — good.

3. strobe.target — DirectionalLight default target at (0,0,0), added to scene via scene.add(strobe, strobe.target). Position (6, 9.5, 4) shining toward origin — covers carousel. Shadow camera ±5, near 2 far 24: distance from light pos to origin ≈ sqrt(36+90+16)=~11.9 — within near/far. OK.

4. Tick mesh uses Batch with color 0xffc357 then material color multiplier 1.3 — MeshBasicMaterial with vertexColors — fine.

5. Drum CylinderGeometry openEnded=true with thetaStart/Length — mergeGeometries of cylinders: they have position/normal/uv — consistent. Good. But wait: CylinderGeometry has groups (side/top/bottom) when not open-ended; open-ended true → only side group. mergeGeometries(geos, false) — useGroups false → merged single group. Fine.

6. The drum wall position: cylinder centered at its middle; wall.position.y = y0 + H/2 — base at y0=BASE_Y=0.26, top at 2.36. Figures max height: bounce ball top ~2.0+BASE_Y ≈ 2.26 < 2.36 ✓. Moth wingtip max y: y(1.28) - 0.6 sin(a) with a min -0.85 → +0.45 → 1.73+0.26 ≈ 2.0 ✓.

Camera min distance 2.4 < drum radius 3.55 — user could zoom inside the drum in drum mode; acceptable (they'll see figures directly). Could set minDistance 4 in drum mode... add: in setMode, controls.minDistance = m==='drum' ? 4.2 : 2.4. Let me add that refinement.

7. In isolate mode, if (drumGroup) drumGroup.visible = false; and exitIsolate calls buildDrum() which disposes & rebuilds based on S.mode — that recreates drum (visible default true). OK.

8. exitIsolate is called before framesGroup exists? bIso click only after rebuildAll at startup — framesGroup exists. OK.

9. In keydown, e.key === ' ' handled via k = e.key.toLowerCase() → ' ' stays ' '. OK.

10. Slider sFrames input rebuilds sculpture AND drum (rebuildAll) — good, drum panels count matches N.

11. Potential z-fighting: tick boxes at y=BASE_Y+0.005 with half-height 0.0075 → bottom at 0.2575-... box height 0.015 centered at 0.265 → spans 0.2575..0.2725. Disc top at BASE_Y-0.02+0.025 = 0.265. Overlap → ticks half-sunk in disc, top at 0.2725 visible. Fine, no z-fight since volumes intersect (not coplanar surfaces).

12. Figures at BASE_Y=0.26 on disc top 0.265 — figure origin slightly below disc top (5mm) — feet/ball may intersect slightly: walker foot bottom at hip+fy-0.02-0.035 = 0.66-0.5-0.055=0.105 local → 0.365 world — above disc ✓. Worm segment bottom: 0.09-0.09=0 → world 0.26 — just at disc top 0.265 → 5mm sunk. Fine visually.

13. Bounce impact star at y 0.035 local → 0.295 world — above disc ✓.

14. Ambient light color 0x39415c intensity 0.5 — subtle blue fill ✓.

15. r160 composer.setPixelRatio exists on EffectComposer — yes, EffectComposer has setPixelRatio. I guarded with ?. anyway.

16. gradePass defined via new ShaderPass({uniforms, vertexShader, fragmentShader}) — ShaderPass accepts a shader object; it clones uniforms via UniformsUtils.clone. Access gradePass.uniforms.uTime — ShaderPass sets this.uniforms = UniformsUtils.clone(shader.uniforms)... yes textureID 'tDiffuse' default. OK.

17. OutputPass — applies tone mapping + sRGB. With ACES set on renderer. ✓

18. renderer.getContext() check — fine.

19. Audio: humOsc.frequency.setTargetAtTime — ok. tick uses AC.currentTime — ok.

20. In animate, const app = frameRate - strobeHz apparent fps: drift>0 → strobe faster → apparent negative → REV ✓ matches earlier reasoning.

21. One concern: S.strobePhase += strobeHz*dt where strobeHz can be 0 at rpm→? rpm min 10, frames min 6 → 1 Hz min. OK.

22. DUTY pulse shape sin². Strobe at 9.6Hz, display 60fps: pulse duration 22.8ms ≈ 1.4 frames. Judder acceptable.

23. buildDrum when mode==='drum' — N panels each CylinderGeometry(R,R,H,8,1,true,start,len) — 8 radial segs for ~50° arc fine.

24. In drum mode the rim ring glow (ringMat color 2.0,1.45,0.5) blooms — nice halo.

25. mothWingR etc created via xform at module level — cloned per add — ok. petalGeo cloned in xform per frame for tilted — disposed after use ✓.

26. Walker antenna: solid.add(PRIM.cyl, ..., 0.02, hip+0.84, 0, rz=-0.18, scale 0.018,0.2,0.018) — axis rotated −0.18: dir = (−sin(−0.18), cos(−0.18)) = (0.179, 0.984). Tip at center + dir*0.1 = (0.02+0.0179, hip+0.84+0.0984) = (0.038, hip+0.938). My glow tip at (0.038, hip+0.945) ✓ close enough.

27. Bloom default threshold 0.85, strength S.glow 0.85 ✓.

Now check for syntax with node --check. Node available? Let me check. Also verify file structure (matching braces) via node --check on extracted script.

Syntax is valid. Now let me apply the small refinements I identified:

1. minDistance 4.2 in drum mode (prevent zooming inside drum).
2. Also when exiting isolate, if drumGroup visible flag was set false but mode is 'free'/'strobe' — buildDrum returns null for non-drum, and drumGroup set to null in buildDrum start. Wait: buildDrum: if (drumGroup) { remove; dispose; drumGroup = null; } if (S.mode !== 'drum') return; — so exiting isolate in strobe mode: buildDrum disposes and returns with drumGroup null ✓. In drum mode: rebuilds (visible) ✓.

But in isolate click handler: if (drumGroup) drumGroup.visible = false; — fine.

3. Also check: in isolate mode the stats "strobe" continues — fine.

Let me also double-check one subtle correctness issue with the strobe sync: the animation appears correct if each flash shows the next frame at the same world position. The carousel rotates at revRate; flashes at frameRate×(1+drift). Between flashes, carousel rotates revRate/strobeHz revolutions = (revRate/(revRate·N·(1+drift))) = 1/(N(1+drift)) rev = exactly 1 frame-slot when drift=0 ✓.

Direction check: figures placed at angle k·TAU/N with carousel.rotation.y = spin increasing. In three.js, positive rotation.y rotates counterclockwise when viewed from +Y looking down... The figure at local angle θ_k appears at world angle θ_k + spin. As spin increases, figures move to increasing world angle. At a fixed world viewing angle (say camera side), successive flashes (dt = 1/frameRate) show spin advanced by TAU/N → the figure now at that world angle has index k-1 (the one previously one slot behind). Frame index decreases → animation plays BACKWARD? Hmm.

The animation sequence is frames 0..N-1 by p. At the fixed viewpoint, we see frame index k(t) = ((worldAngle - spin(t)) mod TAU) / (TAU/N). As spin increases by TAU/N per flash, k decreases by 1 per flash → we see frames N-1, N-2, ..., i.e., reversed.

For symmetric loops (bounce |cos|, moth sin, bloom breathe sin) reversal is imperceptible. For walker/worm the gait would run backward — a walking robot would moonwalk! The worm's hump travels head→tail instead of tail→head — wrong direction (still looks alive but "wrong").

Fix: spin the carousel the other way (spin -= ...) so frame index increases at the viewpoint. OR reorder frames. Simplest: make S.spin decrease: carousel.rotation.y = -spinAccum. Then at fixed world angle, k increases by 1 per flash ✓ forward playback.

Let me verify: spinWorld = -s (s increasing). k(t) = ((worldAngle + s) mod TAU)/(TAU/N) increases by 1 per flash ✓.

And figures face rotation.y = -(ang + π/2) which faces +X toward tangent direction (-sin ang, 0, cos ang)·? Earlier computed velocity dir for increasing angle: (-sin, 0, cos). With spin decreasing, motion direction is opposite: (sin ang, 0, -cos ang). Figure facing: rotation.y = θ maps +X to (cosθ, 0, -sinθ). For motion dir (sin ang, 0, -cos ang): cosθ = sin ang → θ = π/2 - ang; check -sinθ = -sin(π/2-ang) = -cos ang ✓. So rotation.y = π/2 - ang for decreasing spin. Alternatively keep facing and spin increasing, and just generate frames reversed (p = (N-k)/N)? Simpler: reverse spin direction AND set rotation.y = Math.PI/2 - ang.

Hmm wait, actually let me recheck the facing for increasing spin (current code): rotation.y = -(ang+π/2): +X → (cos(-(ang+π/2)), 0, -sin(-(ang+π/2))) = (cos(ang+π/2), 0, sin(ang+π/2)) = (-sin ang, 0, cos ang) = velocity dir for increasing spin ✓. So current facing matches increasing spin, but playback is reversed at fixed viewpoint.

Decision: flip to decreasing spin: S.spin = (S.spin - revRate*TAU*dt) % TAU and facing rotation.y = π/2 - ang... wait let me recompute: for decreasing spin, velocity dir = -(increasing case) = (sin ang, 0, -cos ang). Need +X mapped to that: cosθ = sin ang, -sinθ = -cos ang → sinθ = cos ang → θ = π/2 - ang ✓ (cos(π/2-ang) = sin ang ✓).

Hmm, but hold on — is playback really reversed at the camera? Let me sanity-check with the bounce preset which is symmetric — no issue. Walker: legs swing sin(TAU·p·2) — forward/backward symmetric gait actually (legs swing ±, both directions look same-ish). Worm: hump direction reverses — inchworm would look like hump travels from head to tail — actually real inchworms move the hump from tail to head as they advance. Reversed = backwards crawl. Moth: symmetric. Bloom: petal ring rotation direction reverses — irrelevant.

So the only visibly-wrong preset is worm. But correctness matters — let me just flip the spin so playback is forward: spin decreasing (clockwise seen from above), facing θ = π/2 - ang.

Wait, also double check the strobe flash → "next sculpture in sequence": with spin decreasing and flashes synced, at fixed world angle frame index increases by 1 per flash ✓ → frames play 0,1,2,... forward ✓.

Also the ticks/markers etc are symmetric, unaffected. Drum symmetric.

Additionally, autoRotate of camera — independent, fine.

Update code accordingly:

• In animate: S.spin = (S.spin - revRate * TAU * dt) % TAU; carousel.rotation.y = S.spin; (negative modulo ok — rotation just needs consistency).
• In buildSculpture: fg.rotation.y = Math.PI / 2 - ang;

Hmm wait, one more consideration: does "forward" really matter for the walker illusion? Walker marching with spin decreasing: figures face (sin ang, 0, -cos ang) = direction of motion ✓ so the robot marches along the carousel direction of rotation, and at the strobe viewpoint his legs cycle forward.

Also in isolate mode, rotation.y = Math.PI*0.2 static facing — fine.

4. Also add controls.minDistance handling per mode.

Let me apply these three edits: (a) spin decrement, (b) facing formula, (c) minDistance per mode in setMode.

Additionally, I realize the initial camera autoRotate combined with strobe is fine.

5. One more check — #syncBadge element: I set <b id="syncBadge" class="ok"> inside .crow — CSS #syncBadge.ok styles ✓. In stats I do badge.className='ok'/'dr' ✓.

6. #ph overlaps #ps on small screens — media query hides #pl and #ph under 760px ✓.

Apply edits now.

Now let me do a real functional test. The previous run set up Xvfb + Firefox for WebGL2 testing, but the container was reset. Let me check what's available now: chromium? firefox? Let me check quickly. If a browser + puppeteer is feasible within time, I could do a smoke test: load the page headless, catch console errors. That requires WebGL2 though — the previous run found headless Chromium fails, but headless Firefox also failed; they used Xvfb + non-headless Firefox via puppeteer. That's a heavy setup (~5-10 min).

Alternative: use node to run a partial logic test — e.g., test the pure math (Batch merge needs three.js). I could npm-install three in /tmp and run a small node test importing three module + my geometry code (three module works in node without WebGL for geometry ops). That would validate Batch/xform/preset builders produce valid merged geometries (no NaNs, merge works). EffectComposer etc. need DOM — skip; just test the geometry pipeline by extracting relevant functions... they're embedded in the HTML. Simpler: write a small standalone test that imports three from CDN? Node can't fetch URL imports by default (needs --experimental-network-imports, removed in newer node?). Node 24: network imports were experimental and removed. Instead npm install three@0.160.0 locally in /tmp.

Time budget: npm install three is quick (~5-10s). Let me do it: create /tmp/zt/, npm init -y, npm i three@0.160.0, then a test script that replicates Batch + presets (copy the code) and verifies merged geometry counts and NaN checks for all 5 presets × 12 frames. I can extract the code from the HTML automatically: slice from "const TAU" to "const PRESET_NAMES" plus imports, replacing the import paths with the npm package paths ('three' works with node resolution; 'three/addons/utils/BufferGeometryUtils.js' — the npm package has examples/jsm/utils/BufferGeometryUtils.js; the import specifier 'three/addons/...' is mapped via package exports? three's package.json exports "./addons/": "./examples/jsm/" since r150+? Let me check: three package.json "exports" includes "./addons/". Yes, three@0.160 package.json has "./addons/": "./examples/jsm/*". So import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js' works in node.

I'll extract the segment of the demo script between markers and evaluate: from "const TAU" through "const PRESET_NAMES = ..." line — that includes PRIM, xform, Batch, solidMat/glowMat (materials fine in node), PRESETS. Then append test code iterating presets/frames, building, checking for NaN in positions, and printing vertex counts.

Also test buildSculpture-level logic? That needs THREE.Group only — actually buildSculpture uses carousel, solidMat — could test but it references DOM-less scene graph fine in node. But it also references S, R_FIG, BASE_Y, carousel... I'd need those too. Keep the test to geometry batch + presets (the most error-prone part).

Let me write the test.

My extraction went too far — const PRESET_NAMES appears AFTER the renderer section? No wait — the extraction start = index of 'const TAU' which is near the top. End = index of 'const PRESET_NAMES'. But the error at line 27 references document.getElementById('nogl') — that means the renderer/try-catch section is between 'const TAU' and 'const PRESET_NAMES'? No — in my file order: state → renderer (with nogl catch) → ... → PRESETS → PRESET_NAMES. Yes! The renderer section comes before the geometry toolkit. So the slice includes renderer code.

Fix extraction: take from "/* ====================== shared geometry toolkit" to PRESET_NAMES. Let me use distinctive markers.

Still including nogl — because script[start:gstart] where start = index of 'const TAU' and gstart = index of 'const PRIM = {'. The 'const TAU' is at the top (line ~state area), gstart is way later — so the first slice includes everything from TAU to PRIM including the renderer section. I intended start of slice to be just const TAU = Math.PI*2; line. Let me instead extract only the TAU line: use script[start:script.index('\n', start)+1] + the gstart..end slice.

All 5 presets build valid merged geometries with sane bounds, color + normal attributes, no NaNs — 109k verts total across 60 test frames (~9k verts per 12-frame sculpture — very light).

Now, a browser-level smoke test would be ideal. The previous run demonstrated Xvfb + Firefox + puppeteer works in this container, but it's a heavy setup. Do I have time? The turn's time limit is unknown but previous run hit ~16 min. Let me try a lightweight approach: check if firefox/chromium are installed. If firefox is present and xvfb can be installed quickly (apk add xvfb), plus puppeteer already cached? /tmp/ptest was wiped likely. npm install puppeteer ~30-60s (downloads Chromium by default — but we can use PUPPETEER_SKIP_DOWNLOAD and point to system firefox... puppeteer supports firefox via browser: 'firefox').

Let me check what's installed first. If firefox + xvfb install quickly, a smoke test catching console errors and taking a screenshot would be valuable validation (the previous run proved the pipeline works with llvmpipe).

Let me check browsers available.

No browsers installed. The previous run installed firefox + xvfb via apk. That setup took them most of a 16-minute run. Installing firefox (~80MB+) + xvfb + puppeteer, then debugging, is risky within my remaining time. The geometry pipeline is already validated with real three.js in node, and syntax is valid. The remaining untested parts are DOM/wiring and rendering — I should instead do a careful static review of the full file for logic/wiring bugs, which is cheap and reliable.

Let me do a full careful read of the file now, checking:

1. All DOM ids referenced exist in HTML.
2. All functions defined before use at runtime (module top-level order).
3. Event handlers reference valid things.
4. No leftover issues.

Let me print the whole file and review.

The file uses 2-space indentation in the read output (it shows the raw content indented). Wait — the file content shows 2-space leading indentation on every line inside the script (e.g., const S = {). That's because when I wrote the file, the script content lines were written without leading indentation... Actually looking at the output, every line has 2-space indent — this is likely how I wrote it (the write tool preserved my content exactly; in my content the script lines were NOT indented... let me check: in my written content, <script type="module"> was followed by import * as THREE from 'three'; at column 0. But the read shows const S = { indented by 2. Hmm, the read tool may add formatting. Looking at the earlier preview from the write: > 1 | <!DOCTYPE html> — line content starts after > . Line 140 here shows const S = { with 2 spaces — that's actual content? In my original write, const S = { had no leading spaces.

Wait, actually in my written content, I did NOT indent the JS. But read shows 2-space indent... The read tool might display with some indentation. It says "contents: |-" which is a YAML block scalar preserving content. The 2-space indent appears consistent across ALL lines including HTML? Let me check: line 1 earlier preview showed <!DOCTYPE html> with no indent after the > 1 | prefix. So the read tool output here might just have a 2-space offset artifact of the display. Actually in this read output, the content shows const S = { — compare the raw write preview which showed 697 | animate(); with no indentation. Hmm, hard to tell. Whatever — indentation is cosmetic anyway. Actually wait, it could matter: no it doesn't, JS is whitespace-insensitive.

Hmm, actually I bet the read tool indents content by 2 spaces for display (matching the contents: |- block which requires 2-space indentation in YAML). Yes — YAML block scalars need consistent indentation; the tool indented everything by 2 spaces for the YAML representation. Not in the actual file. Fine.

Continue reviewing the rest of the file. Let me read the remaining sections to check wiring (especially parts I haven't re-read: UI handlers, animate loop, end).

This section looks correct. A few things to verify:

1. tip.material.vertexColors = false — modifying a cloned material's vertexColors property after creation: allowed before first render. ✓

2. Moth wingtip glow: positions y - 0.6*sin(a) — with a ∈ [-0.85, 1.15], sin(a) ∈ [-0.75, 0.91] → y - 0.6·sin(a) ∈ [y-0.55, y+0.45] — wingtips swing through ~1 unit vertically ✓ nice flap arc. z = ±0.62·cos(a): cos(a) ∈ [0.41, 0.99]?? a up to 1.15 rad: cos(1.15)=0.41 — wings never sweep past horizontal... at a=1.15, wing is above horizontal (66°) ✓; at a=-0.85, cos=0.66, sin=-0.75: z=±0.41, y+0.45 — wings droop below horizontal by 48° ✓. Looks like proper flapping.

3. bloom preset: tilted geometry is baked once per frame and added 6 times (Batch.add clones it internally) then disposed ✓.

4. Walker arms: cylinder along Y rotated rz=aa, centered at shoulder+half-dir: (sin(aa)·0.17, hip+0.4-cos(aa)·0.17). When aa=0: center (0, hip+0.23) — cylinder spans hip+0.06..hip+0.4 ✓ hangs from shoulder. Hand light at (sin(aa)·0.34, hip+0.4-cos(aa)·0.34): at aa=0 → (0, hip+0.06) at arm bottom ✓.

5. Shadow: figures castShadow=true, receiveShadow=false; disc/base receiveShadow ✓.

6. wall in drum has position.y set; merged cylinder geos disposed? Not disposed but small one-time build; when rebuilding (mode switch / N change), disposeDeep(drumGroup) disposes wall.geometry (the merged one) ✓ — but the individual geos array cylinders were merged (mergeGeometries copies data) and are not disposed nor referenced — GC handles JS side; GPU side they were never uploaded (never rendered) ✓.

7. ring2 material is a new MeshStandardMaterial per build — disposed? disposeDeep only disposes geometry, not materials. Materials leak on rebuild — tiny (a few materials), rebuild happens on N change / mode toggle — acceptable but let me extend disposeDeep to dispose materials too. Careful: framesGroup uses SHARED solidMat/glowMat — disposing those would break subsequent sculptures! So material disposal must exclude shared materials. Simplest: keep geometry-only disposal (materials that leak are only drum mat/ring materials and tick material — a handful per rebuild). Tick mesh creates a new MeshBasicMaterial each rebuild too. Small leak; acceptable for a demo (rebuilds are user-gesture-rate). Leave it.

8. In buildTicks, b.add(PRIM.box, 0xffc357, ..., 0, -ang, 0, ...) — rotation ry=-ang: box long axis z (0.16) — tangent? At angle ang position (cos,0,sin)·2.62, tangent dir = (-sin,0,cos); box +Z axis rotated by ry=-ang maps +Z to (sin(-ang)?? rotation about Y by θ maps +Z=(0,0,1) to (sin θ, 0, cos θ). θ=-ang → (-sin ang, 0, cos ang) = tangent ✓.

Now read the rest (470-703).

Full review complete. Issues found:

1. S.strobePhase when drift is negative: strobeHz stays positive (drift ∈ [-0.06, 0.06]) ✓ no issue.

2. Math.floor(S.strobePhase) cycle detection for ticks ✓.

3. Isolate + exitIsolate when framesGroup rebuilt while isolate: preset click and frames slider call exitIsolate() before rebuilding ✓. exitIsolate calls buildDrum() which uses S.mode — if mode is drum, rebuilds drum visible ✓. Good.

4. In isolate mode, strobe.intensity = 2.7 constant ✓ and ticks disabled ✓.

5. A subtle one: exitIsolate is referenced in the preset click handler BEFORE its function declaration — function declarations are hoisted ✓ fine.

6. const app = frameRate - strobeHz — 'app' shadows nothing; there's a DOM element with id 'app' but no JS variable conflict (we never assigned a global app variable... document.getElementById('app') used inline). BUT WAIT: const app inside animate block scope — and id="app" element — no conflict. ✓

7. The tick at drum mode: ticks fire on strobePhase cycles which runs at strobeHz = frameRate·(1+drift) — in drum mode drift still applies; fine.

8. Potential divide-by-zero: none (rpm ≥ 10).

9. renderer.getContext() — returns context; if WebGL2 unavailable three r160 throws in constructor → caught → nogl shown ✓.

10. First-frame clock.getDelta() before animate — fine.

11. **In the HTML, #syncBadge is a <b> inside .crow; CSS #syncBadge.ok etc. — but .crow b color amber applies; badge overrides ✓.

12. Auto-quality block resets fpsEMA=50 after downgrade to avoid repeated triggering ✓. Only downgrades (never upgrades) — fine.

13. composer.setPixelRatio?.() — EffectComposer in r160 HAS setPixelRatio — ✓.

14. The initial value display: sDrift default 0 → '+0.00%' shown in HTML ✓ matches.

15. bloom.strength initial = S.glow (0.85) ✓ matches slider default 0.85.

16. HTML has #vFrames default "12" ✓.

17. One more consideration — the keydown handler for space: e.key === ' ' ✓; but also scrolling page on space prevented ✓.

18. Sound button: AC.resume() — AC created in ensureAudio ✓ before resume. ✓

19. framesGroup.children[0] when N≥6 always exists ✓.

20. Toast on load? None — maybe show a welcome hint. Minor: add toast on startup 'FIND SYNC · DETUNE TIME'. Optional; skip.

21. Shadow camera: strobe directional shadow ±5 covers carousel r 3.15 + drum 3.55 ✓. Figures at r=2.0+extent ✓. far=24 covers from light at (6,9.5,4) — distance to origin ~12 ✓.

22. Fog 16..34 — camera at ~8.6 dist; drum at 3.55 unaffected ✓.

23. Floor radius 17 < fog start 16 — floor edges fade nicely ✓.

24. The impact star in bounce preset uses ry = p*TAU rotation — spins once per loop ✓ loop-safe.

25. Check xform default param sy = sx — in walker leg: solid.add(PRIM.cyl, 0x8b93a7, fx*0.5, hip+fy*0.5, side*0.14, 0, 0, a, 0.05, 0.5, 0.05) → sx=0.05, sy=0.5, sz=0.05 ✓ explicit. In solid.add(PRIM.sphL, 0x3a4460, 0.42, y+0.04, 0, 0,0,0, 0.13) → sx=0.13, sy=sx, sz=sx ✓ uniform.

26. Bloom preset leaf rotation: solid.add(leafGeo, 0x4fae74, 0, 0.42, 0, -0.55, 0.9, 0) — Euler order default XYZ in my compose — single combined Euler (rx=-0.55, ry=0.9). Order ambiguity here: Euler 'XYZ' in three.js — Matrix4.makeRotationFromEuler XYZ produces R = Rx·Ry·Rz? Let me think about the actual result: For 'XYZ' order, three.js composes the matrix as if rotating about X first, then Y, then Z... Actually the quaternion code: case 'XYZ': q = qx ⊗ qy ⊗ qz (multiplication order). Applied to vector: v' = qx(qy(qz(v))) — so Z applied first, then Y, then X. With rz=0: v' = qx(qy(v)) — rotate about Y first (distribute angle 0.9), then tilt about X by -0.55. For the leaf: leafGeo extends +Z (0.20 offset). qy(0.9): +Z → (sin0.9, 0, cos0.9) = (0.78,0,0.62). Then qx(-0.55): rotates in Y-Z plane: (0.78, y', z') with y' = y cos - z sin... (0,0,0.62)→ y' = -0.62·sin(-0.55) = +0.32, z' = 0.62·cos(-0.55)=0.53. Leaf points (0.78, 0.32, 0.53) — up and outward ✓ leaf angled upward.

For the petals (bloom): I baked tilt into tilted geometry first (rx only), then Batch.add applies ry only — deterministic ✓ (that's why I baked it).

For moth antennae: rx=±0.5, rz=-0.9 combined Euler: v' = qx(qy(qz(v))) → qz(-0.9) first: +Y axis → rotated about Z: (sin0.9? (0,1,0) → (−sin(−0.9)? Rz(θ): x' = x cosθ − y sinθ; (0,1,0) → (−sin(−0.9), cos(−0.9), 0) = (0.78, 0.62, 0). Then qx(±0.5): rotates (0.78,0.62,0) about X: y' = 0.62cos0.5 − 0·... = 0.54, z' = 0.62·(±sin0.5) = ±0.30. Final dir (0.78, 0.54, ±0.30) — forward, up, outward ✓ antennae look right.

27. Walker torso rock rz=step*0.045 applied to torso box and head — head rotated by rock too ✓ subtle.

28. #ph help panel overlaps stats panel #ps on the left? #ps is left-bottom, #ph right-bottom ✓.

29. Button label mode updates via setMode ✓ initial label in HTML "Mode: Strobe" ✓ matches S.mode='strobe'.

30. document.querySelectorAll('[data-preset]')[+k-1].click() — 5 buttons ✓.

31. In drum mode the autoRotate camera continues ✓ fine.

32. Isolate while in drum mode: drum hidden; on exit, buildDrum() re-creates → visible ✓.

One more subtle thing: S.strobePhase accumulates even in free/isolate modes — ticks suppressed, light constant ✓. On re-entering strobe mode, phase continues — irrelevant.

Missing: initial toast or hint. Also on load, drift=0 → synced immediately. Good default experience.

Edge: user sets RPM to min 10 → frameRate = 10/60·12 = 2 Hz strobe — very flickery, educational. Max 96 RPM → 19.2 Hz — smooth. Nice range.

33. Check that glowMat.color.setRGB(2.4,...) doesn't wash out vertex colors: MeshBasicMaterial final = color × vertexColor — vertex colors (≤1) × 2.4 → values up to 2.4 → bloom threshold 0.85 → glow blooms ✓. The tick material color 1.3 × amber (1, 0.76, 0.34) = (1.3, 1.0, 0.44) → mild bloom ✓.

34. solidMat metalness 0.3 with no env map — metals look dark without env; 0.3 is mild, rims give color ✓. Fine.

35. One thing I want to double check: new ShaderPass({...}) with plain object — ShaderPass constructor signature: (shader, textureID). It does this.uniforms = UniformsUtils.clone(shader.uniforms) and creates FullScreenQuad with ShaderMaterial using shader.vertexShader/fragmentShader and defines. Plain object OK ✓.

36. gradePass.uniforms.uTime — after clone, accessible ✓.

37. OutputPass after gradePass: OutputPass performs tone mapping + color space conversion ✓ r160.

Everything looks solid. One improvement for first-load wow: start with a short "power-on" intro: strobe off for 1s (carousel spinning in free light), then strobe engages with toast "STROBE ENGAGED". Nice touch but adds complexity/state. Simple version: ramp strobe intensity in over first second? The pulse already ramps. I'll add a one-time startup toast: toast('SYNCED AT 9.6 HZ — NOTHING ON THIS TABLE MOVES') after 800ms. Cheap. Let me add.

Also — favicon to avoid 404 noise? trivial, skip.

Now add startup toast + update the main index page with the 059 card. Then do a final holistic check (node --check again after edit).

********************************************************************************************k).

Index now links all 59 demos with 059 at the top. Final validation: re-extract the module script and node --check, plus re-run the geometry test to make sure nothing broke, and verify the file once more end-to-end (check script extraction, check no stray issues). Also verify the main index.html is well-formed (basic tag balance for the cards).

Everything checks out:

• Syntax valid.
• All 5 preset builders produce valid geometry against real three@0.160.0.
• Index page: all 59 folders have cards, no dangling cards, tags balanced.

One more useful sanity check: confirm the drum CylinderGeometry merge works (it uses a different merge path with openEnded cylinders + torus — torus is separate mesh, fine). The drum merge of open-ended cylinders — mergeGeometries requires same attributes; CylinderGeometry open-ended has position/normal/uv ✓. My node test didn't cover buildDrum. Quick extra test: replicate the drum merge in node to be safe. Cheap to do — let me run it.

Also final ls to confirm the demo folder contents.

All tests pass. Task complete:

1. Fixed missing index entry: Demo 058-microcosm was created in a previous run but never added to the index page — added with proper title/description.
2. Created Demo 059-zoetrope — a stroboscopic sculpture garden:
   • 5 procedural figure presets (bounce, moth, walker, bloom, inchworm), each built as N static posed frames on a spinning carousel
   • Strobe light sync with drift detune slider (temporal aliasing playground) + snap-to-sync
   • Authentic slit-drum mode (physically real zoetrope that works through actual geometry)
   • Free-light mode revealing the trick
   • Isolate mode cycling single frames at 12 fps
   • Generative audio (strobe ticks + RPM hum)
   • Bloom, vignette+grain post, soft shadows, adaptive quality, auto-orbit, full HUD with sync badge and apparent-motion readout
   • Keyboard shortcuts
3. Updated the index with the 059 card.
4. Validated: JS syntax (node --check), all preset builders + drum merge against real three@0.160.0 in node (no NaNs, sane bounds, correct attributes), index completeness & tag balance.

Done — call _success.