Build Demo 064 Skyward

***************************************************************************************************************************************************es.

Let me check the current state of the demos folder.

The demos folder has demos 001-063. Now I need to create Demo 064. Let me think about what to create.

Previous demos include:

• 001: spinning cube
• 002: nebula galaxy
• 003: mandelbulb explorer
• 004: fluid dynamics
• 005: gravity sandbox
• 006: event horizon
• 007: sonic reactor
• 008: void runner
• 009: azure odyssey
• 010: abyssal bloom
• 011: physarum garden
• 012: powder alchemy
• 013: clockwork nebula
• 014: neon rain
• 015: aurora borealis
• 016: skitter
• 017: coral resonance
• 018: threshold
• 019: attractorium
• 020: murmuration
• 021: terraforge
• 022: cloudsea
• 023: frostline
• 024: koi pond
• 025: ferrofluid
• 026: synchrony
• 027: cymatics
• 028: teslasphere
• 029: pyrosymphony
• 030: morphogenesis
• 031: galton cascade
• 032: wavefront
• 033: gossamer
• 034: magnetosphere
• 035: cloud chamber
• 036: wavefunction
• 037: epicycle
• 038: sandpile
• 039: kinetic theory
• 040: lumen lab
• 041: squish lab
• 042: neon tilt
• 043: hyperfold
• 044: photon garden
• 045: critical point
• 046: bridge works
• 047: primordial
• 048: coasterworks
• 049: sakura grove
• 050: voxelia
• 051: neon district
• 052: supercell
• 053: caldera
• 054: domino rally
• 055: phantom jam
• 056: wavewalker
• 057: basin
• 058: microcosm
• 059: zoetrope
• 060: spume
• 061: klangwerk
• 062: echodeep
• 063: cinderforge

Now I need something fresh for Demo 064. Let me think of interesting concepts not yet covered:

• Cloth simulation? (gossamer might cover it)
• Ocean/water? (cloudsea, spume, wavewalker, basin might cover water)
• Fireworks? (pyrosymphony might be fire-related)
• Rube Goldberg? (domino rally, coasterworks)
• Music-related (phantom jam, klangwerk, sonic reactor)
• A marble run / ball machine?
• A "dream aquarium" / fish tank ecosystem?
• Origami?
• Glass caustics?
• Kaleidoscope?
• City traffic simulation?
• Ant colony?
• Boids done (murmuration)
• Reaction-diffusion done (morphogenesis?)
• L-systems / procedural plants?
• Solar system / orbital mechanics (gravity sandbox covers)
• Wormhole / space tunnel
• Lightning storm (supercell?)
• Bioluminescent deep sea (echodeep)
• Ice / crystals (frostline)
• Wind chimes?
• Pendulum waves? (synchrony might be this)
• Spider web?
• Firefly swarm?
• Paper planes?
• Hot air balloons?
• Submarine?
• Train set?
• Marble / ball physics labyrinth?
• Pinball?
• Slot machine / one-armed bandit?
• Clock / orrery (epicycle covers)
• Music box?
• Terrain erosion?
• Volumetric clouds (cloudsea)
• Ray-marched fractals (mandelbulb)
• DNA helix?
• Neural network visualization?
• Circuit board?
• Ant farm / termites?
• Fireworks display — actually let me check if pyrosymphony covers it. It's likely fire symphony.

Let me think of a really "wow" concept. How about a Grand Fireworks Festival over a night lake/harbor with:

• Launch trails, burst particles with physics/gravity/drag
• Multiple shell types: peony, willow (long trails), chrysanthemum, ring, crossette, strobe, pistil, kamuro (hair-like trails), heart/star shapes
• Water reflections (planar reflection)
• Synthesized launch whistle + boom + crackle via WebAudio
• Bloom post-processing
• Auto-choreographed show with beat patterns
• Interactive: click to launch custom fireworks, choose shell types

That's a classic crowd-pleaser and distinct from pyrosymphony (which I believe was a fire/flame sim). Let me quickly check what pyrosymphony was.

Actually, let me check a few existing demos' descriptions in the index to avoid overlap.

Let me check the pyrosymphony demo to see what it covers (to avoid overlapping with a fireworks demo).

Fireworks is covered by demo 029 (PyroSymphony). Let me review what other themes exist so I don't overlap:

1. spinning cube
2. nebula galaxy — particle galaxy
3. mandelbulb explorer — raymarched fractal
4. fluid dynamics
5. gravity sandbox
6. event horizon — black hole
7. sonic reactor — audio
8. void runner — game
9. azure odyssey — flight?
10. abyssal bloom — deep sea
11. physarum garden — slime mold
12. powder alchemy — falling sand
13. clockwork nebula
14. neon rain — cyberpunk city
15. aurora borealis
16. skitter — spiders?
17. coral resonance
18. threshold
19. attractorium — strange attractors
20. murmuration — boids
21. terraforge — terrain
22. cloudsea — clouds
23. frostline — winter/ice
24. koi pond
25. ferrofluid
26. synchrony — pendulums/metronomes?
27. cymatics
28. teslasphere
29. pyrosymphony — fireworks
30. morphogenesis — reaction diffusion
31. galton cascade — galton board
32. wavefront
33. gossamer — spider web? cloth?
34. magnetosphere
35. cloud chamber — particle physics
36. wavefunction — quantum
37. epicycle — orrery
38. sandpile — abelian sandpile
39. kinetic theory — gas
40. lumen lab — optics?
41. squish lab — soft body
42. neon tilt — tilt game?
43. hyperfold — 4D?
44. photon garden
45. critical point — percolation/phase transition?
46. bridge works — bridge building
47. primordial
48. coasterworks — roller coaster
49. sakura grove
50. voxelia — voxels
51. neon district
52. supercell — tornado
53. caldera — volcano
54. domino rally
55. phantom jam — music
56. wavewalker
57. basin
58. microcosm
59. zoetrope
60. spume — bubbles
61. klangwerk — ball music machine
62. echodeep — sonar cavern
63. cinderforge — steam hammer forge

Fresh ideas for 064:

1. Marble run / marble machine — klangwerk was a ball music machine, so somewhat close.
2. Pinball — a full 3D pinball table with flippers! That would be a great game demo.
3. Zen garden / raked sand — draw patterns in sand with a rake.
4. Paper flight / paper planes — glide a paper plane through rings.
5. Bioluminescent fireflies / lantern festival — floating lanterns festival (like the Lantern Festival in Thailand).
6. Ice skating / frozen lake — carve trails.
7. Submarine / deep sea — echodeep covers cavern sonar.
8. Traffic simulation / miniature city — neon district covers city.
9. Ant colony simulation — could be cool but 011 physarum is close.
10. Spider / insect — skitter covers.
11. Clock / watch mechanism — clockwork nebula is close.
12. Cathedral of light / stained glass caustics — lumen lab is optics.
13. Hot air balloon festival — floating lanterns, wind currents.
14. Whale / ocean migration.
15. Pachinko — Japanese pachinko machine! Balls cascade through pegs... but galton cascade covers a galton board (similar concept).
16. Pinball — I'm fairly confident pinball is NOT covered. 031 galton cascade is a galton board (passive). 042 neon tilt — hmm, "neon tilt" might be a marble tilt game? Let me check.

Let me check neon tilt and squish lab, lumen lab descriptions to see.

Pinball is covered by 042 Neon Tilt. Let me survey more to find what's NOT covered. Let me list all titles briefly:

1. Spinning cube
2. Nebula galaxy
3. Mandelbulb explorer
4. Fluid dynamics
5. Gravity sandbox
6. Event horizon
7. Sonic reactor
8. Void runner
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
29. PyroSymphony (fireworks)
30. Morphogenesis
31. Galton Cascade
32. Wavefront
33. Gossamer
34. Magnetosphere
35. Cloud chamber
36. Wavefunction
37. Epicycle
38. Sandpile
39. Kinetic theory
40. Lumen lab
41. Squish lab
42. Neon tilt (pinball)
43. Hyperfold
44. Photon garden
45. Critical point
46. Bridge works
47. Primordial (Lenia)
48. Coasterworks
49. Sakura grove
50. Voxelia
51. Neon district
52. Supercell
53. Caldera
54. Domino rally
55. Phantom jam
56. Wavewalker
57. Basin
58. Microcosm (particle life)
59. Zoetrope
60. Spume (bubbles)
61. Klangwerk (ball music machine)
62. Echodeep (sonar cavern)
63. Cinderforge (steam hammer)

What would be fresh for 064? Ideas:

1. Rube Goldberg machine — close to domino/klangwerk.
2. Zen garden / sand raking — a meditative rake-sand experience with 3D ripples? Interesting but maybe underwhelming visually.
3. Kite flying / paper planes — gliding.
4. Firefly lantern festival — floating lanterns (Sakura grove has lanterns).
5. Slot canyon / antelope canyon flythrough — procedural canyon with light shafts.
6. Origami birds — procedural folding paper animation.
7. Submarine / bathysphere — echodeep covers.
8. Train / railroad sim — build tracks, trains run — fun! Like model railroad. Not covered.
9. Aquarium / fishtank — koi pond covers fish.
10. Ant farm — physarum close.
11. Satellite / space station orbit — gravity sandbox covers.
12. Weather satellite / earth from space — magnetosphere covers earth.
13. Rollerball / Marble Madness — ball rolling course.
14. Mini-golf — fun game! Not covered.
15. Billiards / pool — not covered! A 3D pool/snooker table with accurate physics would be great.
16. Bowling — not covered.
17. Darts / archery — not covered.
18. Golf — not covered.
19. Slot machine / casino — eh.
20. Fishing — relaxing fishing game.
21. Pachinko — galton cascade close.
22. Music box / automaton theater — clockwork.
23. Balloon pop carnival — meh.
24. Skee-ball — meh.
25. Astrophotography / telescope — meh.
26. Card tricks / solitaire 3D — meh.
27. Chess with animated pieces — could be cool but heavy.
28. Rubik's cube solver — nice! Interactive twisty puzzle with solving animation. Not covered.
29. Tower of Hanoi — meh.
30. Kaleidoscope — visual but simple.
31. Light cycles / Tron game — neon covered heavily.
32. Asteroids / space shooter — void runner covers flying.
33. Tower defense — heavy.
34. Snake 3D — game, could be cool.
35. Tetris 3D — hmm.
36. Drone racing — void runner.
37. Sailboat / sailing sim with wind — ocean covered?
38. Kite festival — hmm.
39. Hot air balloons over valley at dawn — pretty, drifting balloons with burners; wind currents; could add interactive burner control and landing targets. Not covered!
40. Model railway / train set — build loop tracks, steam train with smoke, switches, signals, day/night, camera ride. Cute but lots of work.
41. Fireworks — covered.
42. Planetarium / constellation viewer — epicycle covers orbits.
43. Tide pool / ocean waves — spume/wavefront covers.
44. Volcano — caldera covered.
45. Geode / crystal growing — frostline? crystal covered?
46. Clock escapement mechanism — clockwork nebula.
47. Typewriter / printing press — meh.
48. Lighthouse in a storm — pretty scene: rotating beam, waves crashing, rain. Supercell has storm though; still a lighthouse is a distinct scene. Could be gorgeous: beam volumetric, foam waves, gulls.
49. Windmill valley / dutch — meh.
50. Bee hive / honeycomb — bees swarm building comb; could be cute but similar to skitter/murmuration.
51. Hummingbird / flower — meh.
52. Cat's cradle / string figures — meh.
53. Orrery music box — epicycle.
54. Subterranean mine cart ride — coasterworks covers coaster.
55. Space elevator — meh.
56. Wheat field / wind — sakura covers nature sway.
57. Desert caravan / dunes at night — threshold has dune world.
58. Ice cave / glacier — frostline.
59. Zen rock garden with rippling koi — koi pond.
60. Storm glass / barometer — meh.
61. Ferrofluid — covered.
62. Newton's cradle — synchrony probably covers pendulums.
63. Hourglass / sand timer — sandpile/powder alchemy covers sand.
64. Snow globe — winter diorama you can shake! Cute: a snow globe with a tiny village, shake to stir snow, physics snowflakes settle. Distinct from frostline? Frostline is likely a frozen landscape. A snow globe is charming but maybe too simple.
65. Miniature golf / crazy golf — build a course, putt the ball: game with obstacles (windmills, loops, ramps). Fun and distinct.
66. Bumper cars — meh.
67. Ferris wheel / amusement park at night — coasterworks is a coaster builder; an amusement park scene could overlap.
68. Carousel / merry-go-round — zoetrope has carousel.
69. Escapement / metronome — synchrony.
70. Planet flythrough / exoplanet — space covered.
71. DNA / molecular viewer — microcosm covers particles.
72. Circuit board city — neon district.
73. Ant colony / leafcutter — physarum.
74. Termite cathedral — physarum-ish.
75. Turing machine / mechanical computer — meh.
76. Kaliedoscopic mandala — simple.
77. Fire tornado — caldera/supercell.
78. Rune stones / magic circle — cinderforge has runes.
79. Alchemist's lab / potion brewing — fun: glassware, bubbling liquids, color mixing; could be great with refraction shaders. Lumen lab has optics though. A potion-brewing scene with bubbling flasks, color mixing, steam — atmospheric but similar vibes to existing.
80. Star chart / astrolabe — epicycle.
81. Paper boat race / rain gutter — spume.
82. Flocking sheep / sheepdog game — herd sheep with a dog! Murmuration is boids though; but sheep herding is a game with a purpose. Hmm, could be charming: "Sheepdog — herd the flock into the pen." Uses boids-like flocking. Might feel derivative of murmuration.
83. Crane game / claw machine — fun physics game! A 3D claw machine: move claw, drop, grab plush toys with soft grabbing physics. Distinct and fun!
84. Vending machine — meh.
85. Whack-a-mole — meh.
86. Basketball / hoops — meh.
87. Miniature train — model railroad is genuinely charming and not covered. "Tiny Rails" - build track loops, steam locomotives with smoke particles, tunnels, bridges, day/night cycle, ride in the cab. But track-building UI is complex. Could do a fixed scenic loop with interactive switches and multiple trains, signals, crossings.
88. Subway/metro map — meh.
89. Sky lantern festival — hundreds of glowing paper lanterns rising at night over a river, you can release your own with wishes, they drift with wind, flicker and fade. Sakura grove has some lanterns but a full lantern festival is different — like PyroSymphony's warmth but with slow, serene lanterns. Could be gorgeous: water reflections, crowd silhouettes, ambient music. Distinct enough from pyrosymphony (explosions vs. serene drifting lights).
90. Fireflies garden — sakura has fireflies.
91. Rowing / regatta — meh.
92. Archery range — shoot arrows at targets with physics; could be fun but sparse.
93. Catapult / trebuchet siege — a physics trebuchet game: knock down a castle! Destruction physics. That's fun — "Siege" — adjust counterweight, release, smash procedurally built towers with verlet/rigid blocks. Not covered!
94. Angry-birds-like — same idea as trebuchet.
95. Wrecking ball demolition — swing a crane wrecking ball into a building, collapse it with rigid-body physics. Satisfying destruction!
96. Domino — covered.
97. Marble labyrinth tilt — neon tilt is pinball; a wooden labyrinth with ball could be close-ish.
98. Bocce / boules — meh.
99. Croquet — meh.
100. Pool/billiards — a proper 3D 8-ball pool with accurate physics (cushion bounces, spin/english, aiming aid), nice materials. That's a solid game demo. Physics: ball-ball elastic collision, cushions, pockets detection. Doable and impressive with good rendering.

Let me weigh the top candidates:

A) Trebucket — Siege of the Clockwork Keep: physics destruction game. Rigid body stacking of blocks, trebuchet launch, collapse detection. Custom physics engine for boxes is hard (contacts, stacking stability). I could use simple custom box physics with sleeping... risky but doable. Actually, a simpler approach: blocks are kinematic until hit; then they get impulse and use simple Euler integration with ground/floor collision and basic box-box collision approximated by spheres? Might look janky. Could use cannon-es from CDN? The guidelines say Three.js from CDN; using another CDN lib (cannon-es) should be acceptable? "self-contained single-page HTML files using Three.js from a CDN" — demos usually avoid other deps, but it's not forbidden. Still, import map with cannon-es from unpkg works. Hmm, but keeping zero-dependency is more robust.

B) Sky Lantern Festival (Yee Peng) — serene, gorgeous, performant, distinct. GPU particles for lanterns (instanced meshes with flicker), river reflections, distant mountains, stars, crowd silhouettes, release-your-own interaction, generative guzheng/pentatonic music, wind drift, bloom. Wow factor high, implementation risk low-moderate. Sakura grove has "paper lanterns flicker on" but they're static decorations; a full festival of thousands of rising lanterns is a different beast.

C) Claw machine — fun but physics of grabbing is fiddly.

D) Pool/billiards — classic, physics well-understood. Visual wow moderate.

E) Model railway — charming; fixed scenic loop reduces complexity. Steam smoke, trestle bridge, tunnel, day/night, signals, switchable junctions, ride-along cam. Medium complexity, high charm. Distinct from coasterworks? Coasterworks is a roller-coaster builder with physics; a scenic model railroad is different but thematically adjacent (trains on tracks).

F) Lighthouse storm — gorgeous scene: volumetric rotating beam, big ocean waves with foam, rain, lightning, gulls, keeper's house. Some overlap with supercell (storm) and spume (sea foam) but as a serene/cinematic scene it's distinct.

G) Trebuchet siege with custom simple physics.

I think Sky Lantern Festival would be a beautiful, wow-factor demo with lots of distinctive tech: thousands of instanced lanterns with flame flicker, buoyant rise physics, wind field, river with planar reflection, fireworks-free (to differ from pyrosymphony), generative traditional-sounding music (pentatonic plucks, guzheng-like), interactive lantern release with "wish" text, camera drift, bloom. It's serene and contrasts nicely with the previous demo (cinderforge, industrial).

Actually wait — let me reconsider one more: Rubik's cube — interactive twisty puzzle with smooth animations, scramble/solve (Kociemba is heavy to implement; could do reverse-scramble solve or a simple layer-by-layer... reverse scramble is fine), nice glossy materials. But is it "wow" enough? Could add bloom, exploded view, timer, move counter. It's more of a puzzle than a visual spectacle.

Fishing game — "Stardew-fishing" like? Cast, wait, reel. Meh.

Bee garden — pollination sim? eh.

Snow globe — shake interaction, tiny village, snowfall settling, refraction glass. Cute and festive (it's November... approaching winter). A snow globe with: glass refraction sphere, shake physics for ~2000 snowflakes with turbulence, miniature village with lit windows, a little train circling, warm light, wooden base, music box melody (generative, "Silent Night"? better a generic music-box waltz). That's charming and distinct. Medium wow.

Hmm. Comparing "Sky Lantern Festival" vs "Snow Globe" — both serene. The lantern festival is more spectacular (thousands of glowing lanterns rising into a night sky = instant wow). Let me go with the lantern festival.

Actually, let me also consider "Origami — Paper Crane Dreams": a thousand origami cranes flying. Sakura/murmuration adjacent.

Decision: Demo 064 — "Skyward — Lantern Festival of Ten Thousand Lights" (天燈 sky lanterns). Features:

Scene:

• Night riverside valley: calm river with planar reflections, terraced banks, distant pagoda/temple silhouette with lit windows, arched bridge, distant mountains, star field + milky way, low moon.
• Crowd silhouettes on the banks/boats (simple dark billboards or low-poly figures) — optional, maybe skip crowd, keep boats with lanterns.
• Floating water lanterns (lotus-shaped) drifting on the river — instanced, bobbing, with candle glow, leaving glints on water.

Lanterns (core):

• Thousands of sky lanterns rising: instanced mesh (custom geometry: rounded paper shell + rim + flame). Per-instance attributes: position seed, rise speed, sway phase, hue, scale, flicker.
• Physics: buoyant rise with drag, wind field (curl-ish noise drift), gentle turbulence, occasional gusts. Lanterns fade/shrink at altitude and respawn (or one-shot for user-released).
• Flame: point-sprite glow inside each lantern (can be part of instanced rendering via shader: additive glow at lantern base), flicker driven by noise per-instance.
• Lighting: warm point-light pool moving? Too many lights; instead fake: emissive paper translucency shader (backlit paper: brighter when viewed with flame behind), bloom does the rest.
• Ground lighting wash: a few pooled lights or a big dim warm hemisphere.

Interaction:

• Click/tap riverbank (or a button) to release your own lantern: it starts in your hands (bottom of screen), ignites with a whoosh, fills, then rises; you can "hold to fill" for a bigger initial glow.
• Wish prompt? Maybe simple: type optional wish shown as a tiny floating tag? Text in 3D is heavy; skip text, but show HUD "wishes released: N".
• Drag to orbit; scroll to zoom; auto cinematic drift mode.
• Wind control slider, release rate slider for the festival auto-show, tempo of music.
• Keyboard: space release lantern, W wind gust, etc.

Audio (generative WebAudio):

• Gentle river lap + night crickets (filtered noise chirps).
• Pentatonic plucks (guzheng-ish: Karplus-Strong or triangle with fast decay + detune), slow sparse melody; soft bamboo flute pad (sine + breath noise vibrato) — maybe simpler: warm pad chords.
• Lantern ignition whoosh when you release (filtered noise sweep), soft chime on release milestones.
• Distant festival drums occasionally? Maybe subtle taiko-like booms at low volume — could be nice during "finale" moments.

Post:

• UnrealBloom, vignette/grain/chromatic grade (consistent with series style).
• Adaptive quality tiers.

Tech details for instanced lanterns:

• Geometry: custom BufferGeometry — a low-poly lantern shell: cylinder-ish body with rounded top (lathe geometry!), plus a bottom ring. LatheGeometry is perfect.
• InstancedBufferAttribute: aOffset(vec3) is overkill if we compute positions on GPU from seeds and time — better: fully GPU-driven positions from per-instance seeds + uniforms (time, wind). Positions = f(seed, time): rise = mod(time*speed + phase, maxHeight), sway = sin/cos curves, horizontal drift integrated via noise of time — since pure functions of time are periodic, use pseudo-noise sums of sines. This gives thousands of lanterns at zero CPU cost, deterministic.
• Respawn: when rise completes, wrap to bottom with new pseudo-random lateral offset derived from instance id and cycle count (cycle = floor(...)). Use hash(id, cycle) for variation per cycle.
• User-released lanterns: separate small pool (e.g., 64 instanced slots) updated on CPU with real dynamics (ignite delay, fill, rise acceleration), so they feel special; each has a slightly larger scale and a brighter flame; they join the sky and fade.
• Water lanterns: another instanced set drifting downstream with bobbing; reflections come free via planar reflection.

Planar reflection: implement like previous demos presumably did (mirror camera render to texture). To keep perf, render reflection at half res with simplified layers (lanterns, moon, temple lights, water lanterns). Use a custom water shader: reflected texture + ripple normal distortion + fresnel + glints.

Temple/pagoda: procedural low-poly pagoda with tiered roofs (stacked boxes/cones with curved-ish roof profiles via custom geometry or scaled boxes), emissive window quads (instanced planes with warm color), a string of small lantern lights along the bridge (instanced spheres with flicker).

Bridge: arched bridge — procedural curve, made of boxes following an arc, with posts; lanterns strung along it.

Mountains: layered ridge silhouettes (value noise), fog gradient.

Sky: big dome with stars (points), milky way band (fbm in shader or texture), moon (sprite with glow), horizon haze.

Crowd: skip or simple: a few dark figures on the bridge/banks as silhouettes? Could add simple "paper boats"? Keep scope controlled: boats — a couple of sampan boats with a lantern pole, drifting slowly. Nice touch, low cost (few meshes).

HUD: title, stats (lanterns aloft, wishes released, wind, fps), controls help, buttons: Release Lantern (hold), Auto-show toggle, Wind slider, Quality, Sound, Snapshot.

Music director: slow pentatonic generative melody with occasional harmonic shifts; tempo slider maybe unnecessary; keep a "calm ↔ festive" intensity slider that adds drum + denser plucks.

Okay, that's the plan. Name: "Skyward — Ten Thousand Lanterns"? Or "Lanternfall"? "Skyward — The Lantern Festival". Let me go with folder 064-skyward and title "Skyward — Festival of Ten Thousand Lanterns".

Hmm, wait. Let me double-check the demo style guidance: "impressive, feature-rich". This qualifies.

Let me now also review how previous demos structured their index entries to match style, and check one demo file for the import map pattern (three version, unpkg vs jsdelivr).

The conventions are clear. Three r160, unpkg import map, dark HUD theme, toast, buttons, hint bar. Now let me check the index.html structure to know how to add a new card (it prepends new demos at top, it seems — 062 at top then 061, 060...). Let me look at the top of index.html.

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

I now understand the structure. New demos are prepended right after <div class="demo-list">.

Now let me build Demo 064: "Skyward — Festival of Ten Thousand Lanterns".

Key architecture plan (single-file, Three r160, unpkg import map):

1. Scene setup

• Night fog (exp2), deep blue/dark palette with warm accents.
• Camera + OrbitControls (damped), cinematic auto-drift mode when idle.

2. Sky dome (custom shader on backside sphere):

• Gradient night sky (deep indigo → horizon ember haze).
• Procedural stars (hash-based twinkle in fragment shader or separate Points). I'll do stars in the dome shader via hash grid, plus a milky way band via fbm. Moon as separate mesh (circle + glow sprite).
• Horizon glow behind temple.

3. Terrain/valley

• River plane: custom water shader with planar reflection (render target + mirror camera). Water shader: reflection texture distorted by animated ripple normals, fresnel mix with deep water color, specular moon glint path, lantern light glints (fake: sum of N nearest bright spots? simpler: use noise-driven sparkle modulated by warm color; plus moon glint).
• Banks: simple terraced geometry — two raised banks on both sides of river with value-noise displacement, dark grass color with warm rim from lanterns; maybe stone steps near release platform.
• Distant mountains: 2–3 ridge silhouette layers (extruded planes with noise top edge or custom BufferGeometry strips), fog-blended.

4. Temple/pagoda

• Procedural multi-tier pagoda on far bank hill: stacked boxes with flared hip roofs (cones with 4 segments, squashed, or custom roof geometry with upturned eaves — I can build a roof from a 4-sided cone with concave profile via LatheGeometry limited segments... simpler: use CylinderGeometry with 4 radial segments, inverted (top narrower), slightly curved profile via custom lathe). I'll make a makeRoof(w,d,h) using BufferGeometry from a curved profile — a 4-cornered curved pyramid with slight upturn at eaves. Could approximate with two stacked squashed cones.
• Emissive windows: instanced planes, warm, slight flicker.
• Stone lantern path: small glowing orbs along a path.

5. Bridge

• Arched wooden bridge crossing the river: deck from boxes along an arc, railings, posts; strings of small red lanterns (instanced) along both railings with sway.

6. Sky lanterns (hero)

• InstancedMesh with custom InstancedBufferAttributes and a custom ShaderMaterial:
  • Geometry: lantern paper shell — LatheGeometry profile (bottom open cylinder → rounded dome top). Plus inner "flame" handled in shader (additive glow near bottom center) — I can include flame as part of the same shader by computing brightness boost near the bottom interior; but flame seen through paper = just emissive gradient (brighter at bottom center, dimmer toward top rim) + a small bright spot at bottom opening (the opening faces down, mostly unseen at distance).
  • Per-instance attributes: aSeed (vec4: rand values), maybe aHue.
  • Uniforms: uTime, uWind (vec2 strength+dir), uRiseH, uBounds.
  • Vertex shader computes position procedurally:
    • cycle = floor((uTime*riseSpeed + seedPhase)/cycleLen) etc. Simpler: each lantern has birth time offset; t = (uTime*speed + phase) mod T; height y = t/T * riseH. cycle = floor(...). Horizontal pos = baseXZ(seed, cycle) + sway(t) + wind drift integrated approx: wind drift must accumulate over t: drift = windVec * t * driftFactor + gustNoise(t)*amp.
    • Scale grows from 0 (ignition) to full in first seconds; brightness ramp.
    • Fade out near top (last 15% of cycle): alpha → 0, slight tilt.
    • Hue variation: mix warm orange → gold → soft red tints.
  • Paper shader: emissive-driven, Lambert-ish fake translucency: brightness = flameIntensity * (falloff by height within lantern) + rim. Flicker = per-instance noise(time).
  • To get nice silhouette, material transparent with depthWrite false, additive-ish but pure additive loses shape; better: NormalBlending with emissive color, and rely on bloom. Use alpha from fresnel-ish? Keep opaque-ish (alpha .95) with NormalBlending and depthWrite true? Overlapping transparent lanterns cause sorting issues. Common trick: treat as opaque emissive (no transparency) except fade in/out handled by scaling to 0 or dithering. I'll use alpha-to-coverage? Simpler: material transparent:true, depthWrite:true, alpha near 1 — sorting artifacts minimal because colors similar and brightness additive-ish... Actually with depthWrite true and transparent, draw order issues cause pop. Alternative: keep lanterns fully opaque emissive; fade out by shrinking scale to zero and dimming. That avoids all sorting issues and is fast. Bloom will make them glow. I'll go opaque + scale/dim fade.
  • Ground reflection: lanterns reflected in water via the planar reflection pass — include lantern InstancedMesh in reflection scene (it is, automatically, since it's in the scene and reflection renders the scene with layers; I'll set layers so lanterns render in reflection).
• Counts: quality tiers: high 1500, med 900, low 450.

7. Water lanterns (lotus)

• InstancedMesh ~120 lotus floating lanterns: small flattened flower (cone petals + candle glow in shader, similar fake emissive). CPU-updated drift downstream with gentle bobbing + swirl; wrap around. Update matrices per frame (120 is cheap).

8. User-released lanterns

• Pool of 48 "special" lanterns, CPU-simulated: states idle → held (in front of camera at launch platform) → filling (scale/glow ramp while holding) → rising (buoyant accel, wind) → fade at height. Bigger scale (1.6×) and warmer; small light? A couple of pooled PointLights assigned to the newest rising ones (2-3 lights only).
• Interaction: press-and-hold (pointer down on release button or Space) charges; on release, whoosh + chime; counter "wishes aloft".
• Also click on the riverbank platform area releases instantly.

9. Boats

• 2 sampan boats: simple hull (extruded/lathe shape), a pole lantern glowing, drifting slowly downriver, bobbing. Reflected in water.

10. Particles/atmosphere

• Drifting mist banks over the river: a few large soft alpha sprites scrolling (procedural radial gradient texture via canvas).
• Ember/firefly specks: small Points field near banks.
• Falling leaves? skip.

11. Audio (generative)

• Master: AudioContext created on first gesture (overlay start button like previous demos presumably had — check cinderforge has overlay; yes it has .overlay in CSS). I'll include a start overlay ("Enter the festival") that also unlocks audio.
• Ambience: river lap (filtered noise LFO), crickets (random chirp blips: short sine pulses with pitch ~4kHz, bandpass, randomized intervals), wind (soft noise).
• Music: slow pentatonic pluck melody (Karplus-Strong via noise burst into feedback delay, or simpler triangle osc with quick decay + slight detune + lowpass; KS sounds way better for guzheng — implement KS with a feedback delay node: source noise burst → delay (period) with lowpass in feedback + gain .96; that's classic). Occasional flute-ish pad: sine + vibrato + breath noise, slow attack, pentatonic long tones. Sparse taiko drum during festive intensity (membrane: sine pitch drop + noise thump).
• Release SFX: paper rustle (noise burst through bandpass), ignition whoosh (filtered noise sweep up), chime (bell partials) when lantern lifts off. Gust SFX.
• Reverb: generated IR convolver (as in previous demos).

12. Post-processing

• EffectComposer + RenderPass + UnrealBloomPass + custom grade pass (vignette, grain, slight chromatic aberration, warm tone lift). Reflection at half res.
• Adaptive quality: measure fps, step pixelRatio/bloom/lantern counts between tiers.

13. HUD/controls

• Title "SKYWARD — FESTIVAL OF TEN THOUSAND LANTERNS".
• Stats: lanterns aloft (live count), wishes released, wind speed, fps.
• Buttons: RELEASE (hold), AUTO SHOW toggle, WIND slider, QUALITY cycle, SOUND toggle, SNAPSHOT.
• Hint bar: drag orbit / scroll zoom / hold space to release / G gust.
• Toast messages for milestones (100 wishes, etc.) and gusts.
• Touch: big release button shown on coarse pointers.

14. Snapshot

• Render then toDataURL, download PNG.

Structure the JS cleanly with sections. Must be careful about:

• GLSL: use smoothstep, not smooth; match precision; three r160 ShaderMaterial with instancing requires #include <common>? For InstancedMesh with ShaderMaterial, must declare #ifdef USE_INSTANCING attribute mat4 instanceMatrix; — actually three injects instanceMatrix attribute automatically for InstancedMesh when using built-in materials; for ShaderMaterial, you need to handle instanceMatrix yourself. Hmm: For RawShaderMaterial you declare everything. For ShaderMaterial with InstancedMesh, three.js automatically binds instanceMatrix attribute, but you must declare it in the shader? Let me recall: In WebGLProgram, instancing defines USE_INSTANCING when mesh.isInstancedMesh, and the vertex shader chunks declare attribute mat4 instanceMatrix; via #include <begin_vertex>? No — begin_vertex handles instancing only in #include <project_vertex> etc. The attribute declaration for instanceMatrix is injected automatically by WebGLProgram when parameters.instancing is true: there's #ifdef USE_INSTANCING\n attribute mat4 instanceMatrix;\n#endif in the prefix. Yes! WebGLProgram's prefixVertex includes:

And parameters.instancing = object.isInstancedMesh === true. So for ShaderMaterial used with InstancedMesh, instanceMatrix is auto-declared and available. But if I do fully procedural positions, I don't even need instanceMatrix — I can use gl_InstanceID? WebGL2 supports gl_InstanceID in GLSL3... but three shaders compile as GLSL3 only for... three r160 uses WebGL2 always, and shaders are compiled as GLSL ES 3.0 with #version 300 es? Three.js prepends #version 300 es only when isWebGL2 and material.glslVersion === THREE.GLSL3? Actually three always uses GLSL3 for WebGL2? No — three.js shaders use GLSL ES 1.00-style syntax and the WebGL2 context compiles them fine (WebGL2 supports ES 1.00 shaders). three does NOT prepend version 300 unless glslVersion: GLSL3 is set. So gl_InstanceID unavailable in ES 1.00.

Alternative: use InstancedBufferAttribute aSeed (vec4) per instance — that works with ShaderMaterial (declare attribute vec4 aSeed; in shader; three binds InstancedBufferAttribute by name automatically).

For user-released pool and water lanterns, use InstancedMesh + setMatrixAt per frame (CPU), plus per-instance color/brightness via InstancedBufferAttribute updated occasionally.

Simpler approach for sky lantern mesh: ShaderMaterial + aSeed; compute world pos in vertex shader; ignore instanceMatrix entirely (set instanceMatrix to identity default — InstancedMesh auto-fills identity? The instanceMatrix buffer defaults to identity). Since I don't use it, fine.

One catch: frustum culling — with procedural positions, three can't compute correct bounding sphere; set mesh.frustumCulled = false.

Reflection rendering: implement planar reflection manually:

• Create WebGLRenderTarget (half res).
• Mirror camera across y=0 plane (water at y=0): standard oblique near-plane clipping (Lengyel) or simple: since scene above water mostly, use clip plane via renderer.clippingPlanes during reflection pass? Easiest robust: use a clip plane [0,1,0,-0.02] (keep y>=0) during reflection render with a mirrored camera. Use global clipping planes? renderer.clippingPlanes applies to all materials incl. water — only during reflection pass so fine, but ShaderMaterials need clipping:true? Materials have clippingPlanes per-material or renderer global — renderer.clippingPlanes works with built-in materials automatically; custom ShaderMaterial needs material.clipping = true? There's material.clippingPlanes (per material) and renderer.clippingPlanes (global). For ShaderMaterial, global clipping works if the shader includes clipping chunks... it doesn't for custom shaders. Hmm.

Simplify: mirror camera without oblique clipping, but position water plane at y=0 and make sure almost everything of interest is above y=0; underwater geometry (below 0) would render incorrectly mirrored above, but we have little below water (riverbed, boat hull bottoms, water lantern bottoms). The reflected artifacts would show under-the-water parts mirrored — mostly hidden because water shader blends reflection with distortion and fresnel; previous demos (pyrosymphony) did "real-time planar-reflection bay" — presumably with this approach. To reduce artifacts: keep below-water geometry minimal (riverbed dark, hull sits at y=0 exactly, water lanterns at y≈0.05). Mirrored render flips: camera below plane looking up; geometry below water plane (riverbed) is above the mirrored camera plane → visible. The riverbed is dark; reflection is distorted and darkened — acceptable.

Better: I'll implement the mirror with a reflector matrix and use camera.layers to restrict reflection pass to layer 0 objects that matter (lanterns, moon, temple lights, bridge lanterns, boats, mountains, sky) excluding the water itself and misc. Use layers: REFLECT layer = 1; objects that should reflect get layers.enable(1); reflection camera.layers.set(1) only. Water mesh excluded.

Mirror camera math: reflect main camera across plane y=0: position (x,-y,z), up (−ux, uy, −uz)? Standard: reflect view matrix. I can compute: reflCam.position.set(p.x, -p.y, p.z); target reflected similarly; up vector (0,1,0) works if I then set reflCam.up.set(0,-1,0)? Common trick:

Actually simplest reliable: build reflection matrix R = scale(1,-1,1) about plane y=0: R = Matrix4().makeScale(1,-1,1). reflView = R * cam.matrixWorldInverse... plus flip winding: renderer doesn't auto-flip face culling; rendering mirrored scene makes triangles wind incorrectly → backface culling wrong. Fix: during reflection pass set scene.overrideMaterial? No. Common approach (three's Reflector): textureMatrix + projective texture sampling of the mirrored render, and Reflector sets material.side handling? Three's Reflector implementation: it renders scene with virtual camera mirrored, using renderer.state.buffers.depth.setMask(true) etc., and it works because... Reflector multiplies view matrix by reflection and the projection handles it; face culling is inverted but Reflector relies on... hmm, actually in three's Reflector example, the reflection render looks correct because they don't flip culling — wait, they do render into a render target viewed through projective texture mapping, and mirrored geometry appears correctly in the sampled texture. The winding issue: mirrored world flips handedness, so front faces become back faces. Three's Reflector handles this by setting renderer.setRenderTarget and rendering normally — I recall it works fine in practice... Let me think again: reflection across a plane is an improper rotation (det −1), flipping winding. If material.side = FrontSide with CCW front, mirrored geometry shows as CW → culled. But Reflector demo clearly works with default materials. Resolution: WebGLRenderer's Reflector example actually renders the scene from the mirrored camera WITHOUT flipping culling and it works — because the "mirrored camera" approach used there doesn't mirror the world; it places a real camera below the surface looking up (position mirrored, orientation mirrored by reflecting target & up). Position/rotation-only transform of the camera (proper rotation) preserves winding! I.e., virtual camera = reflect position AND reflect orientation basis (which for a camera is a rotation composed with one reflection → det −1? no: reflecting the camera's full transform across a plane = R_plane * camMatrix; det(R_plane)=−1 so the virtual camera matrix has det −1 — but a camera matrix must be proper rotation... in practice three's Reflector builds the virtual camera by reflecting position, lookAt target, and up vector, then calling lookAt — constructing a NEW proper rotation. The resulting view shows the mirrored scene. Winding stays correct.

So: virtual cam position = reflect(cam.pos). Its view direction = reflect(cam forward), up = reflect(cam up), constructed via lookAt(reflPos, reflPos+reflForward, reflUp). That's proper. Then render scene (minus water) to target. Then water shader samples the target with projective UV: uv = clipPos.xy/clipPos.w*0.5+0.5 where clipPos = reflCam.proj * reflCam.view * worldPos. This is exactly planar reflection. Add ripple distortion to uv.

Also flip: reflection texture will appear vertically flipped? Projective sampling handles it.

Resolution: half of drawing buffer.

Perf: reflection pass renders sky dome, mountains, temple, bridge, lanterns (instanced 1500 — one draw), boats, moon. Cheap enough.

Water shader (plane, custom ShaderMaterial):

• uniforms: tReflection, uTime, uCamPos, moonDir, lanternGlow (average warm color + intensity), textureMatrix (reflCam VP matrix).
• fragment: compute world pos, ripple normal from sum of moving noise/fbm (cheap analytic sine octaves), distort reflection uv, fresnel (view vs normal) mix deep color ↔ reflection, add moon glint (specular streak: pow(dot(reflect(V,N), moonDir))), add warm "lantern lane" sparkle: sparkle = noise-based glints * warm color * fresnel-ish; add subtle fog.

Sky lantern geometry: LatheGeometry profile:

scale roughly unit; 10 radial segments. Plus bottom ring (torus small) merged? Keep single lathe; the ring can be part of profile (slight outward bump at bottom).

Shader color: paper emissive: base warm gradient by localY (bright near bottom flame, soft toward top), flame flicker per instance; plus slight hue variance. Also normal-based soft shading: multiply by (0.75 + 0.25*dot(N, up)) to give form. Bloom does glow.

Extra: flame glow sprite per lantern? 1500 sprites too many; shader-only.

Lotus water lanterns: base = small cylinder (dark), petals = instanced cone petals arranged radially... simplest: single instanced mesh = flattened lathe (flower cup) + emissive center in shader (localY gradient + center glow). CPU matrices for drift/bob.

Bridge lanterns: static instanced spheres/cylinders (red paper) along railing curves with slight sway in shader (sway = sin(time+phase) on xz offset scaled by height?) — can reuse a variant of sky lantern shader with fixed positions from attributes, sway only. Or simpler: reuse the same lathe geometry, scale small, positions static via instanceMatrix, brightness flicker via aSeed — merge into one InstancedMesh "staticLanterns" with instanceColor per instance for red/gold.

Temple windows: instanced planes with emissive material, flicker via shader time + seed attr; or MeshBasicMaterial with per-instance color — flicker skip or animate all subtly with material.emissiveIntensity sine. Keep simple: basic emissive material, slight global flicker.

Crowd: skip (scope). Maybe a few silhouettes on bridge? skip.

Mist: 6-8 large planes with canvas radial-gradient texture, additive-ish low alpha, slow scroll; cheap.

Stars: in sky shader via hash — do a separate Points with 1200 stars on dome radius, sizes attenuated, twinkle via shader (size/alpha sin). Points cheaper & reliable. Plus sky dome gradient + milky way fbm band + horizon glow.

Moon: circle geometry with shader: limb darkening, mare noise, halo glow sprite (canvas radial texture, additive).

Auto show: festival intensity parameter 0..1 controls lantern spawn density (fraction of instances active via uDensity — instances beyond density threshold park at scale 0), music intensity, occasional "release waves" (burst of user-lantern-like from far bank — actually just density pulses).

Wind: global wind vector with slow noise variation + user slider (strength) + gust event (G key / GUST button): wind ramps up 8s, lanterns visibly streak, audio wind swell.

Numbers: rise height ~ 120-160 units; bounds ~ ±120. Camera start at (0, 14, 46) looking at (0, 18, 0)? Let's set river along Z axis; banks at |x|>14; temple on hill at (−38, 18, −60)? Let's define: river along Z, water plane 300×300 at y=0. Banks: two meshes each ~ width region x∈[14,150] and x∈[−150,−14], z∈[−150,150], displaced heightfield rising away from river (y from 0 at x=14 to ~14 at x=80) with noise. Bridge crosses at z=+8, arc from (−16,0,8) to (16,0,8) with peak y≈5. Temple on far bank left at (−46, hill, −52). Release platform: wooden dock near camera at (8, 0.4, 22) jutting into river — user lanterns spawn above dock.

Camera: start (26, 10, 40) → target (0, 14, −10). OrbitControls target (0,12,0), maxPolarAngle < horizon-ish, min distance 12, max 120.

Auto-drift: when idle 10s, camera slowly orbits.

HUD stats: lanterns aloft = activeCount (from density × total), wishes, wind (m/s), fps.

Milestones: 10/25/50/100/250 wishes → toast + chime arpeggio.

Quality tiers:

• 0 High: pixelRatio min(dpr,2), bloom on full, sky lanterns 1500, water lanterns 140, reflectionRes 0.5.
• 1 Med: pixelRatio min(dpr,1.5), lanterns 1000, reflection 0.4.
• 2 Low: pixelRatio 1, lanterns 600, reflection 0.33, bloom half strength, mist reduced. Auto step-down if fps < 45 sustained; manual cycle button.

Snapshot: composer render → canvas.toBlob → download 'skyward.png'.

Audio graph:

• masterGain → compressor → destination. reverb send (convolver with generated IR 2.5s decay) → reverbGain → master.
• ambience:
  • river: noise buffer loop → lowpass 400 → gain LFO 0.05-0.12, + higher band "lap" random blips? keep simple filtered noise with slow LFO.
  • crickets: schedule chirps: every 0.4–1.6s, short (30ms) sine 4.2kHz pulses ×3 rapid, bandpass, quiet, random pan.
  • wind: noise → bandpass 300-800 slow gain tied to wind strength.
• music director: every bar (tempo ~ 62 bpm, 4/4 slow), schedule plucks from pentatonic scale (C D E G A across 2 octaves, base ~220Hz): probability & density by intensity; occasional 2-note harmony; flute pad: every ~4 bars a long tone (sine+triangle blend, vibrato LFO, attack 1.2s, release 2.5s) choosing chord tone; taiko at intensity>0.6: deep drum on bar start + offbeat.
• KS pluck implementation: function pluck(freq, time, gain): use OscillatorNode? Classic KS: create buffer of noise length = 1 period (sr/freq), loop it into... True KS needs feedback delay: DelayNode(delayTime=1/freq) with feedback gain 0.965 through BiquadFilter lowpass(3000); excite with short noise burst into the delay input; output taps delay node. Noise burst: BufferSource 5ms noise → gain envelope. This works and sounds guzheng/koto-ish. I'll implement createPluck with nodes per note (fine at low note counts). Caveat: delayTime max 1.0 — freq>1Hz fine. Feedback with lowpass inside loop: connect delay→filter→gain→delay. And delay→out.
• whoosh: noise → bandpass swept 300→1800 Hz over 0.9s, gain envelope.
• chime: bell = sum of sine partials [1, 2.76, 5.4] quick decay + reverb.
• drum: sine 110→45Hz pitch env 0.25s + noise thump lowpass.

Music unlock: overlay "click to enter" → init audio, resume context, start scheduler (setInterval 100ms lookahead scheduling using audio clock).

Intensity slider: "SERENITY ↔ FESTIVITY" range input controlling density target & music layers & drum.

Controls summary:

• Drag orbit, wheel zoom, right-drag pan (limited).
• Space (hold) or hold RELEASE button: fill & release wish lantern.
• Click on dock area: quick release.
• G: gust. A: auto show toggle. C: camera drift toggle. S: sound. P/📷: snapshot. Q: quality. 1-3 quality direct? fine.

Toast system like cinderforge.

Also title overlay at start with "Enter the Festival" button (needed for audio unlock).

Edge cases:

• pointer events for hold-release on button: pointerdown/up/leave/cancel.
• Prevent context menu.
• Resize handler: renderer, composer, reflection target resize, camera aspect.
• visibilitychange: clamp dt.

Code size: probably ~1300-1600 lines. Let me write it carefully in one go, then node --check the JS by extracting module script. I'll write the file with a heredoc via cat? Better: use read_write_file_in_shell_environment write mode with full content. The content is long (~70KB). The tool should handle it. I'll write in parts to be safe: write file in 3-4 appended chunks using shell cat >> heredocs? Heredocs with JS containing $ and backticks are risky; use quoted heredoc 'EOF' to avoid interpolation. But the write tool is cleaner. I'll do one big write with the write tool; if too long, split into 2-3 sequential writes with append mode via shell.

Actually safer: write to /tmp/skyward.html in chunks via multiple cat >> ... <<'CHUNK_EOF' commands, then move to /space. But each execute_shell_command has its own size limits presumably similar. Either way, chunking is wise. I'll create the file in 4 chunks.

Let me now carefully design the shaders and code.

Common GLSL noise (hash/noise/fbm) for shaders:

Sky dome shader (BackSide sphere r=400):

• varying world dir.
• color = mix(horizon, zenith, pow(max(dir.y,0),0.55)) where horizon = #2a2440 warm-ish w/ ember tint near temple azimuth? Keep: horizonColor = mix(#232a4a, #4a2f3a warm patch by dot(dir, templeDir));
• milky way: band = exp(-pow(dot(dir, bandNormal),2)18) * fbm(dir.xz/dir.y... use dir-based 3D-ish: fbm(dir.xy3+...) masked by band and dir.y>0.05.
• stars: I'll do procedural in-shader: cell hash on direction octahedral coords... simpler: separate Points star field (1500 pts, twinkle). In-shader stars risk aliasing. Points it is.
• moon handled separately.

Star points shader: attribute aPhase, aMag; gl_PointSize = aMag * (300/dist) * (0.8+0.4 sin(t*speed+phase)); color mix white/blue/warm by hash. alpha soft circle.

Sky lantern instanced shader:

Attributes: position/normal/uv from lathe; aSeed = vec4(rand0..3); (maybe aScale via seed).

Uniforms: uTime, uWindDir(vec2 normalized), uWind (float strength), uDensity (0..1), uRise (cycle height), uCycle (seconds per full rise), uBounds (vec2 x/z half-extents), uGlow (global brightness multiplier), uCamPos? not needed.

Vertex:

Wrapping pops. Alternative: don't wrap; let drift carry them far, but cycle end fades out and next cycle reseeds at base — so drift only matters within a cycle. With uCycle ~ 90s and wind up to ~2.5 u/s → drift up to 225 — too far. Cap drift effect: drift = windDir * wind * aloft * factor, factor small (0.35) and wind typical 1.2 → ~38 over cycle. Fine without wrap; fading at top hides distance. Also fade with distance from camera? Fog handles.

// scale & fade envelope float born = smoothstep(0.0, 0.045, t); // ignition float dying = 1.0 - smoothstep(0.86, 0.985, t);// high-alt fade float env = born * dying * active; float scl = (0.85 + 0.45r3) * (0.35 + 0.65born) * env; // hmm dying shrinks too—good // slight tumble tilt float tilt = 0.10 * sin(uTime0.8+id2.0) * t; vec3 p = position * scl; // rotate a bit around Y slowly + tilt around X/Z float ang = id1.7 + uTime0.05*(r1-0.5); mat2 rot = mat2(cos(ang),-sin(ang),sin(ang),cos(ang)); p.xz = rot * p.xz; p.x += tilt * p.y; // cheap shear tilt vec3 world = vec3(xz.x, y + 2.0, xz.y) + p; vNorm = normal; // skip precise rotation of normal for perf? apply rot: vNorm.xz = rot * normal.xz; vLocalY = position.y; // 0..~0.63 pre-scale // brightness: flicker float fl = 0.82 + 0.28sin(uTime(5.0+3.0r2)+id7.0) * (0.5+0.5sin(uTime1.7+id)); vBright = fl * env * uGlow * (0.75+0.5*r1); vHue = r2; vFade = dying; gl_Position = projectionMatrix * viewMatrix * vec4(world,1.0); }

Opaque, no transparency; fades via scale/brightness. Bloom adds glow.

Hue variation: mix toward soft red for some: col = mix(col, vec3(1.0,0.35,0.25), step(0.8,vHue)*0.35).

Instanced mesh count per tier; uDensity animates toward target.

Note: for reflection pass, same shader works (viewMatrix differs).

Water lanterns (lotus): CPU updates, InstancedMesh 140. Each: pos x∈river |x|<13, z drifting +z at 1.2–2.5 speed with noise sway, bob y = 0.06+sin. rotation slow. On z>150 → z=−150, new x. Per-instance brightness flicker via instanceColor updated rarely (or aSeed attr in similar shader). Use dedicated small ShaderMaterial with attribute aPhase; uniform uTime; brightness flicker + color warm. Mesh: lathe flower cup: profile r 0..0.5, h 0..0.18 with petal bumps — vertex displacement in shader: petal = sin(atan(z,x)*8)*0.03 at rim. Simple.

Reflection: include.

Bridge string lanterns: instanced small lantern lathe, static matrices along arcs, red/gold colors, slight sway via shader using aPhase: offset.xz += sin(t+phase)0.05(localY negative?) skip sway or tiny rotation. Keep MeshBasicMaterial-like custom shader for flicker: actually reuse MeshStandard? They must glow → emissive. Use MeshBasicMaterial with vertexColors? Flicker: custom tiny shader similar to sky lantern fragment, positions from instanceMatrix (three auto-declares). I'll write a shared "staticGlow" ShaderMaterial that uses instanceMatrix + aPhase attr.

Temple:

• Base hill already terrain. Pagoda: group of boxes (floors) with roof pyramids. Roof: ConeGeometry(4 segments) squashed (scale y 0.5), rotated 45°, with slight upward eave flare faked by second wider thin cone beneath. Colors: dark timber #2a1f1c, roofs #3a2f3a w/ warm rim? Night: mostly silhouette + windows glowing. Add ridge ornaments skip.
• Windows: InstancedMesh planes, emissive warm, per-instance flicker via aPhase in shader (shared staticGlow shader handles color via instanceColor).
• A stone path with tiny lantern posts: instanced small glow spheres.

Boats: 2 boats; hull: LatheGeometry stretched? Build hull from a simple shape: BoxGeometry bent? Easiest good-looking: use a scaled, tapered shape via ExtrudeGeometry from a boat-outline shape (top view) with shallow depth, then sheer. Or: two slanted boxes forming a V hull + transom. I'll do: hull = CylinderGeometry segment (thetaStart..) hmm.

Simplest credible sampan: elongated flat-bottom: box (2.2×0.35×7) with bow/stern raised small boxes angled, plus canopy arc (half-torus scaled or cylinder half) midship, a lantern pole at stern with glowing lantern (sphere + pointless), and a person silhouette (capsule) punting with long pole (cylinder). Dark material #14100e with slight rim. Boat bobs & drifts slowly, wraps. 2 boats enough.

Mist: 8 planes 40×12 with canvas soft gradient texture, opacity 0.05–0.12, drifting; depthWrite false, additive? normal blending, color #9aa3c8. They should render after water; renderOrder set.

Fireflies/embers near banks: Points 300, small warm, wandering via CPU or shader (shader: pos + sin curls). Do shader-based with aSeed.

Post grade shader: uniforms tDiffuse, uTime, uVig, uGrain, uCA (chroma), uWarm. Standard.

Snapshot: render composer, toDataURL → a.click download.

Auto drift camera: idle timer; when idle>12s and enabled: camera.position rotates slowly around target (azimuth += dt*0.02), gentle vertical bob. Any pointer/key interaction resets.

Gust: windTarget ramps to 2.2× for 7s with audio swell + toast "a gust rolls down the valley".

Music intensity: slider input 0..100 → intensity. AUTO SHOW button toggles slow LFO of intensity between 0.35 and 1 over 3 minutes.

Alright — audio scheduling details:

• ctx, master (0.9), comp (DynamicsCompressor), verb (Convolver, IR 2.8s stereo decay noise), verbGain 0.35.
• ambience start: river noise loop; crickets scheduler via setInterval; wind loop w/ gain tied to wind.
• music scheduler: lookahead 0.15s, interval 90ms; bar length = 3.8s (slow); nextBarTime; scheduleBar(t): pluck notes: count = intensity<0.25? (0-1) : poisson-ish 1-4; choose from scale; KS pluck at ctx-time t+offsets. flute every 4 bars if intensity>0.15 (long tone). drum if intensity>0.55 on beat1 (+beat3.5 sometimes). Also soft bell every 8 bars marking "festival pulse".
• KS pluck:

Feedback delay loop: browser requires at least one DelayNode in cycle — satisfied.

StereoPanner widely supported.

• flute: osc sine freq, gain env attack 1.0 release 2.0, vibrato osc 5Hz → gain 4Hz depth → freq; breath: noise → bandpass at freq, gain 0.04 with same env; through lowpass 1800; pan slight; to musicBus + verb.
• taiko: osc sine 130→48 exp over 0.22s, gain 0.9 decay 0.5; noise burst lowpass 500 gain 0.25 decay 0.12.
• bell: partials [1,2.02,2.94,4.2]? festival bell: [1, 2.0, 2.74, 3.76] gains [0.5,0.25,0.18,0.1] decay ~3s.
• chime (release): pentatonic single bright KS pluck higher octave + sparkle (sine 2×freq quick).
• whoosh (release): noise → bandpass sweep 250→1600, gain env 0→0.5→0 over 1.1s; plus paper rustle: short noise highpass 2500 crackle (few random gain spikes).

Buses: ambBus, musicBus, sfxBus → master; musicBus→verb; sfxBus→verb small.

Volume defaults moderate; SOUND toggles master gain 0/1 with ramp.

Milestone chimes on wishes 10/25/50/100: arpeggio 3 notes.

HUD layout mirroring cinderforge style: top-left title+stats; top-right buttons; bottom hint; bottom-right big RELEASE button on touch; toast bottom; bottom-left maybe wind meter? Add a small "wind" bar.

Buttons: RELEASE (hold), AUTO SHOW, GUST, SERENITY slider (range input styled), QUALITY, SOUND, SNAP. Also camera drift auto.

Given mobile: RELEASE big button; sliders compact.

Wishes counter persisted? localStorage for total wishes — nice touch: "wishes released (tonight/all-time)". Keep: tonight count + all-time in localStorage. Cheap and delightful.

Now, the reflection: implement carefully.

Layer: REFLECT_LAYER=1; skyDome.layers.enable(1); stars, moon, mountains, temple group, bridge, skyLanternMesh, waterLanterns, boats, static lanterns. Camera default sees layers 0+1? camera.layers default = layer 0 only. So main camera must enable layer 1 too: camera.layers.enable(1). Then reflection cam uses only layer 1. Objects not wanting reflection stay layer 0 (mist planes, fireflies, dock? dock could reflect — enable). Simple.

Note controls.target reflection: more accurate to reflect the actual view direction rather than target, but target is fine.

Water shader sampling:

Water plane at y=0 exactly; worldPos from varying.

Ripple normal: sum of 3 directional waves + fbm detail:

fresnel = pow(1-max(dot(V,N),0), 3) mix deep↔refl: col = mix(deepCol, refl, 0.35+0.6fresnel). Moon glint: spec = pow(max(dot(reflect(-V,N), moonDir),0), 240)moonCol3. Warm sparkle lane: glints = pow(vnoise(p3+uTime*0.5), 18)warmavgLanternGlow. Add fog: mix(col, fogColor, fogFactor by distance).

Also darken reflection slightly & tint blue: refl *= vec3(0.75,0.8,0.95)*0.85.

Terrain banks: geometry PlaneGeometry(160, 300, 60, 100) rotated flat, positioned x=±(14+80)?? Actually make each bank: plane from x 14..150. Height function: h = ridge(x-14)... h = smoothstep(0, 60, d)^1.4 * 10 * (0.6+0.4fbm) + fbm detail 1.5. Color: vertex colors: base #1d2433 dark blue-green; warm tint near lantern glow zones? Use MeshStandardMaterial with vertexColors + dim hemisphere light + few point lights? Night lighting: ambient very low + moon directional (cool) + warm point near temple/dock. Standard material fine.

To keep draw simple, both banks as one geometry mirrored? Just build two.

Also add stone steps + wooden dock planks at release point; simple boxes, dark wood color; a couple of posts with lantern glow (static glow instanced set includes dock lanterns).

Lighting rig:

• HemisphereLight(skyBlue #26304e, ground #141018, 0.55)
• DirectionalLight moon (#8fa7ff, 0.35) from moon dir, castShadow false (skip shadows for perf? bloom + night hides; shadows off).
• PointLight warm at temple (0, distance 60, #ff9a3c, 1.2) flicker slight.
• PointLight warm at dock (#ffb35c, 1.0, dist 25) — brightens when user lantern fills (scale up intensity).
• 2 roaming PointLights attached to newest user lanterns (dist 12, intensity 0.8) — assign positions per frame; when idle, park at y=-50.

Fog: THREE.FogExp2(#0b0e1a, 0.0038).

Mountains: 3 ridge strips at z=-140,-190,-250 spanning x, heights 25/35/50, color #131827/#0f1420/#0b0f18 with fog; also one behind camera? skip. Build via BufferGeometry strip: top edge noise, bottom flat below water.

Actually river runs along Z; mountains should close the valley at far -Z AND +Z maybe; place main ridges at -Z (backdrop for lanterns rising over temple). Temple on left hill at (−40, ?, −55).

Valley sides: banks rise to x=±150 already give enclosure.

Sky dome radius 380, fog shouldn't kill sky: material.fog=false for sky/stars/moon.

Performance: sky lanterns 1500 instanced = 1 draw call, lathe ~ (10 seg × 8 profile) ≈ 160 tris → 240k tris fine. Reflection doubles it — ok.

Auto quality: rolling fps avg; if <42 for 4s and tier>0 → tier--, toast. If >58 for 20s and tier<initial? skip step-up (avoid oscillation).

Initial tier by device: dpr>2||mobile → tier1; else tier0.

Waves of releases (auto show): when autoShow on: intensity oscillates; also trigger periodic "wave" where density target pulses + a toast "a thousand lanterns rise from the far shore" + chime. Implement wave: temporary spike in uGlow and density target.

Alright, also hint text and toast styling consistent with previous demos' aesthetic (they share HUD patterns).

Snapshot: hide HUD? just render composer to canvas then toDataURL — HUD is DOM, not in canvas — fine.

Keyboard:

• Space hold: charge/release.
• G gust, A auto, S sound, P snapshot, Q quality, C drift, H help? hint already visible.

Also click on water/dock: raycast to river plane → if near dock (or anywhere on water), release lantern from that point rising (spawn at surface point, must be over water |x|<13 → clamp). Actually release from dock only to keep coherent: any click not on UI → quick release (charged min). Drag-orbit vs click disambiguation: pointerdown→up with <5px move & <300ms = tap.

Hold charge mechanics: chargeT 0..1 while holding (max 2s). Released lantern: initial glow scale & rise speed & brightness scale with charge; small charge = normal. HUD charge ring on big button (CSS var or canvas arc) — simple: button text changes "FILLING… %" and box-shadow grows.

User lantern simulation states (pool 40):

• idle (hidden y −100)
• filling: at dock position + sway tiny, scale & glow ramp by charge (but we only know final charge at release... it's a hold interaction: show lantern at dock inflating while held). Yes: on hold start, spawn filling lantern at dock front pos (dockWorld), scale 0.3→1.0 by charge; on release: state rising with vy 0.6+0.8charge, brightness 1+0.6charge.
• rising: vy approaches buoyant terminal (2.2+charge), vx/vz follow wind + sway; brightness flickers; after y>130 or t>45s: fading (scale→0 over 3s) → idle.
• Also nearest-3 get the roaming point lights.

Sound on release: whoosh + rustle + chime (pitch by charge).

Auto-release ambient user-lanterns? The crowd (far bank) releases are covered by the GPU field; user pool only for player.

Milestones on wishesTonight: 1 ("your first wish takes flight"), 10, 25, 50, 100 ("lantern keeper"), 250.

Toast utility with queue.

Start overlay: full-screen gradient, title, poem line, ENTER button. On click: init audio, start, fade overlay. Also starts auto camera drift.

Fonts: system stack like others.

Let me now also double check LatheGeometry: new THREE.LatheGeometry(points, segments) points = Vector2(x=radius, y=height), rotates around Y.

Profile for sky lantern (unit height ~0.63, radius ~0.36):

Open bottom (starts r 0.02 near axis at y0)? Starting at r=0.26 y=0 gives open ring bottom (hole) — good (flame opening). Lathe requires x≥0. Normals: fine.

Rim bump: (0.26,0.00)→(0.30,0.012)→(0.33,0.035) bamboo rim.

Lotus lantern profile (radius 0.5, height 0.2):

Eh, lotus: cup with petal tips up. Vertex petal displacement in shader via angular sin — with instancing attr aPhase. Or keep simple lathe + emissive center; from above at distance it's a glowing dot — fine. I'll add slight petal ripple in vertex shader.

Water lantern shader: uniform uTime; attribute aPhase(float); uses instanceMatrix (auto). Color: petals pale pink-white lit from candle center: mix by localY & radius: center glow warm. brightness flicker 0.85+0.15sin(t*3+phase).

Vertex also does bob? CPU matrix handles bob & drift; shader handles glow only. OK.

Static glow lanterns (bridge/dock/temple path): instanced small sky-lantern-ish shape? For bridge: small cylinders red. Use same lathe scaled (0.5,0.5,0.5)? Paper lanterns on strings are round-ish: use SphereGeometry(0.22, 10, 8) slightly squashed — instanced; shader flicker + color per instance via instanceColor (three supports instanceColor with built-in; for ShaderMaterial declare attribute vec3 instanceColor;? InstancedBufferAttribute named 'instanceColor' set via mesh.instanceColor — declare manually. I'll pass aColor InstancedBufferAttribute myself to avoid conflicts.

Bridge lanterns count ~ 2 sides × 14 = 28 + dock 4 + temple path 10 + boat poles 2 (separate small meshes, not instanced — fine).

All right, mountains as silhouettes don't need lights: MeshBasicMaterial color dark w/ fog:true. Fog on basic material works.

Star points: custom shader, fog false, additive, depthWrite false.

Moon: position far (-140, 150, -300)? Put moon at upper right: (120, 170, -320). Glow sprite additive; disc shader with fbm maria + limb. Moonlight dir light from that dir.

Temple hill: bank terrain already rises; place temple at x=-46, z=-55, y=terrainHeight there — compute via same height function in JS.

Terrain height function (JS + must match geometry):

Keep simpler: h = rise + n*(0.3+rise*0.12). Implement value-noise fbm in JS (same algo, deterministic via hash). Fine — geometry built once in JS; only JS needs the function (shader not needed for terrain).

River width: |x|<14 water; bank geometry spans x 14..150 and mirrored. Water plane 320×320 (fog hides edges).

Dock: from right bank at x=14 out to x=9? Make dock on RIGHT side near camera start: platform planks from (14→8, y0.35, z 20..26), plus a small shelter? Keep: 8 planks boxes, 2 posts, roofless. Release point at (8, 1.2, 23).

Camera start: pos (30, 12, 44), target (-2, 14, -6). Bridge at z=-2? Let me place bridge z = -6 (mid-frame), temple at (-44,~12,-58), moon at (130,150,-300) — hmm moon right side; temple left. Fine.

Lantern field bounds: x ±95, z ±110, base bias toward far bank (−x) & behind bridge (−z) so densest glow is up-left; rise height 150, cycle 100s avg.

uBounds = (95, 110). Base: xz = (vec2(r1,r2)*2-1)*bounds; bias: base.x = mix(base.x, -25+(r1-0.5)*80, 0.35); base.z = mix(base.z, -20+(r2-0.5)*120, 0.35).

Check reflection of lanterns: reflection camera below plane; lanterns y 0..150 visible; good.

Water reflection texture includes sky dome (layer1) → water reflects stars/moon glow — gorgeous.

Potential GLSL pitfalls: no smooth(), declare all attributes used, avoid % on floats (use fract), integer loop constants fine.

JS pitfalls: aSeed per instance via InstancedBufferAttribute on InstancedBufferGeometry? For InstancedMesh with regular BufferGeometry, add geometry.setAttribute('aSeed', new THREE.InstancedBufferAttribute(seeds,4)) — works (geometry used by InstancedMesh; WebGLRenderer treats InstancedBufferAttribute correctly).

instanceMatrix auto-declared in ShaderMaterial prefix ONLY when mesh.isInstancedMesh. I'll not reference it in sky-lantern shader; in static/water-lantern shaders I WILL use instanceMatrix — need #ifdef USE_INSTANCING guard or trust it's declared. It's declared when rendering InstancedMesh (parameters.instancing true) — prefix includes the attribute. Safe to use directly.

Hmm wait — one more check: For ShaderMaterial, does WebGLProgram set instancing parameter? programs.js: instancing: object.isInstancedMesh === true — yes regardless of material type. Good.

Reflection render & fog: scene.fog affects reflection pass equally — fine.

Water uniform tReflect color space: RT HalfFloat linear; renderer outputColorSpace SRGB with tone mapping applied in final composer pass? I'm using EffectComposer: RenderPass renders scene to RT (linear), bloom, then grade pass outputs. With composer, renderer.outputColorSpace handling: final pass should do tonemap+sRGB. Simpler legacy approach used by these demos likely: renderer.outputColorSpace = SRGBColorSpace, ACESFilmicToneMapping, and OutputPass? r160 has OutputPass addon. Use: composer = RenderPass + UnrealBloomPass + gradeShaderPass + OutputPass. OutputPass does tone mapping + color space conversion using renderer settings. I'll import OutputPass from addons.

My grade pass then operates in linear before OutputPass — grain/vignette in linear ok.

Reflection RT sampled raw (linear) — consistent since main render is linear pre-output. Water shader outputs linear color. Good.

toneMappingExposure ~1.1.

Bloom: UnrealBloomPass(res, strength 0.85, radius 0.55, threshold 0.62). Lantern emissive >1 via uGlow ~1.6 → blooms nicely. Water reflections of lanterns also bright → sparkle blooms.

Adaptive: bloom.strength per tier.

Fog color #0a0d18; sky horizon slightly lighter — fog on mountains gives depth.

Alright — also FPS meter for HUD and auto-quality.

Resize: update camera, renderer, composer, bloom, reflRT sizes.

Snapshot:

Auto drift: controls.enableDamping; drift: spherical around target.

Edge: OrbitControls import from addons.

Let me now write the code. I'll write the HTML in 4 chunks with cat heredocs (quoted 'EOF' to prevent shell interpolation). Actually the file-writing tool read_write_file_in_shell_environment with mode write writes whole content — content ~65-75KB might exceed message limits; chunking into ~18-25KB pieces is safer. I'll use execute_shell_command with cat > part then assemble? Multiple heredocs each up to ~25KB should be OK. Or use the write tool with startLine/endLine? The tool says for write edits prefer full rewrite for small files; for big files, line-range writes can break if range off — but for appending sequentially I can use shell cat >> file <<'EOF'. I'll do 5 chunks via execute_shell_command heredocs. Risk: accidental 'EOF' collision — use unique delimiters like HTML_CHUNK_1_END.

Chunk plan:

1. HTML head + CSS + HUD DOM + importmap + script open + config/utils/audio engine start.
2. Audio (rest) + scene setup + sky/stars/moon + terrain + water.
3. Temple/bridge/dock/boats/mist/fireflies + sky lantern system + water lanterns + static lanterns.
4. Reflection + post + HUD wiring + interaction + animation loop + quality + snapshot + overlay start.
5. (spillover)

Then node --check on extracted JS: extract script between and to /tmp/app.mjs, run node --check (ES module with importmap specifiers 'three' — node --check only parses, doesn't resolve imports — good).

Also validate GLSL mentally; maybe write a tiny node script to sanity-check braces? I'll eyeball.

Let me draft the full code now, carefully.

Key constants:

Pentatonic: base C3? Use scale [0,2,4,7,9] from root 220*0.5? Guzheng-ish root A2 110Hz up 3 octaves: freq = 110 * 2^(n/12), n from set [0,2,4,7,9,12,14,16,19,21,24].

Now — writing all of it. Let me be systematic and produce the final file content mentally section by section, then write chunks.

I'll now write the actual code. Let me carefully compose.

HTML/CSS: adapt cinderforge styling with festival palette (warm gold #ffc36e, paper #ffe2b8, night blues). Panels rgba(10,12,24,.72), borders rgba(255,195,110,.25).

DOM:

CSS for range inputs minimal styling.

JS module structure:

Let me write out the JS value-noise for terrain:

bankHeight(d, z): d≥0:

At d=0 → ~ -0.25+n*0.35 could be slightly above water — clamp edges: h = max(h, -0.5) and near d<2 blend to -0.6 (shore dip): h = mix(-0.6, h, smoothstep(0,6,d)). Good so shoreline tucks under water.

Bank geometry: PlaneGeometry(width=136 (x 14..150), depth=320, segW=68, segH=96), rotateX(-PI/2), translate so x from 14..150: geometry positions x∈[-68,68]→ +82 → x∈[14,150], z∈[-160,160]. Displace y=bankHeight(x-14, z). Vertex colors: c = base #1a2233 modulated by fbm & height; near shore slightly sandy #2a2a2e? subtle. Also warm tint near temple path? skip. computeVertexNormals.

Material: MeshStandardMaterial({vertexColors:true, roughness:0.95, metalness:0}) + enable layer1 for reflection.

Mirrored bank: same geometry cloned, scale.x=-1 → normals flip; instead build second geometry with negative x mapping: simpler: create two geometries via function buildBank(side) where x positions = side*(14..150). Mirroring with negative scale flips winding → material side FrontSide culls; set side:DoubleSide to dodge. Fine: one geometry, two meshes, second scale.x=-1, material DoubleSide.

Dock: group at z 20..27: planks: BoxGeometry(0.9,0.12,7.5) ×7 at x 8.4..13.8? Planks laid along z: length 7.5 in z, widths 0.86 in x, gap 0.06: positions x = 8.6+i*0.92 (7 planks to 14.1), y 0.42. support posts cylinders at corners down into water. wood color #3a2c22 rough. Plus 2 lantern posts (cyl h1.6) at river end with glow spheres (part of static glow set). Release anchor at (8.3, 1.1, 23.5).

Steps: 5 stone boxes descending from bank to dock at x~14.5..16 — optional; add simple.

Temple pagoda at (-46, h, -58):

Structure: for i in 0..4: floor box (w 7.5→3.5 decreasing, h 2.6) at y accumulating; roof for each: cone 4-seg radius w0.95, height 1.6, rotated Y 45°, squashed y 0.75, plus eave disc: cylinder radius w1.05, h 0.18 slightly larger; colors: walls #241a18, roofs #171520 with slight blue. Spire: cone small + pole. Windows: on each floor, 3-4 quads (planes) on ±z faces with warm emissive — instanced planes with per-instance phase → staticGlow-like shader or MeshBasicMaterial (no flicker) simplest: MeshBasicMaterial color #ffb45c; add subtle global flicker by animating material.color multiplier? MeshBasicMaterial color animate ok (shared for all windows — fine subtle).

Path lanterns: small posts along path from temple to bridge: 8 posts, glow spheres instanced in static set.

Bridge at z=-6: arc across x -14..14: deck: 17 boxes following y = 4.2sin(pi(x+14)/28)^0.9? Arch profile: y = 0.55 + 3.6sin(πu) where u=(x+14)/28. Deck boxes (1.9 wide? along x each 1.7, depth 3.2) rotated to slope. Railings: two curves of posts (every 2) + top rail thin boxes following same arc at y+1.1 offset z±1.5. Color dark red-brown #4a2620. String lanterns: 12 per side hanging from rail at y+0.85, instanced spheres r0.22 squashed y 0.85, warm red-gold, in static glow instanced set with sway phase. Bridge reflected (layer1).

Boats (2): group: hull base box (1.6,0.5,5.6) + bow/stern wedges (boxes rotated ±20°, (1.4,0.5,1.2)) + gunwale rails thin boxes + canopy: cylinder half (r 1.0? scaled) — canopy: CylinderGeometry(r=0.9, r=0.9, len 2.6, 8, 1, true, 0, π) rotated so opening down, positioned mid; canopy material dark #1c1410 DoubleSide. Punt pole: cylinder r0.03 l4.5 angled. Figure: capsule (CapsuleGeometry r0.22 l0.7) + head sphere, dark. Lantern pole at stern with glow sphere (individual small mesh + MeshBasicMaterial #ffc36e) — boats bob: y = 0.05+sin(t*0.9+φ)0.06, rot.z small; drift z += 1.1dt wrap ±150, x sway slight. Layers enable 1 recursively.

Mist: canvas texture radial gradient; 8 planes (46×14) at y 1.2..3, scattered x, z; material MeshBasicMaterial({map, transparent, opacity 0.06-0.1, depthWrite:false, fog:true, blending:Normal}); scroll x slowly, wrap; renderOrder 5. Layer 0 only (no reflection).

Fireflies: 260 points near banks: shader points: pos base attr + wander in shader: offset = vec3(sin(ta+p), sin(tb+p1.7)0.5, cos(tc+p)) * (1.5+hash); size 2-4px; alpha blink: smoothstep(sin(trate+p)) warm green-gold #d8ff9a? Fireflies green-gold. Additive, depthWrite false.

Sky dome shader (fog false):

fbm in shader with vnoise — include noise funcs.

Stars points (fog false, additive): 1400 random on dome r 370, y>-0.02 bias. Shader:

Moon: CircleGeometry r 14 at (150, 165, -330) lookAt origin; shader: limb darkening + fbm maria + bright rim; color #e8ecff *1.4 (blooms). Glow sprite: canvas radial, additive, scale 90, opacity 0.5.

Mountains: makeRidge(z, hBase, color): strip geometry: top vertices y = hBase*(0.4+0.6*fbm) at spacing 8 across x -260..260, bottom y -5; MeshBasicMaterial color, fog true. 3 ridges z=-150(h 26), -205(h 38), -265(h 55), colors progressively darker; also +z behind camera two ridges z=190(h30), 250(h48) for enclosure (visible when orbiting). Layer1 enable (reflect far ones).

Sky lantern field shader — as drafted. Uniform uGlow master 1.5. Also need uFogColor mixing by distance for cohesion: add fog manually: fogFactor = 1-exp(-dist²k²) standard exp2 with uFogDensity; col = mix(col, fogColor, f). Include in lantern shader since ShaderMaterial doesn't auto-fog (unless material.fog:true and include fog chunks — for custom shader easiest manual).

Water shader also manual fog. Lotus/static shaders manual fog too. OK.

Water full fragment plan:

Chunk 2: Audio engine.

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

****************************************************************ts.

********************************************************************************************************************************************ol.

*************************************************************************************************************************************************gs.

*********************************************************************************************************************************ge.

JS syntax is valid. Now let me sanity-check the GLSL shaders. Key risks:

1. In the sky lantern vertex shader I use viewMatrix (a built-in uniform provided by three) — ✓ available in ShaderMaterial.
2. instanceMatrix used in lotus/static/user shaders — auto-declared when rendering InstancedMesh. But wait — the same userMat/lotusMat/staticMat shaders are ONLY used with InstancedMesh, good.
3. GLSL_FOG declares uniforms uFogDensity and uFogColor — each shader that includes it must have those uniforms defined in the uniforms object:
   • skyLanternMat: uniforms include uFogColor, uFogDensity ✓
   • lotusMat: ✓
   • staticMat: ✓
   • userMat: ✓
   • waterMat: includes GLSL_FOG and has uFogColor/uFogDensity ✓
4. Water shader: #define H(pp) macro inside main() — GLSL preprocessor directives inside function body: #define must start at beginning of a line (it does). Preprocessor directives can appear anywhere, including inside functions. But note: #define H(pp) (vnoise((pp)*0.30+o1)*0.62 + vnoise((pp)*0.85+o2)*0.38) — references o1/o2 which are defined in main before the #define — fine since macro expansion happens textually at use sites which come after. Wait, there's an issue: I define #define H(pp) inside main AFTER o1/o2 declared — the macro is used right after — OK. One concern: macro argument used multiple times with side-effect-free expressions — fine.
5. Sky shader: normalize(d.xz+vec2(1e-5)) — 1e-5 float literal OK in GLSL ES.
6. Grade pass ShaderPass: I pass a plain object {uniforms, vertexShader, fragmentShader} — ShaderPass accepts a shader object ✓.
7. renderer.clear() with autoClear default true — when I call renderer.render into reflRT after setRenderTarget, it auto-clears anyway; explicit clear fine.
8. reflRT HalfFloatType with default depth — OK.
9. Potential issue: THREE.CapsuleGeometry exists in r160 ✓.
10. setUsage(THREE.DynamicDrawUsage) on InstancedBufferAttribute — new THREE.InstancedBufferAttribute(uBright,1).setUsage(...) returns the attribute ✓.
11. In userGeo attributes access: userGeo.attributes.aBright.needsUpdate=true ✓.
12. In sky lantern shader — varying float vBright, vHue, vY, vFogDist; multiple declarators in one statement — valid GLSL ✓. Same in fragment — must match varyings: fragment declares varying float vBright, vHue, vY, vFogDist; ✓ and varying vec3 vNorm; ✓.
13. lotus vertex: uses instanceMatrix and modelMatrix ✓.
14. static vertex: attribute names aColor, aPhase, aSway set as InstancedBufferAttribute ✓. But NOTE: instanceColor vs custom — fine.
15. One concern: for staticMat and lotusMat and userMat — the reflection camera renders these InstancedMeshes; instanceMatrix attribute is available in both passes ✓.
16. radialGlowTexture used for mist and halo ✓ defined before use (halo in chunk3, mist in chunk5) ✓.
17. moonGroup.position.clone().normalize() for uMoonDir ✓.
18. Water #define H(pp) uses pp param — vnoise((pp)*0.30+o1) — p+vec2(e,0.) — ✓.
19. Grade pass: hash() name conflicts? It's local to that shader ✓.
20. GLSL_NOISE included in sky fragment ✓ and water fragment ✓ and moon fragment ✓ (moon uses fbm ✓).
21. In moon shader, varying vUv set from uv*2.0-1.0 ✓.
22. skyMat BackSide, depthWrite false, renderOrder -10 — drawn first ✓. But wait: with depthWrite false and renderOrder -10, sky renders first, doesn't write depth; everything else draws over it ✓. But it's also in reflection: fine.

Also potential problem: skyDome radius 420 vs camera.far=900 ✓. Stars at 405 ✓ visible. fog=false on stars ✓... wait — stars material fog:false set ✓.

Issue check — controls.maxPolarAngle = 1.52 rad ≈ 87° — camera can't go below horizon ✓.

Potential issue: renderer.domElement.addEventListener('pointerup'...) for tap detection conflicts with OrbitControls — no, just additional listener.

Issue: holdStart triggered by $('bRel') pointerdown — but OrbitControls also listens on the canvas only, so button pointerdown doesn't orbit ✓. However clicking bRel will also trigger document-level addEventListener('pointerup', holdEnd) — good, release anywhere ends hold.

Space key: holdStart(e) with preventDefault to avoid page scroll ✓.

One bug: in holdEnd inside the animate loop when c>=1: I call holdEnd(); startFill(); holdActive=true; $('bRel').classList.add('filling'); — holdEnd() calls releaseFill() which uses filling — sequence: holdEnd sets holdActive=false, removes class, releases. Then startFill() creates new filling slot; set holdActive=true; add class. OK. But the button text gets reset by holdEnd then next frame sets FILLING % again — fine.

Edge: if pool exhausted, startFill returns false, holdStart keeps holdActive=false ✓.

releaseFill uses u.riseV set only on release ✓.

updateUserLanterns — for fading state: u.scale - dt*0.6 from ~2 → ~3.3s fade ✓.

Mist: m.quaternion.copy(camera.quaternion) — billboarding ✓ (plane faces camera). Mist planes use NormalBlending default ✓.

One thing: mist planes are in scene default layer 0 only — excluded from reflection ✓ (reflCam layer 1 only). Water also layer 0 only ✓. dockLight etc lights don't have layers... Lights with layers: lights affect objects based on layers matching? In three.js, light.layers controls which objects receive light (objects must share a layer with the light AND be lit by camera-visible?). Actually light.layers.test(object.layers) determines whether light affects object during render. Default light layer 0; objects on layer 0+1 still have layer 0 enabled (I used layers.enable(1) which keeps layer 0) ✓ so lights affect them.

Camera: camera.layers.enable(1) — camera sees both ✓.

reflCam sees only layer 1: sky dome ✓ stars ✓ moon ✓ mountains ✓ banks ✓ dock ✓ temple ✓ windows ✓ bridge ✓ boats ✓ sky lanterns ✓ lotus ✓ static ✓ user lanterns ✓. Water excluded (layer 0) ✓ mist ✓ fireflies (layer 0) ✓.

Now — check buildBank(side) — PlaneGeometry(W=136, D=330) rotated; local x from -68..68 maps to wx = side*(14 + lx+68) → side14..side150 ✓. d = wx*side - 14 = lx+68 ✓ non-negative ✓. For side=-1, triangle winding flips? No — geometry positions are just set; winding determined by index order which is unchanged, so normals after computeVertexNormals might point DOWN for side=-1? computeVertexNormals computes from winding: for side=-1, x coordinates reversed spatially, winding as seen from +Y becomes CW → normals point down! That's a real issue for the west bank: normals would point down → lighting wrong (dark). Fix: for side=-1, flip geometry index order or compute with side=1 and rotate the mesh 180° around Y? Rotating π around Y maps x→-x, z→-z — the noise asymmetry means the two banks would be mirrored in z too — acceptable visually (different anyway due to fbm offset? no, same geometry → exact mirror). Hmm, simpler: build both with side=1-style coordinates but second bank: wx = -(14 + (lx+W/2)) and after displacement, flip the index winding:

Then computeVertexNormals gives up-facing normals. Let me apply that fix.

Actually wait — let me think again. PlaneGeometry after rotateX(-π/2): lies in XZ plane, originally facing +Y (CCW from above). Vertices: x from -W/2..W/2, z from -D/2..D/2 (after rotateX(-90°), plane's original +y becomes -z? The plane faces +y ✓). Indices wind CCW when viewed from +Y.

For side=-1 I remap each vertex x → negative. Spatially, the triangle vertex order (in terms of original local x order) is now reversed along x → winding flips → normals downward. So yes, need the index flip for side=-1. I'll patch the file: inside buildBank, after displacement and before computeVertexNormals, add winding flip when side<0.

Also for color: cA.lerp etc fine.

Another check — temple windows: winMesh.setMatrixAt uses absolute world coords (TEMPLE_POS included) ✓ winMesh added to scene (not temple group) ✓. Rotation for -z face windows: Euler(0, π, 0) ✓.

temple.userData.winMat unused — fine.

Bridge arcY defined in two scopes (block + staticSpots block) ✓ no conflict.

staticSpots temple path: bankHeight(Math.max(0,d), pz) where d=|px|-14; px ≈ TEMPLE_POS.x+6+i*2.4 → from -40 to -23 → |px| 23..40 → d 9..26 ✓.

Boats canopy: CylinderGeometry openEnded thetaLength π; rotation.z=π/2 lays the cylinder axis along... cylinder axis default Y. rotation.z=π/2 → axis along X. Then rotation.y=π/2 rotates around Y: axis → along... Euler order XYZ default: applies as R = Rx * Ry * Rz? THREE Euler default order 'XYZ' means rotation matrix = Rz first? Actually in three, Euler XYZ applies X then Y then Z in intrinsic? The composed matrix is R = Rx(x)Ry(y)Rz(z) — vector transformed by Rz first, then Ry, then Rx. With rotation.z=π/2 and rotation.y=π/2: v' = Ry(π/2)·Rz(π/2)·v. Cylinder axis (0,1,0): Rz(π/2) maps (0,1,0)→(-1,0,0)? Rz rotates in XY plane: (0,1,0)→(-1,0,0) ✓ axis along -X. Then Ry(π/2): (-1,0,0)→(0,0,1)? Ry(θ): x→(cosθ·x + sinθ·z), z→(−sinθ·x + cosθ·z). (-1,0,0) → x'=cos(π/2)(-1)+sin(π/2)(0)=0; z'=−sin(π/2)(-1)+cos·0=1 → (0,0,1) axis along Z ✓ good — canopy tube along boat length (z), opening downward? Theta start 0 length π — half cylinder. Which half faces down? Uncertain but likely OK visually; if it faces sideways it still looks like a rounded cover... Risk: canopy might look like a half-pipe wall rather than an arch cover. To be safe, add rotation.x = π so opening faces down? I can't easily test. Alternative safer canopy: use a scaled torus? Or use SphereGeometry hemisphere scaled: sphere half (phiStart 0, thetaLength π/2) scaled (1, 0.6, 2.4) → dome cover — looks like a canopy cover, robust orientation. Let me swap canopy to hemisphere dome:

That's guaranteed sensible.

Water #define H(pp) — one more consideration: macro name H might collide with something? No.

In water shader I declared uniform float uTime,uFogDensity,uGlow; and GLSL_FOG also declares uniform float uFogDensity; → DUPLICATE declaration! GLSL_FOG has uniform float uFogDensity; uniform vec3 uFogColor; and water fragment also declares uniform float uTime,uFogDensity,uGlow; uniform vec3 uCamPos,uDeep,uFogColor,uMoonDir,uMoonCol; → uFogDensity and uFogColor declared TWICE → shader compile ERROR. Must fix: remove duplicates from water's own declaration since GLSL_FOG provides them. I'll patch: water fragment should declare only uniform float uTime,uGlow; uniform vec3 uCamPos,uDeep,uMoonDir,uMoonCol; and rely on GLSL_FOG's uFogDensity/uFogColor.

Check other shaders for the same duplication:

• sky lantern fragment: declares only varyings + GLSL_FOG ✓ (uGlow is vertex-side; fragment uses vBright only) ✓.
• lotus fragment: uniform float uGlow; + GLSL_FOG ✓ no dup.
• static fragment: same ✓.
• user fragment: same ✓.
• sky dome: no GLSL_FOG ✓.
• moon: GLSL_NOISE only ✓.

Another duplicate risk: GLSL_NOISE + GLSL_FOG both present in water — GLSL_FOG doesn't redefine noise ✓.

Sky lantern VERTEX shader declares uniform float uTime,uDensity,uGlow,uWind,uRise,uCycle; and uses uGlow ✓ (used in vBright computation ✓). No GLSL_FOG in vertex ✓ (fog applied in fragment).

Water fragment: also uses hash? No.

Now another subtle GLSL issue — sky lantern vertex: float r1 = h1(id + cycle*17.13); — cycle grows unboundedly with time; sin of large numbers loses precision after long runs (t days). Acceptable.

h1 uses sin(n)*43758 → fract — fine.

In sky lantern shader, when env=0 (inactive), scl=0 → degenerate triangles at position (xz, y+1.8, xz) — zero-area, no fragments ✓.

viewMatrix in ShaderMaterial vertex — provided ✓.

Water vertex: modelMatrix, viewMatrix, projectionMatrix ✓.

Lotus vertex: atan(position.z, position.x) ✓ two-arg atan ✓.

Fireflies: uses modelViewMatrix ✓.

Stars: same ✓. fract(aPhase*0.37) ✓.

Grade: hash redefined locally ✓.

Now, the staticMat and others use modelMatrix * instanceMatrix — for InstancedMesh with identity per-instance matrices... wait — for lotusMesh/userMesh/staticMesh I DO set matrices via setMatrixAt; defaults identity ✓. For staticMesh I composed matrices ✓.

But note for userMesh: initial instanceMatrix identity → lanterns at origin visible?? Initially userPool all idle with y=-80, but matrices composed in updateUserLanterns from frame 1 ✓ sets y=-80 → below ground, but they're at y=-80: visible through water? Water is opaque; terrain banks opaque; the lantern at y=-80 under the scene — the reflection camera at y<0 might see it? Mirror cam position y=-camY (negative), looking up; lanterns at y=-80 behind camera probably. Also brightness aBright=0 → col = black (invisible, no bloom) ✓ fine.

Also reflection: reflCam below water sees the UNDERSIDE of water? Water hidden during reflection pass ✓. Banks: reflection camera looks up from below — sees banks' undersides (normals down?) but MeshStandardMaterial FrontSide — from below, bank triangles are backfaces → culled ✓ so mirrored view shows sky + lanterns + mountains + bridge etc.

Hmm wait — that raises the winding question for reflection in general: the virtual camera approach preserves winding (proper rotation), so FrontSide objects viewed from below show their underside → culled → in reflection we see THROUGH the banks from below?? No — banks are solid ground; from below you'd see their backfaces culled → invisible → reflection would show sky where bank should be reflected. This creates reflection artifacts where bank reflections are missing (showing sky instead). This is the classic issue. Options: set bank material side: DoubleSide → underside renders (dark) → reflection shows dark banks ✓ better. Mountains MeshBasicMaterial — same issue; set DoubleSide too. Bridge/dock/temple/boats boxes are closed solids — fine. Lathe lanterns closed-ish ✓. So: set DoubleSide on bank material and ridge materials.

Actually for ridges: they're vertical strips; from the mirrored camera below, the strip's back face shows → culled → gaps. DoubleSide fixes ✓.

Let me also double check makeRidge geometry triangle winding for a camera looking from +z toward -z: triangles v order (x0,-8) (x1,-8) (x0,h) — from front (+z side), this is... cross product of (x1-x0,0,0)×(0,h+8,0) = (0,0,(x1-x0)(h+8)) → +z normal ✓ front face toward +z ✓ main camera sees front ✓. For ridges at +z behind camera (215, 290): normal still +z → facing AWAY from main camera (which looks -z from -z side... camera at z=47 looking toward -z: ridges at z=215 are BEHIND camera; when orbiting to the other side, camera at z<0 looking +z would see ridge at z=215 from its -z side → backface culled → invisible! DoubleSide fixes ✓ definitely set DoubleSide on ridges.

Bank: main view from above sees top ✓; reflection from below needs DoubleSide ✓.

Canopy DoubleSide already ✓ (being replaced with hemisphere anyway).

Water: from reflection camera below, water hidden anyway ✓.

Another issue: moonGroup.lookAt(0,0,0) — CircleGeometry faces +z; lookAt orients +z toward target? Object3D.lookAt points the object's +z axis... for cameras -z; for other objects +z faces the target ✓. Halo sprite always faces camera ✓.

Moon circle in reflection: front face toward scene origin ✓ reflCam near origin-ish ✓ fine.

Sprite in reflection: sprite faces reflCam ✓.

Now, renderer.clear() — autoClear true; I call renderer.clear() explicitly before render — double clear harmless.

The RenderPass clears using renderer autoClear ✓.

composer.render() in snapshot then toBlob — fine.

****************************opy(...).invert() — updateMatrixWorld then manual inverse ✓.

One more: controls.enablePan=false — right-drag does nothing... that's OK per hint.

resizeTargets also called by setTier ✓.

In setTier, buildSkyLanterns disposes old geometry; material shared persists ✓. Old InstancedMesh removed ✓. But aSeed attribute buffer on old geometry garbage collected with geometry ✓.

fpsAvg starts 60 ✓. Adaptive only steps DOWN ✓ no oscillation.

$('rngFest').value= number assignment ok.

MILESTONES[state.wishes] ✓.

localStorage may throw in some sandboxes — wrap in try? Minor; add try/catch around the two localStorage usages. The initial read: parseInt(localStorage.getItem(...)) at module top — if it throws, whole demo breaks! Wrap it.

Also matchMedia('(pointer:coarse)') fine.

Audio: AudioEngine.chime(AudioEngine.ctx?...) — if audio not started (ctx null) chime calls this.pluck → this.ctx null → crash. Guard: chime checks ctx. whoosh already guards ✓. chime: add guard if(!this.ctx||this.muted) return;. pluck itself also guard. flute/drum/bell called only from scheduler (ctx exists). milestoneArp guards ctx ✓ but calls chime which needs guard ✓ adding.

Also AudioEngine.setMuted guards if(this.master) ✓.

In releaseFill: AudioEngine.chime(AudioEngine.ctx?AudioEngine.ctx.currentTime+0.35:0, ...) — with guard inside chime, passing 0 time when ctx null is fine since it returns early ✓. But when ctx exists, t=currentTime+0.35 ✓.

Lotus tap: lotusData.reduce((a,b)=> a.z<b.z?a:b) — picks most upstream (min z) — recycle ✓.

interact on renderer pointerdown — also fires when tapping water ✓ fine.

OrbitControls: rotate on left-drag; tap detection pointerup uses small movement ✓.

Now the overlay: classList.add('hide') — CSS .overlay.hide opacity 0 pointer-events none ✓.

animate() starts immediately (before entering) — scene renders behind overlay, nice.

state.lastInteract init 0 → idle>12 true at load → camera drifts behind overlay — fine/cinematic. But during drift, controls.update() damping might fight the manual azimuth — controls stores spherical from camera each update; setting camera.position directly then controls.update() recomputes — generally works (common pattern) ✓.

state.driftAz unused meaningfully (computed az from camera) — harmless.

Water plane 340×340 at y=0 — bank shore dips to -0.7 ✓ overlap hidden.

One more GLSL check — sky lantern fragment uses step(0.82,vHue) ✓.

GLSL_FOG included AFTER water's own uniform declarations — order of declarations irrelevant ✓ once duplicates removed.

Grade pass: ShaderPass with custom shader object — ShaderPass expects shader with uniforms/vertexShader/fragmentShader ✓ and it clones uniforms ✓ gradePass.uniforms.uTime — ShaderPass exposes .uniforms ✓.

new OutputPass() r160 ✓.

Import of OutputPass path ✓ 'three/addons/postprocessing/OutputPass.js'.

Check THREE.CapsuleGeometry(0.20,0.75,3,8) signature (radius, length, capSegments, radialSegments) ✓.

Font/UI fine.

Now the winding fix + water uniform fix + canopy swap + localStorage guard + chime guard + DoubleSide for banks/ridges. Let me apply patches.

Patch 1 — buildBank winding flip + DoubleSide:

(variable name tmp already used for color — use tmp2.)

Patch 2 — ridges DoubleSide: new THREE.MeshBasicMaterial({ color:colHex, fog:true, side:THREE.DoubleSide })

Patch 3 — water duplicate uniforms: replace uniform float uTime,uFogDensity,uGlow;\n uniform vec3 uCamPos,uDeep,uFogColor,uMoonDir,uMoonCol; with uniform float uTime,uGlow;\n uniform vec3 uCamPos,uDeep,uMoonDir,uMoonCol;

Patch 4 — canopy hemisphere.

Patch 5 — localStorage guards:

• read: wrap:

• write: try/catch.

Patch 6 — chime guard + pluck guard:

Let me apply these with replace_in_file.

Now let me run a more thorough validation pass. Let me re-extract the JS and check syntax again, plus write a small GLSL linter that extracts each shader and checks for: balanced braces/parens, duplicate uniform declarations, use of smooth( non-standard function.

The water shader still shows duplicate uFogDensity/uFogColor. Wait — I removed them from water's own declaration... Let me check: the water uniforms JS object ALSO defines uFogColor and uFogDensity — that's fine (uniform VALUES, not declarations). The shader TEXT: my fix removed uFogDensity from uniform float uTime,uFogDensity,uGlow; → uniform float uTime,uGlow; and uFogColor from the vec3 line. But the linter still flags it — because the water shader declares uCamPos etc AND includes GLSL_FOG which declares uFogDensity+uFogColor... hold on, the linter substitutes ${GLSL_FOG} — duplicates found: uFogDensity, uFogColor. That means the water shader STILL declares them somewhere. Let me look at the current water shader text.

Oh wait — I see: the water fragment declares uniform vec3 uCamPos,uDeep,uMoonDir,uMoonCol; (fixed) — but maybe the fix didn't apply to the right place? The preview showed it applied. Let me grep the actual file for uFogColor declarations.

Lines 744-745 STILL contain the old declarations — my earlier replace... wait, the replace preview showed it was applied at lines 743-744. But the current grep shows line 744 = uniform float uTime,uFogDensity,uGlow;. So the file must have TWO water-like shaders? No — looking at the grep: line 744 still has uTime,uFogDensity,uGlow. The replace said "affectedStartLine: 743, affectedEndLine: 744" with the fixed text. Then subsequent replacements (canopy at 914, etc.) may have shifted line numbers. But the grep NOW shows the OLD text at 744-745?!

Oh! I see — the replace happened, but then... no wait. Let me look at line 744 context. Perhaps my replace matched a DIFFERENT occurrence? There was only one. Hmm, but the grep was run AFTER all replacements... Let me view the file around line 740-750.

Actually wait — maybe the replace for water uniforms matched, and this is a second copy...? No, there's only one water shader. Let me just view lines 735-750.

Interesting — the indentation is different! The file has uniform float uTime,uFogDensity,uGlow; with 6 spaces of indentation, but my search string used 4 spaces ( uniform float uTime,uFogDensity,uGlow;). Wait, but the replace reported success with 1 replacement... The replace preview showed 4-space indentation. Hmm, that means my replace matched at a DIFFERENT location? No — the preview showed lines 743-744 with the replaced text at 4-space indent...

Oh! I understand now. The search text I used had 4-space indentation:

But the actual file has 6-space indentation (because it's nested inside the ShaderMaterial object literal: fragmentShader: at 4 spaces, shader body at 6). Wait, but then how did the replace succeed?

Hmm, unless... the file content as written by my heredoc had 4-space indent there and the replace tool preview... The read now shows 6-space indent with the OLD text. But the replace tool said "replacements: 1" and previewed the NEW text at lines 743-744.

Something is inconsistent. Wait — maybe the replace tool matched on a version where indentation... Let me check if there are now TWO copies of the water fragment shader — maybe my earlier replace somehow DUPLICATED content? bytesWritten went 76308 → 76119 (ridge fix) → 76074 (water fix, −45) → 76066 (canopy) → 76142 → 76113 → 76122 → 76134. The water fix reduced bytes by 45 which matches removing the duplicates. So the water fix DID apply somewhere.

Let me grep for 'uTime,uGlow' to see where the fixed version went.I need to investigate — the replace reported success but the old text persists. Let me search for both variants:

The grep shows only ONE occurrence of the old text at line 744, and the fixed uTime,uGlow version doesn't exist. But the replace tool reported success with bytesWritten changing from 76119 to 76074 (a decrease of 45 bytes, matching the fix)...

Wait, maybe the storage layer (s3fs) is slow/eventually-consistent and my read is seeing a stale version? The replace operations after the water fix (canopy, localStorage, chime) also reported success with correct previews at shifted line numbers... The canopy replace preview showed line 914 with the new text. Then greps now show old water text at 744.

Hypothesis: s3fs eventual consistency — writes may have been applied to different cached versions, and the final file lost the water edit. The bytesWritten for each subsequent op kept changing, suggesting each op saw a progressively updated file... but maybe the "water fix" write was overwritten by a later read-modify-write cycle that started from a stale version (the canopy replace read the file BEFORE the water fix was flushed, then wrote its result, clobbering the water fix).

This is a race with s3fs. Safest: re-apply the water fix now and verify by grep before proceeding.

Checkpoint: 80% time used. The replace with 6-space indentation found 0 replacements — meaning the search text with 6-space indent isn't found either. But grep clearly showed line 744 with uniform float uTime,uFogDensity,uGlow; — let me check the exact leading whitespace with cat -A. The grep output showed 4 spaces in the grep result but that may have been mangled. Let me check exact bytes and use sed to fix directly, then verify.

Python says count=0 of the 6-space-indented old text, yet sed showed it at line 744 with 6 spaces... AND grep again shows line 744 with the old text. This strongly suggests the file content keeps flipping between two versions — the s3fs storage is serving inconsistent reads (eventually consistent). The python read got a version WITHOUT the old text (i.e., the fixed version from my earlier successful replace!), while sed/grep in the same shell got... wait no — python asserted count==0 meaning the version python read did NOT contain the old text — i.e., python saw the FIXED version. Then the subsequent grep in the SAME command showed the OLD text again at 744!

So within one shell command: python read → new version; grep read → old version. The storage is flapping between versions. This is an eventually-consistent overlay; writes are being propagated and different reads hit different replicas.

Strategy: wait a few seconds for consistency to settle, then verify. Let me sleep ~15s and re-check which version wins. If it settled on the OLD version, apply the fix once more and wait and verify.

Bad news: after 20s, the file settled on the STALE version — ALL my fixes are gone:

• Water uniforms: old text at 744 ✗
• DoubleSide count = 1 (should be 2: bank + ridge; the count of 1 is the canopy's side:THREE.DoubleSide which was in the original chunk) ✗
• No hemisphere canopy (no SphereGeometry(0.95,10,6 match) ✗
• No pluck ctx guard at line 295 ✗ (only cricket's guard at 280)
• localStorage unguarded at 194 ✗
• No bank winding flip ✗

So the LAST writer won, and the last writer was... the python3 failed assertion didn't write. Hmm, but the version that won is the ORIGINAL chunk-6-appended version (before any replaces). All six replace operations are lost.

Why? Each replace did read-modify-write to s3fs. Perhaps the s3fs mount caches aggressively and the replaces each started from a cached ORIGINAL version, applied their single change, and wrote — the final file = original + last change only... but then at least ONE change should be present. Unless the failed python write (assertion) somehow... no, it didn't write.

Wait, actually — maybe the issue is different: replace tool #1 (bank fix) reported bytesWritten 76308. The file after chunk 6 was ~? Let me think: chunk sizes — the file before any replace: I don't know exact bytes. The replace sequence bytesWritten: 76308 → 76119 → 76074 → 76066 → 76142 → 76113 → 76122 → 76134. These are deltas consistent with each individual edit applied to the ORIGINAL file (each ~76KB). So YES: every replace started from the original version (cache miss of previous write) and wrote original+single-edit. The last replace (chime guard, 76134 bytes) should have won... but grep shows even the chime guard is missing? grep 'if(!this.ctx) return;' shows line 280 (cricket — original) and 403 — wait, 403! What's at 403? That could be the chime guard! Original file had cricket guard only (~line 279). The chime guard was at ~line 371 in the fixed version... but in the version where ONLY the chime guard was applied to the original, it'd be around line 371 too. Hmm, 403?

Let me check line 403 content. Actually if only the LAST replace (chime guard) survived, the file = original + chime guard. Line 403 might be the chime guard shifted by... no, chime was at 371 before other edits; without other edits it'd still be ~371. Line 403 with 'if(!this.ctx) return;' — hmm, the cricket at 280. What else... startFill? No. Let me look at line 403.

Actually wait — pluck guard replace also added 'if(!this.ctx) return;' — if pluck guard were applied it'd be at ~line 296. Nothing at 296. Line 403 might be whoosh? whoosh had if(!this.ctx||this.muted) return; — different text. Let me check line 403 directly.

Also DoubleSide count=1: the canopy line was side:THREE.DoubleSide — 1 occurrence. If ridge fix had survived: 2. If bank fix: 3 (bank material + ridge + canopy).

So current file = original + possibly one edit (chime?). Ugh.

New strategy to beat the consistency race: do ALL fixes in ONE python script run (single read-modify-write), then verify after a delay with multiple reads. Also disable any caching by writing to a temp file then mv (rename forces new object?). On s3fs, rename might help or not. Alternative: write the whole corrected file fresh with cat > (full rewrite in one shot). Since I have the full content locally? The file is ~76KB; a full rewrite via one heredoc is possible but large; still it's the most robust: single write operation, no read-modify-write.

But safer: apply all 6 fixes via one python script (one read, one write). Then wait 30s, then verify in a separate command (grep twice).

Let me first confirm what line 403 is, to know the current baseline.

7 of 8 edits applied in one atomic write. chime-guard skipped (count=0) — the current chime text might differ. But chime calls pluck which is now guarded... wait no: chime with null ctx → this.pluck(...) guarded returns early ✓. So chime is safe via pluck's guard. Actually chime itself does 110*Math.pow(...) fine without ctx. OK — chime is transitively safe.

Wait, why count=0? Maybe the file read by THIS python had the chime guard already?? The file md5 before this write: e01da96... The read saw chime with... hmm chime(t, vel=0.25, semi=24){\n const f=110*Math.pow(2,semi/12); count=0. Maybe the read version had the guard already (from the last surviving replace — remember grep found 'if(!this.ctx) return;' at line 403 which I attributed to scheduler — no, scheduler's is if(!this.ctx) return; at ~line 402). Hmm confusing. Regardless: chime is safe because pluck is now guarded.

CRITICAL concern: the md5 "before" (e01da...) — was that the pristine original or original+chime? Whatever — the important thing: this single write included 7 fixes and the chime guard state is fine either way (if it already had the guard, count=0 because old text absent — then the guard exists! Let me verify after consistency settles).

Now: wait ~25s, then verify the file has all fixes and re-run the GLSL lint + JS syntax. Then update the demos index page. Time is at 90% — need to move fast. Priority: (1) verify file integrity, (2) update index.html (also racy — do it in one python write + verify), (3) final check.

All 8 fixes verified OK, GLSL lint clean, JS syntax valid. The file is stable now.

Last step: update /space/demos/index.html — insert the 064 card right after <div class="demo-list"> (before the 063 card). Do it with a single atomic python read-modify-write, then verify. Time is at ~91% — be quick.

************************************************************************************************************************************ne.