Create PyroSymphony Three.js Demo

Let me look at the task details. The task is "Wake up and do as you please." with description "Wake up and do as you please."

The last execution created a Teslasphere demo (028) and updated the index. So the demos folder has demos 001-028 presumably.

My purpose is to create cool Three.js demos in /space/demos/. Since the task says "do as you please", I should create a new advanced demo. Let me first check what's in the demos folder to determine the next demo number, then create a new impressive demo.

Let me install shell tools and check the current state.

Let me check the current state of the demos folder.

There are 28 demos. The task is "Wake up and do as you please." — so I should create a new demo (029). Let me check the index.html structure to understand the format, and check a recent demo for style reference.

Let me think of a cool demo idea that hasn't been done yet. Existing demos:

1. spinning cube
2. nebula galaxy
3. mandelbulb explorer
4. fluid dynamics
5. gravity sandbox
6. event horizon (black hole)
7. sonic reactor (audio)
8. void runner (game)
9. azure odyssey
10. abyssal bloom
11. physarum garden
12. powder alchemy
13. clockwork nebula
14. neon rain
15. aurora borealis
16. skitter
17. coral resonance
18. threshold
19. attractorium
20. murmuration
21. terraforge
22. cloudsea
23. frostline
24. koi pond
25. ferrofluid
26. synchrony
27. cymatics
28. teslasphere

Ideas for 029:

• Ray-marched fractal caverns / infinite cave explorer
• Reaction-diffusion 3D
• Volumetric fire / campfire
• Ocean waves (Gerstner waves) with buoyancy — maybe too close to cloudsea/azure odyssey
• Cloth simulation
• Solar system / orbital mechanics — gravity sandbox covers it
• Lightning storm — teslasphere covers plasma
• Lava lamp metaballs — ferrofluid is close
• DNA helix
• City flyover procedural — void runner is a game
• Wormhole tunnel — threshold maybe
• "Emberfall" — particle fire with sparks
• "Prism" — caustics, light dispersion through glass
• "Tidal lock" — orbital
• "Bloom" — flower growth procedural
• "Quantum" — wavefunction visualization
• "Ink" — sumi-e ink in water
• "Sandfall" — hourglass sand simulation
• "Starforge" — star formation
• "Kaleidoscope" — interactive kaleidoscope shader
• "Origami" — folding paper
• "Tessellate" — Penrose tiling
• "Lumen" — light beams through fog
• "Glacier" — ice cave ray marching
• "Ember" — volumetric fire
• "Mycelium" — physarum covers that
• "Chromadepth" —
• "Hologram" — holographic shader
• "Spiderweb" —
• "Rain on window" — neon rain covers rain
• "Bioluminescent deep sea" — abyssal bloom covers
• "Paper plane flight" —
• "Rocket" —
• "Pinball" — 3D pinball game!
• "Breakout 3D" —
• "Snake 3D" —
• "Tetris 3D" —
• "Minesweeper 3D" —
• "Marble run" — physics marble run generator! That's cool.
• "Rube Goldberg" —
• "Dominoes" — physics domino chain
• "Wrecking ball" — physics destruction
• "Bridge builder" —
• "Voronoi shatter" — destruction
• "Soft body" — jelly physics
• "Spider" — procedural spider walking (skitter may be that)
• "Hexapod" —
• "L-system trees" — procedural forest with wind
• "Bonsai" — procedural tree growing
• "Sakura" — cherry blossom petals falling
• "Zen garden" — sand raking
• "Aquarium" — koi pond covers fish
• "Terrarium" —
• "Ant colony" —
• "Fireflies" — synchrony is probably firefly synchronization
• "Lighthouse" —
• "Storm" — thunderstorm with volumetric clouds — cloudsea covers clouds
• "Tornado" — particle tornado! That's a good one. Interactive tornado with debris physics.
• "Whirlpool" —
• "Geode" — crystal cave
• "Prism caustics" — realistic light dispersion
• "Black hole" — done (event horizon)
• "Warp drive" — starfield warp
• "Hyperspace" —
• "Stargate" — portal effect
• "Portal" — portals you can walk through
• "Mirror room" — recursive reflections
• "Infinity mirror" —
• "Kaleidoscope" — interactive
• "Mandelbrot deep zoom" — mandelbulb covers 3D fractal; a 2D mandelbrot zoom could be neat but maybe redundant
• "Julia set explorer" —
• "Burning ship" —
• "Reaction diffusion" — Gray-Scott on a 3D surface
• "Turing patterns" —
• "Wave interference" — ripple tank! Interactive ripple tank with obstacles, double-slit. That's a nice physics visualization.
• "Chladni" — cymatics covers that
• "Pendulum" — double pendulum chaos
• "Foucault" —
• "Spirograph" — harmonograph! Beautiful drawing machine.
• "Harmonograph" — yes! Interactive harmonograph with trailing ribbons
• "Lissajous" —
• "Orbitals" — hydrogen atom electron clouds raymarched
• "Molecule" —
• "Crystal growth" — snowflake — frostline may cover
• "Dendrite" —
• "Lightning" — done via teslasphere
• "Fire" — volumetric fire with embers — nice
• "Campfire" — cozy campfire with sparks, smoke, logs
• "Fireworks" — interactive fireworks show! Launch fireworks, particle explosions, trails, bloom. That's a crowd-pleaser and hasn't been done.
• "Comet" —
• "Meteor shower" —
• "Rocket launch" —
• "Satellite" —
• "ISS" —
• "Moon landing" —

Fireworks could be really impressive: procedural firework shells (peony, willow, chrysanthemum, ring, crossette, strobe), GPU particles, trails, bloom, city skyline silhouette, water reflection, audio pops/booms with WebAudio, click to launch, auto show mode, camera orbit. That's a great demo: "029-pyrotechnics" or "029-ember-sky" or "029-starburst".

Alternatively "ripple tank" is more physics-educational. But fireworks has more wow.

Let me check what recent demos look like to keep style consistent and avoid overlap. Let me peek at index.html and one recent demo.

Actually, let me think about which is most distinct: fireworks is distinct from all existing demos. Neon rain has rain; fireworks adds celebration. Good.

Let me name it "029-lumina-show"? Better: "029-pyrotechnica" or "029-fireworks". Simple: "029-fireworks-symphony"? I'll go with "029-starfall"? Hmm, starfall sounds like falling stars. "029-pyro-show"? Let me pick "029-fireworks" — clear. Or something more poetic: "029-bloom-burst"? I'll go "029-fireworks" with title "Fireworks Symphony".

Plan for the demo:

• Three.js r160+ via import map (unpkg or jsdelivr).
• Scene: night sky with stars, moon, distant city skyline silhouette, water plane with reflections (use a simple planar reflection via mirrored render or fake with gradient + stretched particles). Simpler: reflective water using THREE.Reflector? Reflector is available in examples. Could use Reflector for water — nice reflections of fireworks! That's a big wow factor. Use three/addons/objects/Reflector.js.
• Fireworks: CPU-simulated particle system with custom shader points. Each rocket launched from barge/ground, ascends with trail, explodes into burst types:
  • Peony: spherical burst, no trail
  • Chrysanthemum: spherical with trails
  • Willow: long trails, gravity-heavy, gold
  • Ring: flat ring
  • Crossette: splits into 4 after delay
  • Strobe: flickering
  • Palm: arcs upward then droop
  • Crackle: secondary micro explosions with audio crackles
• GPU approach: use Points with per-particle attributes updated on CPU each frame (positions via velocity integration). With a few thousand particles, CPU is fine. Use additive blending, custom shader for round soft sprites with fade.
• Bloom: UnrealBloomPass via EffectComposer.
• Audio: WebAudio synthesized booms (noise burst + low sine thump), crackles (filtered noise pops), launch whistle (descending/ascending sine with noise). No external assets.
• Interaction: click/tap to launch at that sky position; auto-show mode toggle; sliders for intensity; buttons for shell types; camera orbit controls; HUD.
• City skyline: procedural boxes with emissive windows (canvas texture), silhouetted.
• Water: Reflector with slight distortion? Reflector gives perfect mirror; can perturb with normal offset via custom shader — keep simple: use Reflector with color darkening. Maybe add subtle ripple by animating the reflector's texture? Keep simple: Reflector plane with dark tint, plus a semi-transparent dark plane above with animated normal-ish shader? Might be complex. Simpler: use Reflector directly as water with low opacity blended over dark plane. Reflector renders scene mirrored — fireworks reflections will look gorgeous.

Performance: adaptive quality — reduce bloom resolution and particle counts if FPS low.

Snapshots: press P to save PNG.

Let me check the index.html to see the card format and how demos are listed.

Good — I have the format clearly. Now I'll create demo 029. My pick: Fireworks — an interactive fireworks show over a reflective bay, with procedural city skyline, GPU particle fireworks, WebAudio synthesized booms/crackles, bloom post-processing, and full interactivity. Name: "029-pyro-show"? Let me choose something consistent and poetic yet clear: "029-fireworks" — Title: "PyroSymphony" or "Starfall". I'll go with "PyroSymphony — Interactive Fireworks over Water". Directory: /space/demos/029-pyrosymphony/.

Check what version of Three.js the recent demos use and which addons (Reflector availability). Let me grep the import map of the latest demo.

I'll use three@0.170.0 with unpkg, matching the latest demo. Now let me write the full demo. This will be a large file. Let me carefully architect it:

PyroSymphony — Interactive Fireworks over a Mirror Bay

Features:

1. Scene: night bay — procedural sky dome (gradient + stars + milky way + moon with glow), city skyline silhouette with lit windows (instanced boxes + canvas emissive texture), bridge silhouette maybe, water plane using Reflector for mirror reflections, dark tint.
2. Fireworks engine (CPU particle pool + THREE.Points custom shader):
   • Particle pool ~20k particles (adaptive). Attributes: position, velocity (in JS arrays), color, size, life, decay, trail flag, flicker.
   • Rendering: THREE.Points with BufferGeometry, attributes updated each frame: position, color (with fade computed on CPU or in shader via life), size, alpha. Custom ShaderMaterial: round soft sprite, additive blending.
   • Trails: instead of per-frame fading framebuffer (which conflicts with bloom), give each burst "trail" by spawning short-lived spark copies? Simpler classic: each particle has trail rendered as line? Simplest good-looking: use afterimage via a separate low-res accumulation? That's complex with bloom composer. Alternative: emit "ember" child particles — each star spawns trail sparks at intervals. That looks great (real fireworks have visible trails via persistence of vision; we can emulate with short-lived micro-sparks). Willow shells: long-lived gold stars that spawn many micro trail sparks.
   • Rocket: ascending particle with strong trail sparks + slight wobble + whistle audio; explodes at apex.
   • Shell types: peony (uniform sphere), chrysanthemum (sphere + dense trails), willow (gold, long life, high gravity, droopy), ring (flat circle facing random dir, maybe double ring), crossette (stars that split into 4 after delay), strobe (flicker on/off), palm (upward arcs then droop), crackle (stars spawn crackle micro-bursts), heart? maybe "saturn" (ring + sphere). I'll implement: peony, chrysanthemum, willow, ring, crossette, strobe, palm, crackle, saturn. Random selection or user-picked.
   • Colors: curated palettes (complementary pairs/triads), HSL based. Each burst picks palette.
3. Audio (WebAudio, all synthesized):
   • Launch whistle: band-passed noise sweep up + sine glide.
   • Boom: low sine thump (pitch drop) + noise burst lowpassed, with distance-based delay/volume based on burst position vs camera? Keep simple: delay by distance/340 m/s scaled.
   • Crackle: many tiny filtered noise pops.
   • Crossette split pops.
   • Ambient: gentle water lap noise + distant crowd? Keep water noise subtle.
   • Audio toggle button; starts on first user gesture.
4. Post: EffectComposer + RenderPass + UnrealBloomPass + custom grade pass (vignette, grain, slight chromatic aberration, tonemap tweak). OutputPass for color space.
5. Interaction:
   • Click/tap on sky: launch rocket targeted at that point (raycast onto a virtual plane at z=0 or onto sky dome; map screen y to burst altitude).
   • Auto show toggle with finale every N seconds; intensity slider (launch rate); shell type selector (Random + each type); color mode maybe.
   • OrbitControls (damped, limited polar angle to keep above water), camera presets? Keep orbit + auto slow orbit toggle.
   • Keys: Space = launch random, F = finale, A = auto, M = mute, P = snapshot, H = hide UI.
6. HUD: title, particle count / FPS meter, controls bar bottom, help overlay.
7. Adaptive quality: monitor FPS, reduce max particles / bloom resolution / pixel ratio.
8. Snapshot: press P → render and download PNG.
9. Water: Reflector from three/addons/objects/Reflector.js. To make it look like water not perfect mirror: put reflector slightly below a transparent dark "ripple" plane with animated normal-ish shader that distorts? Reflector doesn't distort by default. Option: custom water shader with planar reflection texture — too much. Use Reflector with color option dark (e.g., 0x0a1420) and add subtle animated semi-transparent overlay plane with fbm "glitter" to break perfection. Also add moving "shimmer" via a second transparent plane with procedural sparkle shader at low opacity. Good enough and looks great with fireworks reflections.

Also add: launch barges on the water (small dark platforms with blinking lights) from which rockets launch — nice touch. 3 barges at different x positions.

City skyline: instanced boxes along the back shore (z = -120), with emissive windows via canvas texture; plus a few blinking aircraft warning lights on tall buildings; maybe a tower with spire. Add subtle fog.

Moon: bright disc sprite in sky with halo (shader or sprite), positioned high left.

Stars: Points with twinkle (shader size/alpha by time + hash).

Milky way: faint band in sky dome shader (fbm).

Flash lighting: each burst creates a PointLight? Too many lights. Use one reusable PointLight moved to latest/brightest burst with intensity falloff — illuminates skyline & water subtly. With MeshStandardMaterial city + one dir ambient. Keep city mostly emissive/silhouette so lighting cheap. Maybe skip dynamic light; instead add "flash" uniform to skyline shader? Simpler: 2 pooled PointLights assigned to most recent bursts, distance-limited. Since buildings are MeshBasicMaterial-ish silhouettes, lights won't matter. I'll add one hemisphere + the pooled point lights affecting water overlay and barges (standard material). Minor.

Reflection note: Reflector renders the scene including points (fireworks) — yes, Points will be reflected, looks amazing.

Performance: Reflector doubles draw; keep scene modest. Provide quality tiers: High (pixelRatio up to 2, 24k particles, bloom high), Medium (1.5, 16k), Low (1, 9k, reflector lower res).

Let me now write the code carefully. It's long; I'll write it in one go, then validate with node --check (extract the module script). Since it's an HTML with inline module, I can extract script content via sed and run node --check with --input-type=module. Node check of ES module with imports of 'three' — node --check only parses, doesn't resolve imports, so fine.

Key implementation details:

Particle system:

Update loop: for each alive particle: integrate, apply gravity/drag, life -= dt; if dead, swap-remove (keep packed arrays with count). Spawn trail sparks for flagged particles at interval.

Points geometry with dynamic draw, setDrawRange(0, count).

Shader:

Additive blending, depthWrite false, depthTest true.

Rockets: separate small pool or same pool with flag rocket (gravity negative? rockets rise: constant thrust velocity upward decreasing, spawn trail sparks). I'll manage rockets in a JS array of objects {x,y,z,vx,vy,vz, targetY or fuseTime, shell, colorIdx, trailTimer}. Each frame spawn trail spark particles into pool. When fuse ends → explode(shell, pos).

Explosion functions spawn N star particles with velocities per type.

Audio engine:

Boom: osc sine 120→40 Hz over 0.5s + noise buffer lowpass 400Hz, exp decay. Crackle: schedule k short noise bursts (5-15ms) highpass 2k over 0.4-1s. Whistle: sine 600→1800Hz? Real whistle ascends; plus vibrato. Keep subtle.

Distance delay: burst at distance d from camera → delay = d/340 (scaled world units ~ meters). Volume falloff 1/sqrt(d). Nice touch, cheap.

Auto show: timer launches 1-3 rockets every interval (intensity slider 0.5x-3x), finale every ~45s: launch 12-20 rockets rapid + big shells.

Click to launch: raycast from camera through pointer onto plane z = LAUNCH_Z (e.g., z=-40 plane, vertical plane facing camera?) Better: intersect with sphere/plane at fixed depth: use a plane perpendicular to camera at distance ~150 from camera through scene center; clamp target y between 40 and 160, x within ±140. Launch from nearest barge below target x.

Barges: 3 platforms at z=-30..-60, x=-80,0,80. Rockets launch from barge tops with slight angle toward target.

Sky: big sphere (BackSide) shader: vertical gradient (deep blue → horizon glow orange-ish city glow), stars handled by separate Points (cheaper twinkle), milky way fbm band, plus horizon city glow. Moon: sprite with radial gradient canvas texture + halo; placed far.

City: generate ~120 buildings: BoxGeometry instanced with per-instance scale; windows: single canvas texture with emissive windows grid, applied via MeshBasicMaterial with the texture (silhouette dark + emissive windows) — simplest: MeshLambertMaterial with emissiveMap = window texture, emissive white-ish, color near-black. Use InstancedMesh with same geometry; texture repeats per building face — window density varies with scale, acceptable. Add a couple of landmark towers with spire (cone) and blinking red light (small sprite pulsing).

Fog: THREE.FogExp2 very subtle dark blue.

Water: Reflector geometry plane 2000x2000 at y=0, color 0x0a0f18, textureWidth/Height by quality. Add overlay plane slightly above (y=0.02) with custom shader: mostly transparent dark blue with moving fbm shimmer + subtle wave normal sparkle; also fades with distance. Also add gentle "swell" via vertex displacement? Keep flat (mirror must stay planar). Overlay gives water feel.

Also floating lantern reflections? skip.

Grade pass: custom ShaderPass with vignette + film grain + slight chromatic aberration + subtle saturation boost.

Snapshot: renderer.domElement.toDataURL after render with preserveDrawingBuffer? Use composer render then toBlob. Need preserveDrawingBuffer: true OR render right before capture in same frame — do: snapshotRequested flag → at end of animate frame after composer.render, call toDataURL. Works without preserveDrawingBuffer if captured synchronously in same task. I'll do that.

Adaptive quality: track avg FPS over 3s windows; if < 45 drop tier; if > 58 for a while and below max tier, raise. Tiers affect: pixelRatio, reflector texture size, particle cap (just limit spawns), bloom strength/resolution.

HUD: top-left title + subtitle; top-right stats (FPS, particles, shells fired); bottom control bar: buttons [Launch (space)], shell type select (dropdown or cycling button), Auto toggle, Finale, Mute, Quality display, Snapshot, Help. Keep style consistent with teslasphere (glass panels).

Help overlay: list of controls, toggled with H or ? button; shown initially for a few seconds? Show a small hint line that fades.

Let me also add subtle camera intro animation: camera starts wide and eases into orbit position.

Alright, also ensure touch: tap = launch at point; pinch orbit via OrbitControls handles touches; UI buttons sized for touch.

Edge: OrbitControls click vs launch conflict: use 'click' event with small movement threshold (pointerdown/up distance < 6px) to treat as launch, not drag. Good.

Now write the file. I'll aim for clean, commented code. Length maybe ~1100-1300 lines. Let me write it.

Some shader details:

Star points twinkle: shader with attribute phase; alpha = 0.5+0.5sin(tspeed+phase); size attenuation.

Sky dome shader:

Moon: use a circular plane mesh with shader (disc + maria fbm + halo via smoothstep) always facing camera (Sprite with custom material? Sprite material is limited; use Mesh + lookAt each frame, or Points with big size — simpler: Mesh circle billboarded in animate).

Pooled PointLights: 2 lights, on explosion assign to strongest recent burst: position set, color set, intensity decays to 0 over ~0.4s. Affects water overlay & barges (MeshStandardMaterial). Also add faint AmbientLight + moonlight DirectionalLight low.

City windows texture: canvas 128x256, dark background (#05070c), grid of windows, random lit (warm/cool), some floors dark. Emissive map needs emissive color white and emissiveIntensity ~1; base color black. Buildings as InstancedMesh with MeshLambert? Lambert supports emissiveMap. Use MeshStandardMaterial? Lambert cheaper. With fog.

Bridge: maybe skip bridge; add distant hills silhouette? Add simple dark mountain ridge plane behind city via canvas texture or geometry triangles. Nice: ridge of low-poly triangles silhouettes. I'll add a simple ridge using a custom BufferGeometry strip with noise heights, dark material, at z=-260.

Now audio whistle: two oscillators? Simple: sawtooth at low gain through bandpass sweeping 800→2400, 1.2s, plus noise. Keep gain low (0.05).

Boom thump:

Pre-generate a 1s white noise buffer reused.

Launch pop: short filtered noise burst.

Finale: multiple booms overlapping.

Auto show director: state machine: interval base 1.6s / intensity; occasionally volley of 3; finale every 40s (8s of rapid launches). Show "FINALE" flash on HUD.

Shell definitions with palettes:

Each burst: pick 1-2 colors; stars colored with slight variance; some bursts two-color split (inner/outer).

Shell types implement:

• peony: N=220 stars, uniform sphere speeds 26±3, no trails, life 1.6-2.2s, drag 0.9?, gravity 9.8*0.6.
• chrysanthemum: N=260, trails (spawn micro sparks every 40ms), life 2.2.
• willow: N=160, gold colors, life 3.5-4.5, gravity 14, drag higher, trails heavy, speeds 22.
• ring: N=140 arranged circle in random oriented plane, speed 30, plus small inner ring maybe; life 2.
• crossette: N=40 large stars, after 0.8s each splits into 4 small at perpendicular plane; pops audio.
• strobe: N=200, flicker attribute (square wave by time), silver/white-blue.
• palm: N=90, velocities upward-biased cone then heavy droop, trails.
• crackle: N=180, each star after random 0.3-0.9s emits 3-6 crackle sparks + pop sounds (limit audio pops per frame).
• saturn: sphere + equatorial ring.

Implement flags: TRAIL (spawn sparks), STROBE (flicker), CROSSETTE (split event), CRACKLE (micro burst event). Per-particle "eventTime" and "eventDone".

Particle fields (Float32Array): pos(3), vel(3), col(3), size, life, ttl, fade(attr updated), grav, drag, trail (0/1), strobeseed, evtT, evtFlag(type), seed.

Update per frame CPU: count alive; iterate with swap-remove.

Trail sparks: when particle has trail and its trailTimer accumulates > interval: spawn spark at pos with tiny random vel, short ttl 0.25-0.5, same color * 0.7, small size. Use per-particle accumulator array.

Cap spawns when pool near full: drop oldest? Just skip spawn if full (or overwrite random). Skip is fine.

Explosion flash: also spawn 1 big soft "flash" particle (size huge, ttl 0.25, white) + point light pulse.

Also add subtle smoke? skip.

Now sizes: world scale ~ meters: bay 400 wide, bursts at y 60-150, speed ~25 u/s. Camera at (0, 35, 170) looking at (0,60,-40). OrbitControls target (0,55,-20), minDistance 60 maxDistance 400, maxPolarAngle ~1.45 (above water), pan limited.

Reflector: plane 1200x1200 rotated -PI/2 at y=0. City at z=-160..-240, x -300..300. Barges at z=-40..-90.

Launch points: barges x in [-90, 0, 90], z=-60.

Rocket: speed ~55 up, fuse until y reaches targetY (or time), slight x drift toward target x (lerp velocity). Trail sparks gold-white. Whistle on launch.

Click mapping: ray from camera; intersect plane z = -60 (vertical plane perpendicular to z-axis at z=-60): point = origin + dir * t where t = (-60 - origin.z)/dir.z; if dir.z >= 0 (clicking behind), fallback target center. Clamp x [-160,160], y [50,170].

Auto launch target: random x in [-140,140], y in [60,160], z=-60±20.

OK, also FPS meter & particle count update every 0.25s.

Snapshot: press P or button → flash effect + download 'pyrosymphony.png'.

Hide UI: H toggles panels.

Let me now also design the grade pass shader:

Use OutputPass before grade? OutputPass does tone mapping + sRGB. Order: Render → Bloom → Output → Grade (grade in sRGB space, fine).

Bloom: UnrealBloomPass(res, strength 0.9, radius 0.6, threshold 0.55). Fireworks additive HDR-ish colors (values >1 via multiplier) will bloom nicely. Set renderer.toneMapping = ACESFilmic, exposure 1.1.

Points material: to get HDR brightness, multiply color by intensity (e.g., 2.2) in shader.

Now write everything. Also remember maximum-scale=1, user-scalable=no viewport like teslasphere.

Also mobile: bottom controls may overflow; use flex-wrap and small fonts; add media query.

Let me write the file now. I'll write it in one big write. Then extract JS and node --check it.

One caution: node --check on ES module: node --check works for CommonJS by default; for ESM need file .mjs or --input-type=module with stdin. I'll extract script to /tmp/demo.mjs and run node --check /tmp/demo.mjs. Node supports --check for .mjs? node --check uses the module goal based on extension — .mjs should parse as module. Yes.

But imports of "three" won't resolve — --check only parses syntax, doesn't execute/resolve. Good.

Let me carefully write the code.

Structure:

Now details of particle pool code:

Update:

doEvent crossette: spawn 4 children with perpendicular velocities; play pop (limited); set evtType=0. crackle: spawn 3-5 micro sparks short life bright white-gold + tiny pop; maybe re-arm once more (set evtT += rand(0.2,0.5), 30% chance) — but keep simple: single event plus trail sparks give effect; re-arm with 50% chance once: use evtType=3 as "done"? I'll allow crackle to re-arm up to 2 times via counter stored in strobe? No — add evtCount Uint8Array. Fine, add one more array.

Explosions:

Peony:

Hmm drag 0.9/s exponential is strong; speeds 24 → after 1s ~ 9.7. ok.

Chrysanthemum: same + trail:1, ttl 2.2, size 1.5. Willow: n=150, speed 20, ttl 3.6+rand, grav 13, drag 0.55, trail:1, color gold (#ffd27a..#ffedb0), size 1.4. Trail interval shorter (0.02) via global. Ring: pick random normal vector; basis u,v; n=120; vel = (u cosθ + v sinθ)30; ttl 2.0; maybe second inner ring speed 18 opposite colors. Saturn: peony sphere n=140 speed 20 + ring n=100 speed 30 in horizontal-ish plane (random tilt). Crossette: n=36 big stars size 2.6 ttl 1.5, evt crossette at 0.75+rand0.3; children: 4 each, speed 12 in plane perpendicular to parent vel, size 1.4 ttl 1.0, pop sound (limit 8/frame). Strobe: n=200, strobe freq 6-10, colors silver/ice, ttl 2.4. Palm: n=80, dir within cone around up (angle<35°), speed 26, grav 16, drag 0.7, trail 1, ttl 2.6, colors green-gold? palm usually gold with green? Use palette. Crackle: n=160, evt crackle at 0.4+rand*0.5, ttl 2.0, trail 0; crackle children: 4 sparks speed 6, ttl 0.3, white, size 0.9 + pop.

Shell list with weights for random: [peony .18, chrys .16, willow .14, ring .12, crossette .1, strobe .1, palm .08, crackle .08, saturn .04].

Rockets:

Palette per rocket chosen at launch.

Audio distance: camera.position.distanceTo(v) → delay = d/340, gain = clamp(90/d, 0.15, 1).

Show director:

Finale: 26 rockets over ~5s + flash "FINALE" text.

Quality manager:

Changing reflector texture size at runtime: Reflector has getRenderTarget? reflector.renderTarget? In three r170 Reflector exposes .getRenderTarget(). I can call reflector.getRenderTarget().setSize(w,h). Yes, Reflector has getRenderTarget method. I'll guard with try.

Simpler: recreate reflector on quality change? Avoid; use setSize via getRenderTarget if available else ignore.

Manual quality select too (Auto + tiers) — keep Auto only plus display current tier. Add a "Quality" button cycling Auto→Cinematic→...→Auto? Keep simple: Auto with display.

Input: pointerdown records x,y,time; pointerup: if moved <7px and duration<400ms → launch at screen point. Also don't trigger when clicking on UI panels (check event.target closest('.panel')). Attach to renderer.domElement only — panels are separate DOM, so fine.

Ray to plane z=-60:

Keys: Space launch random; F finale; A auto toggle; M mute; P snapshot; H help; 1-9 shell select?

HUD stats: FPS, particles alive, shells count, quality tier.

Hint: bottom-center small text "Click the sky to launch · Drag to orbit · Scroll to zoom" fades after 8s, reappears on H? Keep help overlay separate.

Help overlay: grid of shortcuts; toggle button "?".

Snapshot:

Must be after composer.render in same frame — yes since toBlob reads back synchronously? toBlob is async but the drawing buffer is captured at call time? Actually toBlob captures current buffer content — without preserveDrawingBuffer the buffer may be cleared after compositing; calling toBlob synchronously within the same frame before returning to event loop is generally safe (spec: canvas is copied at toBlob call time). Yes, toBlob snapshots at call time. Good.

Flash on snapshot: brief white overlay div opacity.

Audio init on first gesture (pointerdown/keydown) → ctx.resume. Mute toggles master gain.

Now the sky shader:

fbm via 2-3 octave value noise hash — write small noise funcs.

Stars: 1200 points on upper hemisphere radius 900, shader twinkle; size 1.2-2.6 px scaled; additive; some colored (blue/warm).

Moon: circle geometry radius 26 at position (-260, 210, -520)? Should be within sky sphere (radius ~900). Shader: disc with limb darkening + maria fbm + halo glow in same material (plane 3x disc size, discard outside? draw halo via alpha). Billboard each frame: mesh.lookAt(camera.position). Also moon glitter on water? The reflector will reflect the moon mesh automatically.

City:

Emissive with fog: FogExp2(0x05070f, 0.0016)? Keep subtle so fireworks visible.

Warning lights: 8 sprites on tallest buildings, pulse via sin; small red additive sprites.

Ridge: behind city z=-300: BufferGeometry strip of triangles with noise heights 20-60, color 0x030509 basic. Simple: use PlaneGeometry(1400, 90, 96, 1), displace top vertices? Easier: build custom: vertices along x, two rows (y=0 and y=h(x)), triangle strip → index. Basic material dark.

Barges: 3 groups: box hull (10x2x5) dark + 4 small posts + blinking light (small sphere emissive orange, pulse) + slight bob animation (y = sin(t+phase)*0.3, rotation.z small). Standard material so point lights affect. Also mortar tubes: small cylinders tilted.

Water shimmer overlay: plane 1200x1200 at y=0.05, ShaderMaterial transparent, depthWrite false:

Add uniform uFlash (vec3 color + strength) set on explosions near? Simplify: two global uniforms uFlashColor/uFlashPos? Overkill — the pooled PointLights won't affect ShaderMaterial. Instead overlay mostly static shimmer; reflections from Reflector already carry fireworks. OK.

Also add faint fog on water: distance fade alpha.

Pooled lights: 2 PointLights (color set per burst, intensity 0 → pulse to ~600 (physical falloff) with decay). In r155+, lights use physical units by default when renderer.useLegacyLights=false (default true? In r170 default useLegacyLights=false). PointLight intensity in candela; for radius effect set distance and decay=2, intensity like 2000 for punch. I'll tune: intensity 3000, distance 260, decay 2. Also ambient 0x223044 0.5 and directional moonlight 0x8fb4ff 0.25 from moon direction.

These lights affect city (Lambert) — nice: bursts light up buildings! And barges.

Also skyline "flash" via emissiveIntensity bump? Skip; point lights enough.

Grade pass + bloom + output pass ordering: RenderPass → UnrealBloomPass → OutputPass → GradePass(final). OutputPass performs tone mapping & color space conversion; GradePass after works in sRGB — fine for vignette/grain.

Set renderer.toneMapping = ACESFilmicToneMapping; renderer.toneMappingExposure = 1.15.

Points shader with additive blending: colors multiplied by ~2.4 for HDR pop pre-tonemap.

Now sizes attenuation: gl_PointSize = aSize * uPixelScale / -mvPosition.z where uPixelScale = drawingBufferHeight * 0.9 (tune). With size ~1.6 world units at distance 200 → px = 1.6*900/200 ≈ 7px. ok. Flash size 26 → 117px. fine.

Cap gl_PointSize to avoid huge: min(px, 220).

Also round sprite soft edge + hot core.

Star (sky) points: similar shader with twinkle; size in px world-attenuated small.

Now HUD styling — copy teslasphere vibe: glass panels, accent color — pick accent #ffb454 (amber/gold fireworks) with secondary #6ad5ff.

Controls bar: [🎆 Launch] [Shell: select dropdown] [Palette: Auto?] — keep: Shell select (Random + 9 types), [Auto Show ▶/⏸ toggle], [Finale], [Intensity slider], [🔊/🔇], [📷], [?]. Buttons small.

Select styling dark.

Stats panel: FPS / Particles / Shells / Quality.

Title: "PYROSYMPHONY" letterspaced, subtitle "interactive fireworks over a mirror bay".

Finale banner: center-top big text "✦ FINALE ✦" fade in/out.

Help overlay content: table of gestures/keys.

Now, code size is big but manageable. Let me write it.

Also remember: prevent context menu on long press (touch): renderer.domElement.addEventListener('contextmenu', e=>e.preventDefault()).

Resize handler: camera aspect, renderer size, composer size, bloom resolution, update uPixelScale uniform (depends on drawingBufferHeight).

Adaptive: every 2.5s compute avg fps; if < 42 and tier < max → tier++ apply; if > 57 and tier>0 and stable 3 windows → tier--. Apply: renderer.setPixelRatio, composer.setPixelRatio? EffectComposer has setPixelRatio and setSize. Reflector RT resize via getRenderTarget().setSize. spawnBudget set. bloom.strength maybe constant.

Initial tier: mobile (touch + small screen) → 'Balanced' else 'High'.

Let me now also double check Reflector import path: 'three/addons/objects/Reflector.js'. Yes.

UnrealBloomPass imports OutputPass? We import OutputPass from 'three/addons/postprocessing/OutputPass.js'. ShaderPass from 'three/addons/postprocessing/ShaderPass.js'. EffectComposer, RenderPass.

OrbitControls from 'three/addons/controls/OrbitControls.js'.

Write the code now. I'll be careful with syntax. After writing, extract module JS → node --check.

One more detail: points frustumCulled = false (particles span world). geometry.boundingSphere set large or mesh.frustumCulled=false.

For swap-remove with attributes: after loop, mark needsUpdate for position, aColor, aSize, aFade; setDrawRange(0,count). Also update ranges? Using needsUpdate full upload each frame of 26k*3 floats — fine (about 300KB/frame, OK).

Actually to be safer perf-wise, set attribute.updateRanges? Skip — full update fine.

Audio crackle pops limit: maxPopsPerFrame counter reset each frame.

Let me write out the entire HTML now.

Also the "Launch" button launches a random shell at random target.

Shell select: with options Random, Peony, Chrysanthemum, Willow, Ring, Saturn, Crossette, Strobe, Palm, Crackle.

Intensity slider 0.3–3 step 0.1 value 1.

Auto show default ON so it's alive immediately. Also launch 3 rockets at t=0.5s staggered for instant wow (after audio not needed — visuals fine; whistle only if audio enabled).

Mute button starts muted? Audio requires gesture; start unmuted state but ctx suspended until gesture. Button shows 🔊.

Write it.

For the city emissive windows with InstancedMesh — all instances share same texture; windows will stretch with scale — acceptable stylization. To reduce stretch, set texture repeat via geometry UVs of box (0..1 per face) — stretching varies per building; fine at night distance.

Add subtle variation: 2-3 different window canvas textures → 3 InstancedMeshes. OK do 3 variants.

Blinking red lights: small PlaneGeometry sprites with additive material, pulse opacity via sin(t*2+i). Use Sprite? Sprite with SpriteMaterial color red, additive; scale 1.5. Update opacity per frame — need per-sprite material instance (10 sprites → 10 materials, fine).

Barge lights similar orange.

Now the water Reflector:

Reflector color darkens reflection (multiplies). 0x8899aa-ish? Reflector 'color' is used as base tint — darker = dimmer reflection. Use 0x2a3542? Actually Reflector shader: vec4 base = texture2DProj(...); gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0) — blendOverlay with color; dark color darkens. Typical water: color 0x001e0f etc. I'll use 0x0e1620 for dark reflective bay, then shimmer overlay adds life.

Hmm — blendOverlay with dark color may make reflections very dark. Common examples use 0x7f7f7f (neutral). I'll use 0x505a66 (slightly dark neutral) to keep reflections visible but moody. Plus overlay darkens.

Also reflector reflects sky dome (radius 900 within far plane 4000, fine) and city — gorgeous.

Overlay shimmer plane at y=0.08 with additive? If additive, it brightens; want subtle glints: additive with low alpha sparkles + slight blue tint via normal alpha blend. I'll do transparent normal blending, color dark blue alpha 0.25 + glints computed in shader added to color.

Glints animate with time: n = fbm(uvscale + tspeed); glint = pow(n, 24)*intensity — sparse sparkles. Also slow moving "lanes" of glitter under moon: align toward moon x=-260: glitter band where fract? Keep simple sparkles.

OK writing now. Also add uTime uniform updates.

Camera intro: start pos (0, 90, 330) → ease to (0, 42, 175) over 4s with smoothstep; disable during user interaction (flag on pointerdown). OrbitControls enabled anyway; intro only modifies camera.position while no user input yet; fine.

Auto-orbit: controls.autoRotate = true, speed 0.4; stops on user drag (pointerdown sets autoRotate=false, resumes after 10s idle? keep: re-enable after 12s without interaction if auto show on? simpler: toggle stays off after manual). I'll do: autoRotate true initially; any pointerdown disables; double-click toggles? Skip double-click. Fine.

Let me write the file. I'll number it 029-pyrosymphony.

Also update /space/demos/index.html adding card at top after the comment.

Card description draft: "A lakeside fireworks theatre — click the sky to conduct: nine procedurally-choreographed shell types (peony, chrysanthemum, willow, ring, Saturn, crossette, strobe, palm, crackle) soar from bobbing barges and bloom into up to 26k additive GPU sparks with ember trails, strobes and mid-air splits, all mirrored in a real-time planar-reflection bay. A procedural skyline with three lit-window variants, blinking aviation beacons, a mountain ridge, fbm milky-way sky, HDR moon and twinkling stars set the stage, while pooled point lights wash the city in each burst's colour. Generative WebAudio delivers distance-delayed thumps, crackle tails, launch whistles and barge pops; the auto-show director builds to periodic finales. Featuring UnrealBloom, vignette/grain/chromatic grade, adaptive quality tiers, snapshots and full touch support."

Good. Now write demo file.

Let me carefully write JS. I'll keep functions tidy.

Potential pitfalls:

• Reflector + fog: Reflector shader doesn't support fog; fine.
• Points shader with fog: skip fog on points (fireworks shouldn't be fogged much anyway).
• OutputPass with r170: exists.
• UnrealBloomPass constructor: (resolution: Vector2, strength, radius, threshold).
• EffectComposer setPixelRatio exists.

Write now. I'll produce the file via read_write_file_in_shell_environment write mode. It's long — that's fine.

Let me draft the JS in full mentally as I write.

Also: const isCoarse = matchMedia('(pointer: coarse)').matches;

For the shell select on mobile, keep compact.

Code:

... then config, utils (rand, irand, pick, clamp, lerp, smoothstep), palettes, shell weights.

Renderer setup, scene, fog, camera, controls.

Lights: ambient, moon dir, pooled burst lights.

Sky dome (sphere r=1500? camera far 5000; reflector clips? Reflector renders scene with its own virtual camera — sky sphere included fine).

Stars points.

Moon billboard mesh (plane 140x140 at (-300, 230, -700)) shader with disc+halo, transparent, additive? Normal blending with alpha; depthWrite false. lookAt camera each frame.

City group + ridge + beacons.

Barges.

Water reflector + overlay.

Particles Points + material.

Rockets array.

Audio engine object.

Director.

Input.

Post.

Quality.

HUD.

Animate.

Now writing concretely — being careful with every bracket. I'll write the final content directly.

For node --check, I'll extract with sed between <script type="module"> and </script>.

Let me write the file.

One consideration on spawnSpark for trails: sparks inherit color0.75, size 0.55parent, ttl 0.3+rand0.25, vel = parent vel0.05 + jitter 1.5, grav 4, drag 2.

Crossette children: parent vel v; build perpendicular basis: u = normalize(cross(v, up)) (if parallel pick x), w = cross(v,u); children vel = ±uspeed ±wspeed (4 combos) + v*0.35; speed 13; size 1.5; ttl 1.1; color lighten (mix with white 0.3). pop sound limited.

Crackle children: 5 sparks speed 5±3 random dirs, ttl 0.22+0.15, size 0.8, color white-gold, grav 2, drag 1; pop (tiny, high-pass) limited.

Audio pops: implement pop(when, gain, freq) tiny noise burst through bandpass freq 1200-3500, dur 0.03.

Boom(gain, delay): thump + body noise + optional crackle tail for crackle shells handled by particle events instead.

Whistle(dur): sine osc freq 500→1400 exp over dur*0.9, gain 0.04 env; plus noise bp 2000 Q8 gain 0.015. Stop at dur.

Launch pop: noise burst lowpass 300, 0.08s, gain 0.12.

Master: gain 0.9 → compressor → destination.

Ambient water: looped noise buffer through lowpass 400 with slow LFO gain 0.015 — subtle. Start after init.

Now HUD stats update interval 250ms.

Shells fired counter.

OK — writing the actual file now. I'll be meticulous.

Also add window.addEventListener('error')? no.

Finale banner div handling with CSS class 'show'.

Snapshot filename 'pyrosymphony-YYYYMMDD-HHMMSS.png'.

Let me write.

(Also ensure type="module" script at end of body.)

Regarding reflector quality resize:

Reflector in r170 — getRenderTarget() exists (yes, it's a method). Guard anyway.

Also reflector has its own resolution; when pixelRatio changes, RT size in pixels = textureWidth (independent of pixelRatio). fine.

Bloom pass resolution: new UnrealBloomPass(new THREE.Vector2(w,h), ...) uses internal; on resize call bloomPass.setSize? composer.setSize handles passes. With setPixelRatio too. OK.

uPixelScale uniform: = renderer.domElement.height (drawing buffer) * 0.5? Let me compute: pointSize(px) = size_world * projFactor / dist where projFactor = height/2 / tan(fov/2). fov 55 → tan(27.5°)=0.5206. height e.g. 900pr. So uPixelScale = (drawingBufferHeight0.5)/0.5206 ≈ height0.96. I'll compute exactly: uScale = drawingBufferHeight / (2Math.tan(THREE.MathUtils.degToRad(camera.fov*0.5))). Update on resize & quality change. Same for stars shader.

gl_PointSize clamp: min(size, 260.0).

Also enable alpha: false canvas, powerPreference: 'high-performance', antialias false (bloom + additive points don't need MSAA; city edges slight aliasing acceptable; but buildings may shimmer — set antialias true? With composer, MSAA of default framebuffer doesn't apply to render targets anyway. Keep false, rely on bloom softness. Actually in r170 WebGLRenderer antialias only affects default framebuffer; since we render via composer targets, aliasing persists. Could use FXAA pass — skip, night scene + bloom hides it.)

Set renderer.autoClear default true fine.

Now writing the file for real. I'll include rich comments.

After writing: extract & node --check, fix issues, update index, done.

Let me also prepare the exact index.html insertion after <!-- New demos are added here -->.

Now write the demo file.

Now write the big index.html. Let me compose it fully and carefully.

I noticed one bug I intentionally left as a placeholder that I need to check:

# + '' is a syntax error! I wrote # + '' which is invalid JS. I need to fix that line. Let me fix it properly:

And remove the PALETTES[7] line.

Also check spawnTrailSpark uses _tmpColor before its declaration — _tmpColor is declared with const AFTER spawnTrailSpark function definition but the function is only CALLED later at runtime (after const initialization). Function declarations hoist, const doesn't, but the call happens after module evaluation completes (in animate loop), so _tmpColor is initialized by then. Fine.

But wait — in spawnTrailSpark, I use _tmpColor.setRGB(...).getHex() then pass to spawn which uses _c.set(colorHex) — but _tmpColor.getHex() returns a number, fine. However there's a subtle issue: spawn uses _c — no conflict with _tmpColor. OK.

In doParticleEvent crossette: uses _tmpColor similarly fine.

Another check: in explode(), I use _v.set(x,y,z) for distance calc, then later sphereDir(_v) reuses it — fine since distance computed first.

In 'ring' case: sphereDir(_v); const nrm = _v.clone(); fine.

In 'saturn': uses _v and local vectors, fine.

Check screenToSky: if d.z >= -0.05, t=200. Then z clamp. OK.

Check keydown handler: k >= '1' && k <= '9' — string comparison works for single digits. OK.

Check applyTier calls onResize() which uses renderer.domElement.height — after setPixelRatio + setSize, domElement.height is drawing buffer height. But applyTier is called before animate; onResize uses camera etc. all defined. OK. But note: applyTier() is called at line before animate() — after all definitions. Good.

One issue: In applyTier, composer.setPixelRatio then onResize() calls composer.setSize(innerWidth, innerHeight) — EffectComposer.setSize uses its pixelRatio. Good.

Potential issue: renderer.setPixelRatio then renderer.setSize inside onResize — order fine.

Another check: const t = now * 0.001; — variable t shadows nothing problematic in animate scope. OK.

In updateParticles: if (pPos[i3+1] < 0.3) { killParticle(i); continue; } — kills stars that dip below water. Rockets trail sparks have negative vy, may fall below — fine, they fizzle.

Bug check in killParticle: copies pFade etc. — also pTrailAcc copied. Good.

In spawn, when pool full returns -1 — callers don't use return value except flash spawn. fine.

launchRocket — barges array populated before any launch call. The opening volley setTimeout at 600ms — after module eval. fine.

audio.pop(0.5, 900) signature pop(gain, freq) — ok.

Check doSnapshot flash element manipulation fine.

Check help overlay close button id btnCloseHelp — wired. OK.

selShell value for digit keys — SHELL_KEYS array of 9, keys 1-9. OK.

One more: PALETTES fix needed. Also check the line ['#c77dff', # + '' ], — definitely syntax error. Fix now.

Also moon plane 240x240 at distance ~1000 from camera — angular size ok. Moon shader: disc radius 0.44 of half-plane → 0.44*120 ≈ 53 world units radius. Fine.

Also stars.material.uniforms.uScale — set in onResize. Good.

Reflector: reflector.getRenderTarget() — exists in r170? Let me verify: Reflector has method getRenderTarget() — yes, it's part of Reflector implementation (returns this.renderTarget... actually in three r170 Reflector source: this.getRenderTarget = function () { return renderTarget; }; Yes it exists.)

Guard used anyway.

Also check: scene.fog = FogExp2 and Reflector — Reflector material doesn't react to fog; fine.

City MeshLambertMaterial with emissiveMap — Lambert supports emissive + emissiveMap. Good.

InstancedMesh count N=46 per variant, 3 variants = 138 buildings. good.

One concern: windowTexture uses irand — defined. ok.

In makeCity, tall collects buildings with h>62 — but h was possibly modified Math.max(h,10) in scale; fine.

beaconMat.clone() per sprite — SpriteMaterial clone ok. Opacity animated per frame — transparent true set. ok.

Ridge geometry: heights formula could produce negative? Math.abs(...) ensures ≥0, times stuff, h between 24 and 70. ok. Note Math.sin(i*2.3) can be negative → (0.5+0.5*sin) in [0,1]. fine.

Shimmer plane: renders over reflector; alpha blend; renders after reflector (added later) — renderOrder default, both opaque? shimmer is transparent so rendered in transparent pass after opaque reflector. Points also transparent additive — drawn after; fine.

Moon transparent — drawn in transparent pass sorted by depth; moon far away so drawn first among transparents. OK.

Now the PALETTES fix. Also double-check there are no other stray # issues: search for #' patterns... The fix will handle it.

Also in the CSS, #help td:first-child etc fine.

Let me fix PALETTES, then extract JS and run node --check.

Progress checkpoint — run in progress, 54.8% of time used (wait, timeProgress 0.548 means 54.8% used? Actually "timeProgress":0.548 might mean 54.8% elapsed). I should keep going efficiently. Next: validate JS syntax via node --check by extracting the module script.

Syntax is valid. Now let me do a few sanity checks on logic issues:

1. spawnTrailSpark uses _tmpColor — declared after the function but called at runtime. Fine.

2. In spawn, opts.colorJitter — trail sparks pass colorJitter: 0, so j = 1. Good.

3. _tmpColor.setRGB(pCol[i3]*0.8, ...) — values ≤ 0.8, fine.

4. Check that qualityMul is used before assignment? let qualityMul = 1; declared at director section; applyTier() sets it. explode uses it. Fine.

5. shellsFired declared with let shellsFired = 0; in director section — but explode() increments it; explode is defined before the declaration... explode is only called at runtime after module evaluation, so shellsFired (let, TDZ) is initialized by then. Fine.

6. audio object referenced in doParticleEvent and launchRocket — declared before use at runtime. Fine.

7. spawnBudget — declared let spawnBudget = 18000 right after pool arrays. applyTier sets it. Fine.

8. screenToSky — raycaster plane intersect. OK.

9. barges — makeBarge pushes to barges; launchRocket iterates barges. OK.

10. city.userData.beacons — set in makeCity via group.userData.beacons = beacons. OK.

11. In animate, moon.lookAt(camera.position) — moon is a plane; lookAt orients +z toward camera; plane faces +z by default. Good.

12. The Reflector — plane 2400x2400 centered at origin rotated flat. City at z=-185..-260, ridge at -330, all within 1200 half-width. Camera maxDistance 520 — reflector plane extends ±1200, fine.

13. Points pool at scene root, frustumCulled false. Good.

14. renderer.domElement.height in onResize — drawing buffer height (includes pixel ratio). Good.

15. Snapshot: toBlob called in same frame after composer.render(). Good.

16. finaleBanner — element exists. startFinale uses setTimeout to remove class. OK.

17. Keydown space preventDefault to avoid page scroll. OK.

18. toggleHelp — help overlay display. OK.

19. selShell options match SHELL_KEYS values. OK.

20. Potential issue: controls.autoRotate = true initially and intro dolly also moves camera — both run; OrbitControls update may fight the intro lerp slightly, but intro finishes in 5s and any pointerdown ends it. Acceptable.

21. qualityUpdate uses fpsAvg exponential — fine.

22. One issue: in updateParticles, when a particle is killed via killParticle(i); continue; — we don't increment i, correct since swapped-in particle needs processing.

23. In doParticleEvent for crossette, children spawn with trail: true — nice.

24. pEvtT[i] += rand(...) for crackle re-arm — but the condition (pTtl[i] - pLife[i]) >= pEvtT[i] — age keeps growing so re-armed evtT larger. Works.

25. audio.boom(clamp(150/dCam,0.2,1), dCam/340) — dCam ~200-400 → delay 0.6-1.2s. That's realistic but might feel disconnected... Real fireworks do have that delay! It's a feature ("distance-delayed thumps"). Keep.

26. launchPop and whistle called at launch — immediate since barge is closer. Fine.

27. Check the gradePass — ShaderPass with a plain object containing uniforms + shaders. ShaderPass accepts a shader object with uniforms, vertexShader, fragmentShader. It clones uniforms via UniformsUtils.clone. tDiffuse: {value:null} gets replaced by ShaderPass with the read buffer. Good.

28. OutputPass before gradePass — gradePass renders to screen (last pass, renderToScreen automatic in composer for last pass). Good.

29. Bloom threshold 0.52 — city emissive windows (~0.85 intensity, below threshold after tonemap? bloom pass operates pre-tonemap on linear HDR; emissive 0.85 * window color ~ up to 0.85 luminance > 0.52 → windows bloom slightly. Nice.

30. Points colors multiplied 2.3 in shader → HDR > 1 → strong bloom. Good.

31. spawn flash particle size 30 → huge bright blob for 0.26s. Good.

32. Reflector color 0x4d5866 — mid-dark; reflections visible but moody.

One more check — THREE.MathUtils.degToRad exists. Yes.

matchMedia('(pointer: coarse)') at module top-level — fine in browsers.

Edge: renderer.domElement.addEventListener('pointerdown', ..., {once:true}) added twice (one in input section without once, one with once for intro). Both fire; fine.

audio.resume() on pointerdown initializes AudioContext — good gesture handling.

Also window 'keydown' calls audio.resume() — good.

Potential visual issue: pool points render with depthTest default true — reflector is opaque and writes depth; fireworks above water render fine; their reflections are part of reflector texture. Stars behind bursts occluded properly.

One thing: the reflector plane will also reflect the shimmer plane? Shimmer is above reflector (y=0.12), transparent — reflector's virtual camera renders scene including shimmer... shimmer is a plane at y=0.12; from below (virtual camera), it may be visible edge-on... it's horizontal, visible from above and below (side default FrontSide — rotated -PI/2 so front faces up; from below it's backface-culled). Fine.

Also reflector reflects pool points — Points frustumCulled false, rendered in reflection too.

Also: sky sphere radius 1600, camera far 5000 — fine. Reflector's virtual camera uses same far. fine.

Now index.html update. Insert card after <!-- New demos are added here -->.

Description for the card (concise but rich, matching style):

"A lakeside fireworks theatre — click the sky to conduct the show: nine procedural shell types (peony, chrysanthemum, willow, ring, Saturn, crossette, strobe, palm & crackle) soar from bobbing barges and bloom into up to 26k additive GPU sparks with ember trails, mid-air splits and strobe flicker, all mirrored in a real-time planar-reflection bay with drifting glints. A procedural skyline (three lit-window variants, blinking aviation beacons), a mountain ridge, fbm milky way, HDR shader moon and twinkling stars set the stage, while pooled point lights wash the city in each burst's colour. Generative WebAudio delivers distance-delayed booms, crackle pops, rising launch whistles and lapping-water ambience; the auto-show director builds to periodic finales with a tempo slider. Featuring UnrealBloom, vignette/grain/chromatic grade, adaptive quality tiers, PNG snapshots, keyboard shortcuts and full touch support."

Insert it. Then verify with grep. Also quickly sanity check the demo HTML for the word "placeholder" remnants — fixed. Let me also run a quick grep for common mistakes like "undefined" ids: check that all getElementById ids exist in the HTML: hud, stats, stFps, stParts, stShells, stQual, controls, btnLaunch, btnFinale, selShell, btnAuto, rngTempo, btnMute, btnSnap, btnHelp, hint, finale, help, btnCloseHelp, flash, app. All present per the HTML I wrote. Let me verify programmatically.

**********************************************************************************************************nt.

The exact text is:

with 8 spaces of indentation. My earlier search included the <div class="demo-list"> line with 6 spaces — the actual file has 6 spaces before <div (" <div class="demo-list">")? Looking at cat -A: <div class="demo-list">$ — 6 spaces. And comment has 8 spaces. That matches what I searched... Hmm, my search was:

That looks identical. Why did it fail? Maybe line endings? cat -A shows $ at end, no ^M, so no CRLF. Wait — maybe the replace tool failed because of a trailing space? Let me just anchor on the comment line alone.

************************************************************************************************************************************************00.

The bytes are plain spaces and \n. Line 99: 8 spaces + <!-- New demos are added here -->\n. Line 100: 14 spaces + <a class="demo-card" href="./028-teslasphere/index.html">\n.

My search string used 14 spaces before <a — let me count what I typed: <a class="demo-card" — I typed 14 spaces. And comment line 8 spaces. That matches... but the tool reported not found twice.

Hmm, maybe the replace tool has an issue with multi-line search or with the file being on s3fs (slow storage)? Or perhaps the tool reads a cached/stale copy? The first attempt failed too.

Alternative: use a different approach — use sed/awk via shell to insert, or use the read_write tool with line ranges. Line-range writes are discouraged, but I can do a full-file rewrite via shell: use awk to insert after line 99.

Actually simplest reliable: use python or awk in shell to insert the new card after the comment line. Let me do that with a heredoc.

I'll write the card HTML to a temp file, then use awk: print lines; after line matching "New demos are added here", print the card.

Let me be careful with quoting — use a file for the card content.

The new index has 34 demo-card references (29 demo cards + the blueprint badge uses class "blueprint-badge", and grep counts 'demo-card' occurrences — each card has 1 occurrence in class attribute plus card CSS definitions... wait, grep -c counts LINES containing 'demo-card', not occurrences. There are 29 cards + CSS lines (.demo-card definitions). Previously there were 28 cards. The count went from 33 to 34 lines → one card added. Line 100 has the 029 link, right after line 99 comment.

Now verify the new file is intact: check line count vs original + 6 lines, and validate the structure around insertion, then move it into place.

Wait — there's an issue. The original file was 259 lines and I read it earlier with totalLines 260. The awk inserted 6 lines? The card is 6 lines (a, span, h2, p, /a = 5 lines + trailing newline... the card variable adds 5 lines). 259 + 5 = 264. Good. Earlier read said totalLines 260 (probably counts final newline differently). Fine.

The insertion is in place. The 029 card at line 100, 028 at 105. Footer intact.

Now final verification of the demo: let me do a broader sanity review of the demo file for any runtime gotchas I may have missed. Key risky points:

1. reflector.getRenderTarget() — verify exists. If not, guarded with &&. Actually rt.setSize — WebGLRenderTarget.setSize exists. OK.

2. In applyTier, I call onResize() — onResize references poolUniforms and stars — declared before applyTier is called (applyTier called near bottom). OK.

3. matchMedia at top-level — before DOM? Script is at end of body, DOM ready. OK.

4. One concern: spawn() color jitter uses _c.set(colorHex) where colorHex can be a number from _tmpColor.getHex(). THREE.Color.set accepts number. OK.

5. explode() uses _v.set(x,y,z) then passes _v to sphereDir(_v) which overwrites — distance computed before, stored in dCam. OK.

6. Rockets: initial vy computed so it reaches target — with gravity 6 applied in update. vy = (ty-sy)/fuse + 0.5*g*fuse — with g=6. y(t) = sy + vyt - 3t². At t=fuse: sy + vyfuse - 3 fuse². Substituting: sy + (ty-sy) + 0.56fuse² - 3fuse² = ty + 0. OK correct — explodes exactly at target height.

7. The trail spark spawn in updateRockets: vy negative small (-6..-2). Fine.

8. Audio boom uses exponentialRampToValueAtTime(0.0001...) — cannot ramp to 0. OK.

9. audio.setMuted — master gain. OK.

10. screenToSky when user clicks with camera looking down at water — d.z might be ≥ -0.05 if camera is far... camera always at z ≥ ~? Orbit allows any azimuth! User can orbit around to the other side (z negative side) or look horizontally. If d.z >= -0.05 (clicking toward +z or nearly horizontal), t=200 fallback. Then point = o + d*200 might be at z far positive. Clamp z to [-160,-20] → becomes a launch near shore. Acceptable fallback. Good enough.

11. Sky sphere BackSide — camera inside (radius 1600 vs camera ≤520). OK.

12. controls.maxPolarAngle = 1.48 rad ≈ 84.8° — stays above water. minPolarAngle default 0. Good.

13. Grade pass: fract(uTime) used for grain seed — uTime grows to large; fract ok.

14. The finale banner — CSS #finale.show transitions. OK.

15. Check pFade[i] = f etc — attribute updates. OK.

16. Big point sizes: flash size 30 world at distance 200 → 30scale/200; scale for dbh=2000 fov55 → 2000/(20.5206)=1921 → 288px → clamped 260. Fine. gl_PointSize large values can be slow but only 1 flash per burst, brief.

17. Possible WebGL warning: Points with size 260px fine.

18. renderer.setPixelRatio then composer.setPixelRatio — EffectComposer's setSize multiplies by its own pixelRatio; I call composer.setSize in onResize after setPixelRatio. OK.

19. applyTier called at bottom — before that, new EffectComposer(renderer) created with default pixelRatio = renderer.getPixelRatio() (1). Then applyTier sets both. fine.

20. One thing: initial renderer.setPixelRatio not called before appending — base pr=1 until applyTier. fine.

21. introFrom/introTo — defined after camera setup; camera starts at introFrom. good.

22. Barges bob: position.y initially 0; group position set. In animate I set b.position.y = sin(...) — overrides the makeBarge y (0). fine.

23. bc.userData.phase — sprites pushed with userData.phase via sp.userData.phase = i * 1.37? In makeCity I set sp.userData.phase = i * 1.37 — but userData already assigned { lamp, phase: rand(TAU) } for barges; for beacons: sp.userData.phase = ... — userData initially {} on Sprite? Object3D.userData = {} by default. Assigning property fine.

24. City beacons array — group.userData.beacons = beacons. In animate city.userData.beacons. OK.

25. Reflector rotation — set rotation.x = -PI/2. Reflector handles its own matrix. OK.

26. sphereDir(v) in makeStars: v.y = Math.abs(v.y)*0.95+0.05 — then normalize*1450. Good.

27. stars.material.uniforms.uScale — accessed in onResize; stars is THREE.Points, material is the ShaderMaterial. OK.

28. Points material poolMat — no vertexColors needed since custom attribute aColor. OK.

29. killParticle: when i!==j copies everything. pEvtN copied. good.

30. updateParticles boundary kill: if (pPos[i3+1] < 0.3) — kills and continue. But rocket trail sparks fall below water quickly; that's intended fizzle.

31. Potential perf: needsUpdate full attribute upload of 26k particles * (3+3+1+1 floats) ≈ 800KB/frame — hmm, 26k8 floats4B = 832KB per frame upload. That's a lot but GPUs handle it; many demos do this. Modern browsers OK. Could use updateRange but skip.

32. Three r170 deprecation: renderer.useLegacyLights default false — intensity 26000 with distance 420 decay 2 — at distance 100 → 26000/10000 ≈ 2.6 brightness. good.

33. THREE.Points in reflector — rendered twice per frame (reflection + main). OK.

34. Check: bloomPass with threshold 0.52 — city emissive intensity 0.85; window colors up to 1.0 * 0.85 → luminance ~0.8 → slight bloom on windows. Intended.

35. composer.render() — fine.

Also confirm there are no leftover issues in the PALETTES region — fixed and node --check passed.

One more thing: #hint is a .panel with pointer-events: none — CSS for #hint sets pointer-events none. It's inside the flow fine.

Also #finale element styling — it's a div without .panel class; CSS has #finale styling. OK.

Mobile: #stats hidden. Controls wrap. OK.

Also the audio ambience: startAmbience called in init() → after first gesture. good.

Everything looks solid. Let me also do a final grep to ensure no "placeholder" or TODO text remains, and verify the demos index page displays all 29 cards (grep count of href links to demos).

80% time used. Task is essentially complete:

• Created /space/demos/029-pyrosymphony/index.html — a full advanced demo, JS validated.
• Updated /space/demos/index.html — all 29 cards listed, JS syntax OK.

Everything verified. I should exit with _success now to avoid running out of time.