Update Demos Index and Create Teslasphere Demo

The task says "Wake up and do as you please." But there's also historical context: the previous run created a Cymatics demo (027) but failed to update the main index page. Let me check the current state of the demos folder, verify the 027-cymatics demo exists, and complete the index update. Then, if time permits, I could create a new demo too.

Let me start by installing shell tools and exploring the current state.

Let me explore the current state of the demos folder.

**************************************************************************************************************************************************is.

**********************************************************************************************************************************************re.

Now I understand the structure. I need to insert the 027-cymatics card right after <!-- New demos are added here --> and before the 026-synchrony card. Let me check the cymatics demo's title/description from its index.html to write a good card description.

I have the title: "Cymatics — Chladni Plate Laboratory". Now let me insert the card into the main index.html. Based on the previous run's summary, the demo features:

• Interactive 3D simulation of Chladni plate patterns
• Thousands of sand grains self-organize into nodal figures on a vibrating copper plate
• Closed-form gradient calculations for particle physics, live (m,n) mode blending
• Up to 16,000 GPU-rendered sand grains
• Real-time modal displacement of the copper plate in the vertex shader
• Synthesized WebAudio (pure tone, overtone, plate hiss tracking frequency)
• Live pattern-preview HUD with frequency readout
• Gold/salt/ember grain palettes
• Auto-tour of the mode ladder
• RoomEnvironment for studio reflections
• UnrealBloom post-processing with vignette/grain/chromatic grade
• Tap rings, drifting dust motes, snapshots, adaptive quality tiers, full touch support

Let me write the card and insert it after the <!-- New demos are added here --> comment.

The search text wasn't found. Maybe the whitespace is different. Let me read the exact lines around the insertion point.

************************************************************************************************************************************************************************************************rs.

The lines end with $ (LF line endings, no trailing whitespace). The indentation is 8 spaces for the comment and 12 spaces for the anchor. My search string used exactly that... Wait, let me compare:

My search:

That's 8 spaces before <!-- and 12 spaces before <a. The file has 8 spaces before <!-- and 12 spaces before <a. That should match...

Hmm, unless the file has CRLF? cat -A shows $ at end with no ^M, so it's LF.

Maybe the issue is the replace tool had some issue with the multi-line string or special characters. Let me try a smaller, unique search string — just the comment line plus the anchor line. Actually, let me try using sed to do the insertion instead, or try the replace tool with just the single comment line.

Actually, wait — maybe the tool trims or something. Let me try with a simpler unique search: just <!-- New demos are added here --> and replace it with the comment plus the new card. But the indentation of the following lines... Let me try.

The 027-cymatics card has been inserted. The index is now updated.

Now, the task says "Wake up and do as you please." The previous incomplete work is now complete. Since I have time, I should create a new demo — that's my purpose. Let me create demo 028.

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

1. Spinning cube
2. Nebula galaxy
3. Mandelbulb explorer
4. Fluid dynamics
5. Gravity sandbox
6. Event horizon (black hole)
7. Sonic reactor (audio)
8. Void runner (game)
9. Azure odyssey
10. Abyssal bloom (underwater)
11. Physarum garden
12. Powder alchemy
13. Clockwork nebula
14. Neon rain
15. Aurora borealis
16. Skitter (creatures)
17. Coral resonance
18. Threshold
19. Attractorium (strange attractors)
20. Murmuration (flocking)
21. Terraforge (erosion/terrain)
22. Cloudsea (volumetric clouds)
23. Frostline (frost simulation)
24. Koi pond
25. Ferrofluid
26. Synchrony (fireflies)
27. Cymatics (Chladni plate)

Ideas for 028:

• Reaction-diffusion (Gray-Scott) 3D — a GPU reaction-diffusion simulation mapped onto a 3D surface/torus with feeding/kill controls. Could be beautiful: Turing patterns, coral-like growth.
• Cloth simulation — GPU cloth with wind, tearing.
• Solar system / orbital mechanics — done partially by gravity sandbox.
• Lightning / plasma — procedural lightning bolts.
• Volumetric fire / campfire — ray-marched fire.
• Ink in water — fluid sim already done.
• Kaleidoscope / fractal kaleidoscope — shader art.
• Wormhole / tunnel flythrough.
• Crystal growth / dendrite — frostline covers some.
• Ocean waves (FFT ocean) — Tessendorf waves, foam, a buoyant boat maybe. Cloudsea had a simple sea; a full FFT ocean with ship/buoys would be cool.
• Boids + predator — murmuration covers.
• Marble run / Rube Goldberg physics.
• Tornado / vortex particle simulation.
• Bioluminescent tide / glowing plankton.
• Sand pile / granular simulation.
• Electrostatic / plasma globe — interactive plasma ball with filaments following your pointer. That's very visual and interactive!
• Differential growth / coral growth — physarum and coral done.
• Mandelbrot deep zoom — mandelbulb done.
• Ray-traced spheres with reflections — a real-time ray tracer in a fragment shader.
• Terrain flythrough with fog — terraforge done.
• Fireworks show — procedural fireworks with trails, bloom, city skyline, reflections on water. Fun and impressive!
• Jellyfish field — procedural jellies with tentacle simulation, bioluminescence. Abyssal bloom might cover underwater.
• Light painting / ribbon trails.
• Maze generation + solve.
• Spider web with physics — skitter might be spiders.
• Magnetic field lines — ferrofluid done.
• Double pendulum chaos — attractorium covers chaos.
• Watercolor / ink diffusion.
• Starling murmuration — done.
• Tessellated origami / folding.
• Growing tree / L-system forest — procedural trees growing with seasons. Terraforge has forests but as part of landscape.
• Voronoi shatter / fracture.
• Portal / non-euclidean.
• Plasma globe — I like this. Interactive, glowing filaments of lightning inside a glass sphere, following pointer, with audio crackle. Very "wow".

Let me check what "018-threshold" is to avoid duplication. Actually, let me quickly peek at a few to be safe. But time is limited. Let me check 018-threshold and 010-abyssal-bloom quickly.

Actually, a plasma globe demo is distinct: interactive lightning filaments in a glass sphere, WebAudio crackle, bloom. Not covered by any of the above.

Alternatively, reaction-diffusion on 3D mesh is also great. Let me go with the plasma globe — "028-plasma-orb" or "028-tesla-orb". Actually, let me think about what would be most impressive and technically interesting:

Plasma Globe ("Teslasphere"):

• Glass sphere with Fresnel reflections (env map)
• Multiple lightning filaments from center electrode to glass surface, procedurally generated with midpoint displacement, animated
• Filaments attracted to pointer position (raycast onto sphere)
• Click to trigger a big discharge burst
• Volumetric-ish glow via additive sprites + UnrealBloom
• WebAudio: crackle/hum tracking discharge energy
• Dust/argon glow inside, base stand, dark studio environment
• Quality tiers, snapshots, touch support

That's a solid advanced demo. Let me also consider FFT ocean with a sailboat — also cool but plasma globe is more novel relative to the collection.

Let me first quickly verify what 018-threshold is (name suggests portal/doorway) — not plasma. OK.

Let me build the plasma globe demo. Key technical pieces:

1. Scene setup: dark studio, reflective floor (or subtle), pedestal/stand for the globe.
2. Globe:
   • Outer glass sphere: MeshPhysicalMaterial with transmission, or custom Fresnel shader. Transmission can be expensive but fine. Or use a custom shader with fresnel + envmap + subtle tint.
   • Inner electrode: small emissive sphere at center.
3. Filaments:
   • N filaments (e.g., 12-24), each a polyline from center to a point on the sphere surface.
   • Each filament regenerated periodically with midpoint displacement (fractal), with branches.
   • Rendered as additive lines/tubes. For thickness + glow, use ribbon quads facing camera, or use Line2 (fat lines) from examples, or custom cylinder-following shader. Simpler: render each filament as a series of camera-facing quad strips in a custom BufferGeometry with additive blending, plus a bright core. Or use THREE.Line with additive blending and rely on bloom for glow — lines are 1px, bloom makes them glow nicely. With high-res bloom, 1px lines look thin. Fat lines (Line2/LineMaterial with linewidth in world units) look much better.
   • Alternative approach used by many: generate filament paths, build tube geometry with small radius (TubeGeometry), update every frame or every few frames. 20 filaments × ~40 segments tubes is cheap enough if rebuilt occasionally.
   • Better: custom shader ribbons — each filament as a triangle strip billboarded toward camera in the vertex shader. I'll write a custom ShaderMaterial where each segment is a camera-facing quad; width tapers along length; color = white core fading to violet/blue edge; additive blending. This gives full control and great looks with bloom.
4. Pointer interaction: raycast pointer to sphere; nearest filament endpoints get attracted to pointer point; energy increases near pointer; crackle audio tracks energy.
5. Discharge burst on click: spawn extra temporary filaments radiating to click point + flash light + expanding ring.
6. Audio: WebAudio — filtered noise crackle (random impulses through bandpass), hum (oscillator at ~55Hz + harmonics), intensity tied to discharge energy. Start on first interaction.
7. Post: UnrealBloomPass + custom grade (vignette, grain, chromatic aberration) like other demos.
8. Extras: drifting gas glow inside globe (soft sprite), small arcs crawling along the inner glass surface, base with brushed metal + glowing ring, floor reflection (simple planar reflection or just a reflective-looking dark floor with radial gradient), dust motes, auto-orbit camera, quality tiers, snapshot button, touch support.

Implementation details for filaments:

• Each filament: start at center (with small offset), end at point P on sphere (radius R). Path generated by midpoint displacement with decreasing amplitude, ~6 subdivision levels → 64 points. Add 1-2 small branches.
• Animate: regenerate the displacement offsets every ~80-150ms (staggered per filament) with smooth interpolation between old/new paths for organic movement. Also add per-frame jitter in shader via noise for shimmer.
• Endpoints: each filament has a target endpoint that slowly wanders on the sphere (random walk), and is attracted to pointer when pointer is active (blend factor based on distance).
• Filament intensity flickers (random + audio-linked).

Ribbon geometry approach:

• For each filament with M points, build M-1 quads (2 triangles each) → positions computed in JS each update? That's 20 filaments × 64 pts × 4 verts = ~5k verts — fine to update in JS each frame, but shader-based billboarding is cleaner: store for each vertex: position (the path point), side (-1/+1), t (0..1 along filament), filamentId. In vertex shader, compute camera-facing offset: viewDir = normalize(cameraPosition - position), tangent = normalize(next - prev) — need neighbor points; simpler to pass offsetDir per vertex computed on CPU when path updates (perpendicular in screen space can't be computed on CPU without camera... but we can compute a stable perpendicular: cross(tangent, viewDir) needs viewDir in shader).
• Pass per-vertex: position, tangent (approx), side, t. In shader: vec3 viewDir = normalize(cameraPosition - position); vec3 sideDir = normalize(cross(tangent, viewDir)); pos += sideDir * side * width(t); — classic ribbon. Width from uniform base width × taper × intensity.
• Update position+tangent attributes when paths change (every ~100ms per filament, plus global jitter via shader noise so it shimmers every frame).

Colors: violet/blue plasma (#7aa0ff core white, edges #6a3df0 / #a86bff), maybe color shifts with energy (blue → magenta).

Inner glass surface arcs: small short filaments that crawl on the inner surface — could reuse filament system with endpoints constrained near surface and short length. Maybe skip for scope; instead add "corona" glow sprite at center electrode and a soft inner glow sphere with fresnel.

Glass sphere: MeshPhysicalMaterial with transmission=1, roughness~0.05, ior 1.5, thickness small; needs an environment (RoomEnvironment) and it will refract the filaments behind it — transmission with transmissive objects renders scene behind... transmission samples the opaque scene; filaments are additive transparent — they may not appear through transmission correctly. Safer: custom glass shader: transparent fresnel rim + envmap reflection + slight tint, no refraction (or fake refraction via envmap). I'll write a custom ShaderMaterial: color = env reflection (sample cube/equirect env) * fresnel + subtle blue tint, alpha = fresnel-based (rim more opaque). Additive-ish rim. This looks like glass and doesn't hide filaments.

Environment: RoomEnvironment from three examples for PBR reflections on the metal base + env map for glass shader (PMREM).

Base/pedestal: cylinder with metallic material, glowing ring (emissive torus), maybe a small logo plate. Floor: large dark disc with radial falloff + subtle reflection of globe via Reflector? Reflector adds a render pass; could be nice but heavy. Alternative: fake reflection — mirror the glow sprite and filaments? Simpler: use a MeshStandardMaterial floor with low roughness + envmap and a radial gradient texture; plus a blurred glow sprite under the globe. Keep it simple and elegant.

Lightning burst on click: raycast to sphere; spawn 3-5 temporary filaments from center to that point + a surface splash (small ring sprite) + point light flash + audio snap.

Auto behavior: idle mode where endpoints wander; pointer attracts.

HUD: title, energy meter, buttons (filament count presets: Calm/Storm/Tempest; color themes: Argon(blue-violet)/Neon(red-orange)?/Xenon(white-blue)); snapshot; audio toggle; quality auto.

Let me now also handle performance: ribbon filaments ~24 × 64 points; updating every frame in JS is fine (24×64=1536 points, cheap). Actually I can update every frame with smooth noise-based deformation: keep a base path (midpoint displacement) and add small time-varying offsets in the vertex shader using a cheap hash-noise so the CPU only rebuilds base paths occasionally.

Simpler robust plan: rebuild all filament paths on CPU every frame? 24 filaments × 65 points with midpoint displacement (6 levels of recursion) — that's ~24 × 63 segment ops — trivial. Per frame fine. Then write positions+tangents into preallocated buffers. This gives smooth organic motion without shader noise complexity.

Branches: each filament gets 1-2 branches: pick a random point along main path at ~30-60%, generate a short secondary path with its own midpoint displacement toward a nearby surface point. Include in same buffer with its own t range. Total vertices: 24 filaments × (64 main + 2×24 branch) segments × 4 verts/segment ≈ 24 × 112 × 4 ≈ 10.7k verts — fine.

Width: core ribbon (bright, narrow) + outer glow ribbon (wider, fainter)? Could do two draw calls with different widths/colors, or encode in one ribbon with fragment gradient across width: pass side as -1..1 and in fragment compute intensity = 1-|side| profile → core bright center, soft edge. One ribbon per segment with fragment falloff = cheaper and prettier. So each segment quad spans full glow width; fragment shader: float d = abs(vSide); float core = exp(-d*d*18.0); float glow = exp(-d*d*4.0)*0.5; color = mix(edgeColor, coreColor, core); alpha = core + glow; Additive blending, depthWrite off.

Endpoint on glass: add a small "anchor glow" sprite at each filament endpoint (bright dot where it touches glass) — use a Points system or instanced sprites; simple THREE.Points with custom shader, size attenuation, additive. 24 points, trivial.

Center electrode: emissive sphere + strong point light (violet) + corona sprite.

Also add subtle fog and vignette.

Audio design:

• Master gain.
• Hum: two detuned oscillators (55Hz, 110Hz) lowpassed, gain tied to base power.
• Crackle: noise buffer through bandpass (2-5kHz), triggered by random impulses; rate/amplitude tied to energy (pointer proximity, bursts). Implement as: ScriptProcessor? No — use scheduled short noise bursts via BufferSource with exponential decay envelopes, scheduled in a lookahead loop; density ∝ energy.
• Sizzle: continuous filtered noise with amplitude modulated by energy.
• Burst sound on click: short noise snap + sine "thunk".

Controls/UI:

• Top-left: title + subtitle.
• Bottom bar: energy meter, preset buttons (Calm/Storm/Tempest), theme (Violet/Azure/Ember), buttons: audio on/off, snapshot, auto-orbit toggle.
• Keyboard: 1/2/3 presets, T theme, M mute, S snapshot, Space burst at random point.
• Touch: drag attracts, tap bursts.

Quality tiers: pixelRatio scaling + bloom resolution + filament count adjust based on FPS.

Snapshot: render then toDataURL download.

Alright, also need import map with three r160+ from unpkg, OrbitControls, EffectComposer/RenderPass/UnrealBloomPass/ShaderPass/OutputPass, RoomEnvironment.

Let me write the code carefully. It's a big file (~1200+ lines). Let me structure it:

Filament system details:

Path generation (midpoint displacement):

Standard midpoint displacement on indices: for level with stride s, midpoint index i+s/2 gets average of endpoints + random offset along random direction scaled by amplitude; amplitude *= 0.55; s >>= 1. SEG = 64.

Random offset direction: random unit vector, but better perpendicular to segment direction: offset = randVec * amp, fine.

Also add slight time-based wiggle: when rebuilding each frame, use rng seeded per filament + time-quantized seed with interpolation... Simplest organic approach: rebuild every frame with rng = seededRandom(filamentSeed + floor(time12)) and lerp between path for current tick and next tick by fract(time12). That gives smooth 12Hz morphing — looks like living lightning. Store two path buffers per filament (pathA, pathB) and lerp into the render buffer. CPU cost: 24 filaments × 2 paths × 64 pts rebuild per frame = ~3k midpoint ops — fine.

Actually simpler: rebuild pathA/pathB only when tick changes (12 times/sec), then per frame just lerp + write to attribute. Good.

Branches: similar, shorter (SEG_B = 16), start at main path point index k, end at surface point near main endpoint region. Rebuild on same tick schedule.

Ribbon geometry: for each filament: main SEG quads + branches. Preallocate BufferGeometry with max verts. Each quad = 4 verts, 6 indices (index buffer static). Attributes per vert: position (updated), tangent (updated), side (-1/+1), tAlong (0..1 static per filament but branch t differs), fade (per-vertex intensity multiplier, static-ish). Update per frame: positions + tangents.

Vertex shader:

Fragment:

AdditiveBlending, transparent true, depthWrite false, depthTest true.

Per-filament intensity flicker: uniform per draw? If all filaments in one geometry, need per-vertex intensity attribute updated per frame (fade attribute) — fine, update fade per filament per frame (write to all its verts — 24×~112×4 writes = ~10k float writes/frame, OK).

Endpoint glow points: THREE.Points with per-point size + intensity attributes, positions = endpoints. Shader: soft disc, additive.

Attractor: raycast pointer ray against sphere mesh (math: ray-sphere intersection, use THREE.Ray + Sphere). If hit, attractor point = hit point (on surface). Filament endpoints: each has weight w_i = clamp(1 - dist(endPoint, attractor)/radius*?) — simpler: pick K nearest filaments to attractor and pull their endpoints toward it strongly; others wander. Energy = number of pulled filaments + proximity → audio + width boost.

Also idle: endpoints random walk on sphere (spherical coords drift).

Burst: on click/tap: choose point (raycast hit or random), spawn burst object: life 0.5s, 5 temp filaments (use a second FilamentSystem with its own buffer, or reuse main system by temporarily overriding some endpoints? cleaner: separate BurstSystem with same ribbon shader, N=6 filaments, fade with life). Plus expanding ring on glass (sprite scale up, fade), point light flash, audio snap, energy spike.

Corona at center: sprite with radial gradient texture (canvas-generated), pulsing scale/alpha with energy. Electrode sphere: MeshStandardMaterial emissive.

Glass globe shader:

Simpler: use MeshPhysicalMaterial with transparent:true, opacity 0.15, roughness 0.05, metalness 0, envMap from scene.environment (PMREM RoomEnvironment), plus clearcoat. Physical material with envMapIntensity high and opacity low gives decent glass rim via specular highlights. But real fresnel rim looks better. Custom shader with PMREM env sampling requires textureCubeUV chunk — messy. Alternative: MeshPhongMaterial with envMap (cube), reflectivity, transparent, opacity ~0.12, blending normal, depthWrite false → decent glass. Plus a second "rim" sphere slightly larger with custom fresnel additive shader (no env needed): color = rimColor * pow(1 - |dot(N,V)|, 3). That combo looks like glass. I'll do: inner sphere (physical-ish phong with envmap reflection) + outer rim fresnel additive sphere (BackSide? No—FrontSide rim). Also subtle inner-surface glow sphere (BackSide, faint blue gradient) to fake gas glow.

Environment cube: create a tiny procedural env: use THREE.CubeCamera once? Or generate a simple gradient cubemap via canvas (6 faces) — dark studio with a soft top light. Simplest: PMREM from RoomEnvironment for standard materials (pedestal metal), and for glass use scene.environment through MeshPhysicalMaterial envMap automatically (scene.environment applies to all physical/standard materials). So glass = MeshPhysicalMaterial({transparent, opacity:0.12, roughness:0.03, metalness:0, envMapIntensity:1.5, clearcoat:1}) + custom rim sphere.

Pedestal: CylinderGeometry (dark metal, metalness 0.9, roughness 0.35) + torus glow ring (emissive violet, feeds bloom) + small top cap. Floor: CircleGeometry radius 30, MeshStandardMaterial color #05060a, roughness 0.4, metalness 0.6 + envmap subtle; plus radial fade via onBeforeCompile or a canvas texture with radial gradient as map+alpha... simpler: big circle with vertex colors fading to black, or fog handles it. Use fog (FogExp2 #04050a, density ~0.02) so floor fades out.

Fake reflection: add mirrored glow sprite under globe (scale y negative, low alpha) — cheap and effective. Or skip; floor with envmap + glow ring light pools: add PointLight under globe? PointLight violet at globe center already lights pedestal/floor. Good.

Dust motes: 200 points floating slowly inside a large sphere region around globe, faint, additive, subtle drift via shader time. Actually inside globe only? Ambient dust around scene is nice. Keep subtle.

Post: EffectComposer: RenderPass, UnrealBloomPass (strength ~1.1, radius 0.6, threshold 0.15), custom GradePass (vignette+grain+chromatic aberration), OutputPass.

Camera: PerspectiveCamera 45°, pos (0, 2.2, 7.5), OrbitControls target (0, 1.6, 0), damping, autoRotate slow (toggle), min/max distance, maxPolarAngle slightly below horizon to avoid going under floor.

Globe: center at (0, 1.9, 0), radius R=1.5. Electrode radius 0.16.

Quality tiers: measure fps over 2s windows; tiers: High (pixelRatio min(dpr,2), bloom res full, 24 filaments), Med (pr 1.5, 18), Low (pr 1.25, 12, bloom half). Adjust filament system active count (draw range).

HUD: consistent with previous demos' style (dark glassmorphism). Title "TESLASPHERE", subtitle "interactive plasma globe". Energy bar. Buttons row. Footer hint text: "move to attract · click to discharge · drag to orbit".

Snapshot: composer.render(); renderer.domElement.toBlob → download link. Need preserveDrawingBuffer or render right before toBlob in same frame — call composer.render() then toDataURL synchronously. OK.

Audio engine:

Crackle: create bufferSource from noise buffer (short random slice), bandpass freq random 1.5-6kHz, gain env exp decay 30-80ms.

Themes:

• Violet (default): core #eaf2ff, edge #7b5cff, rim #8a6bff, ring emissive #7b5cff, light violet.
• Azure: core #ffffff, edge #37b6ff.
• Ember: core #fff3e0, edge #ff7a2a. Switch uniforms + lights + ring material emissive.

Presets: Calm (10 filaments, slow tick 8Hz, low width), Storm (18, 12Hz), Tempest (26, 16Hz, wider, more crackle). Also energy baseline differs.

OK, let me also double check three version: use 0.164.1 or 0.160.0 from unpkg with import map:

Imports: OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass, RoomEnvironment.

Note: In r164, OutputPass exists. Good.

Let me write the file now. I'll write it in one go with a heredoc via execute_shell_command? The file is large (~1000+ lines). Better to use read_write_file_in_shell_environment write mode with full content. The content is big but manageable. Let me draft it carefully.

Key math pieces:

Seeded RNG: mulberry32.

Midpoint displacement path:

Wait: loop for i=half; i<SEG; i+=stride — for stride=SEG, half=SEG/2, i=SEG/2 only (since i<SEG, next i=SEG/2+SEG > SEG). Good. Then stride halves. Correct midpoint subdivision requiring SEG power of 2 → SEG=64.

But pts[i+half] must exist: i max = SEG - half... when stride=2, half=1, i goes 1,3,...,63 → i+1 ≤ 64 = SEG exists. Good.

Amp: distance(a,b) * 0.18 maybe.

Constrain path points to stay within sphere radius R0.98: after displacement, clamp length: if |p| > R0.97 (in globe-local coords), scale down. Globe-local: subtract globe center. I'll compute paths in globe-local space (center 0,0,0) and set filament mesh position to globe center.

Endpoint wander: spherical coords theta/phi drift with small random velocities; keep away from bottom (pedestal) region? Fine anywhere.

Attraction: if attractor (local point on sphere) exists: for each filament, d = angular distance between endpoint dir and attractor dir; pull = smoothstep based; endpoint dir = normalize(lerp(wanderDir, attractorDir, pull)) with pull stronger for nearest few. Implement: compute for all, find weights w = exp(-d²/σ²), cap total; endpoint lerp factor = min(1, w*2.2).

Energy: e = clamp(maxWeight * something + burstEnergy + base). Smooth with lerp. Drives: width boost, corona scale, audio, light intensity, flicker rate.

Flicker: per filament intensity = (0.55 + 0.45 * noise1D(timef + seed)) * (0.7+0.6energy). Use cheap sin-hash noise.

Now geometry layout per filament: main 64 segments + NB=2 branches × 16 segments = 96 segments → 96×4 = 384 verts, 96×6=576 indices. MaxFilaments = 28. Total verts = 10752, indices 16128. Fine.

Static attributes: side, t, segFadeBase? Per-vertex: side(±1), t(0..1 along its (sub)path), branchFlag maybe for thinner branches: encode in t sign? Use attribute "kind" (0 main, 1 branch) → width factor. Or bake width factor into "side" magnitude? Keep attribute aw (width multiplier per vertex: main 1.0, branch 0.55).

Dynamic per-frame attributes: position, tangent, fade (per filament scalar → write to all verts of filament).

Tangent per point: (p[i+1]-p[i-1]).normalize().

Branch path: start = main path point at index k0 (random 18..40), end = surface point = main endpoint blended with random offset (or independent nearby surface point). SEG_B=16.

Endpoint glow points: max 28 main endpoints + bursts. Points geometry with position + aSize + aFade attributes; shader: circular soft falloff.

Bursts: separate simpler system: MAXB = 4 concurrent bursts × 6 filaments × 24 segs. Rebuild every frame while alive (life 0.45s), amp bigger, fade = (1-t)(life curve). Ring sprite at hit point: canvas ring texture, scale = R(0.2+1.1*age), opacity (1-age). Point light flash: single PointLight reused, intensity spike decay.

Audio crackle scheduling in update: if ctx running: crackleProb = energy0.9 + burst2; accumulate timer; when rand < probdtrate → spawn crackle. Rate ~ 30/s at energy 1.

Hum: osc saw 50Hz + osc sine 100Hz → gain 0.02+0.05energy → lowpass 300Hz → master. Sizzle: noise loop → bandpass 3500 Q 1.2 → gain 0.0..0.06energy with flutter (LFO on gain? modulate in update). Master gain 0.9, mute toggle.

Burst sound: noise burst 0.12s bandpass 900Hz + osc drop 220→60Hz 0.15s.

Now UI/HUD HTML:

Style: dark, glassy, monospace-ish accents; consistent with previous demos presumably.

Keyboard: 1/2/3, T, M, S, O, Space.

Snapshot filename: teslasphere-YYYYMMDD-HHMMSS.png.

Resize handler. Visibilitychange → pause audio?

Quality manager: track avg frame time; after 3s, if > 20ms → step down tier; if < 12ms for a while → step up (max high). Tiers adjust: renderer pixel ratio, bloom resolution (setSize handles), active filament count (system.setActive(n)), dust count draw range.

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

Also remember: previous demos likely have a consistent HUD style; not required to match exactly, but keep quality.

One concern: three r164 UnrealBloomPass import path: 'three/addons/postprocessing/UnrealBloomPass.js'. OutputPass: 'three/addons/postprocessing/OutputPass.js'. RoomEnvironment: 'three/addons/environments/RoomEnvironment.js'. OrbitControls: 'three/addons/controls/OrbitControls.js'. Good.

PMREM:

In r164 RoomEnvironment constructor optionally takes renderer? RoomEnvironment() no args needed (it's a Scene). fromScene(env). OK.

Glass: MeshPhysicalMaterial with scene.environment auto-applies. transparent true, opacity 0.13, roughness 0.06, metalness 0, clearcoat 1, clearcoatRoughness 0.08, envMapIntensity 1.6, color 0x8fb7ff slight tint? color affects reflection tint; keep white-ish #dfe9ff. depthWrite false so filaments visible inside. side: FrontSide. Also add BackSide faint sphere for inner gas glow: custom shader fresnel backside additive faint.

Rim shell: SphereGeometry(R*1.002), ShaderMaterial additive:

Additive, transparent, depthWrite false.

Corona sprite: canvas radial gradient texture on Sprite? Sprite always faces camera — good. scale ~1.2, additive, opacity pulsing. Place at center. Also electrode sphere emissive 2.2.

Lights: ambient dim #223, key PointLight at center (violet, intensity 2.2*energy-ish, distance 12, decay 2), rim DirectionalLight faint from top-back for pedestal, small spotlight from top for pedestal highlight? Keep: ambient + center point + dir.

Floor: CircleGeometry(26, 64) rotated -90°, standard material #07080d rough 0.42 metal 0.55 envMapIntensity 0.5. Fog FogExp2(0x04050a, 0.028). Camera far 60.

Pedestal:

• base cylinder r=1.05/1.25 h=0.35 at y=0.175
• neck cylinder r=0.55 h=0.5 y ~0.6
• collar torus at globe bottom
• glow ring torus r=0.95 tube 0.035 at y=0.42 emissive theme color intensity 2 → bloom. Globe center y: pedestal top ~0.85 + R 1.5 → center y = 0.85+1.50.92? Let's set: floor y=0; base h 0.3 (y 0..0.3); stem to y=0.75; globe center y = 0.75 + R0.94 ≈ 0.75+1.41=2.16 → say GLOBE_Y=2.1, R=1.5 → globe bottom at 0.6, socket cylinder covering 0.55..0.85 r 0.5. Fine, overlap slightly.

Camera target (0, 1.9, 0), pos (0.0, 2.4, 7.6).

Dust: 260 points in shell radius 4..9 around center, slow drift in shader: pos + small sin offsets by seed; size 0.02-0.06; alpha 0.15.

Grade pass shader: uniforms tDiffuse, uTime, uVig, uGrain, uCA. Chromatic aberration: sample offset radial * 0.0015. Grain: hash(uv*time)*0.03. Vignette: smoothstep.

Now the filament fragment shader with per-vertex fade attribute (updated per frame per filament): attribute float fade; Also add subtle per-length shimmer: sin(t40 - time30)*0.1? Keep simple.

Width uniform: uWidth base 0.02 (world units at globe scale) — ribbon width in world units; at distance 7 with fov 45, 0.02 world ≈ few px — good with bloom. Tempest width 0.028.

Also add slight glow-wide pass: same geometry drawn twice? No—fragment already has glow profile across width; width 0.02 gives thin core+glow. Maybe width 0.035 for nicer glow spread. Tune: uWidth 0.03, core exp(-d²28), glow exp(-d²6)*0.5.

Branch width multiplier 0.55 via aw attribute: w *= aw.

Endpoint Points shader:

uScale = viewportHeight related uniform; update on resize: uScale = height * 0.5 / tan(fov/2)? Standard: gl_PointSize = size * (scale / -mv.z) where scale = height0.5projectionMatrix[1][1]. I'll pass uPixelScale = height * 0.5 * proj[1][1] updated on resize.

OK. Time to write. I'll write the file with the write tool in one shot. Let me compose carefully — this is long. I'll keep comments concise.

Also update main index.html to add 028 card after done. And verify 027 card present (done above).

Let me write /space/demos/028-teslasphere/index.html now.

Structure of script:

1. imports
2. Config & state (presets, themes)
3. Renderer, scene, camera, controls, env, fog, lights
4. Textures (canvas: glow sprite, ring, noise for audio later)
5. Globe group: electrode, corona, glass, rim, inner glow
6. Pedestal & floor
7. FilamentSystem class + instance
8. Endpoint glow points (inside filament system? separate class EndpointGlow)
9. BurstSystem
10. Dust
11. Post composer + grade shader
12. Audio engine
13. Pointer & events
14. UI wiring
15. Quality manager
16. Resize
17. Animate

Careful details:

• Ray-sphere: use THREE.Raycaster against invisible sphere mesh (glass mesh) — raycaster.intersectObject(glassMesh). Use glass mesh (visible) fine.
• Pointer attract only when pointer over canvas and hit; on touch, touchmove updates.
• Click vs drag distinction: use pointerdown pos + pointerup delta < 6px & time < 400ms → burst. Because drag orbits camera.
• Space → random burst.

Filament intensity flicker function:

plus random jumps on tick.

Endpoint wander: each filament: dir (Vector3), drift velocity small random; per frame: dir.addScaledVector(randVec, dt*0.15).normalize(); plus attraction lerp.

Path rebuild ticks: tickHz per preset; per filament staggered tick offset so not all jump same frame: tickPhase_i = i * 0.37. On crossing integer tick: pathA=pathB; pathB=gen(seed+tick). Then render path = lerp(pathA, pathB, smoothstep(frac)). Also endpoints lerp similarly (endA,endB from wander target sampled at tick) — simpler: endpoints continuous (wander each frame), only internal displacement uses tick morph. Endpoint of path = current endpoint each frame: after lerp, set pts[0]=center-ish, pts[SEG]=end current. Internal points from morph. Slight inconsistency at junction acceptable? The morph paths were generated with endpoints at generation time; overriding endpoints each frame causes small kink near ends. To avoid: generate paths with fixed canonical endpoints (center & stored endAtTick), and each frame rotate whole path so its end aligns to current endpoint? Overkill. Simpler: rebuild both morph targets every frame?? cost fine actually: 28 fil × 2 × 64 = 3.6k point-gen with rand — trivial. Then no tick popping: instead vary seed smoothly? Displacement with continuous seed isn't smooth.

Alternative simpler & proven: rebuild ONE path per filament per frame using rand seeded by (seed, tick) but morph: maintain cur[] and tgt[] arrays; when tick changes: copy tgt→? Hmm.

Cleanest: keep tick morph with FIXED endpoints per filament that update only on tick (endA/endB), while the visible "wander" applies to a target; on tick, endA=endB, endB=wanderDir snapshot. So endpoints move smoothly via morph too. Attraction influences wanderDir continuously; snapshot each tick (8-16Hz) — responsive enough.

So per filament state: seed, tickLast, endA(Vector3), endB, pathA(Float32Array 65*3), pathB, plus branch data similar (branchA/B with own endpoints derived from main). Branch start index k fixed per filament per tick (store in path gen). To keep code manageable, branches: regenerate with same tick; store branch arrays too.

Memory per filament: main 2×65×3 floats, branches 2 branches × 2 × 17×3. Fine.

genPath(seedTick, endDir, out): rand=mulberry32(seed^tick); a=(0,0,0)+tiny offset? start exactly center (0,0,0) local; b=endDirR0.985; amp = R0.16; displace; clamp radius R0.99.

Branch gen: pick k0 in [14..34] from main pathB at same tick; start = main[k0]; endDirB = endDir jittered by ~0.5 rad random; len SEG_B=16; amp R*0.08.

Per frame per filament: f = smooth(frac(tick)); for i in 0..64: p = lerp(pathA[i], pathB[i], f) → write position attr; tangent from neighbors (use lerped array). fade attr = intensity.

Total per-frame float writes: 28 fil × (65 + 2×17) pts × (3 pos + 3 tan + 1 fade) ≈ 28×99×7 ≈ 19.4k — fine.

Draw range for active count: geometry.setDrawRange(0, activeFilaments * segsPerFil * 6).

Index buffer: precomputed for MAXF filaments.

Attributes: position (dynamic), tangent (dynamic), fade (dynamic), side (static), t (static), aw (static).

Uniforms: uWidth, uCore, uEdge, uTime, uIntensity(global multiplier).

Now bursts: simpler: per burst 5 filaments, SEG 24, rebuilt EVERY frame with fresh rand (no morph — chaotic flash is fine), life 0.4s, fade = (1-age)^1.5, width bigger. Own geometry+material (share shader via function makeRibbonMaterial). MAXB 3 → 3×5×24 segs.

Ring sprite at burst point: use Sprite with ring texture, additive; also small light flash via shared PointLight positioned at hit (intensity 30 → 0 decay).

Audio burst: snap.

Energy: target = base(preset) + attractBoost + burstSpike; energy += (target-energy)min(1,dt4).

Attract boost: maxPull among filaments.

Meter fill width = energy*100%.

OK writing now. Also grade shader:

Dust shader: points with seed attr; pos drift: p + vec3(sin(t*0.1+s), ...)*0.3.

Alright — also the "hint" overlay and title. Also add small "027"-style num? Not needed in demo itself.

Snapshot:

Works without preserveDrawingBuffer if called synchronously after render in same task.

Audio init on first pointerdown (and button). Mute toggle M / button.

Edge case: OrbitControls intercepts pointer; our raycast uses pointermove on window — fine.

Let me now write the file. I'll be thorough but efficient. Then update index.html with 028 card, then verify both with quick greps, then done.

One more check — make sure unpkg three@0.164.1 paths correct:

• https://unpkg.com/three@0.164.1/build/three.module.js ✓
• addons: examples/jsm/... ✓

Write now. I'll produce the complete HTML in a single write call. Estimate ~1000 lines. Let me go.

Also, naming: folder 028-teslasphere, title "Teslasphere — Interactive Plasma Globe", card h2 "Teslasphere".

Let me carefully write the JS to avoid bugs:

• mulberry32(seed) returns function.
• smoothstep helper.
• THREE.Sphere for manual ray intersection alternative: raycaster.intersectObject(glassMesh, false) — glass material transparent but raycast works on geometry. Good.

Branch start: need main pathB point at k0 — but during morph, branch start should follow morph of main path at k0: compute branchStart = lerp(mainA[k0], mainB[k0], f). Branch path arrays store offsets relative? Simpler: store branch paths as absolute local coords generated from mainB at gen time; during morph, add delta = (lerpedMainK0 - branchStartB)? Complicated. Simplify: branches morph A→B like main; branch A generated from mainA[k0A], branch B from mainB[k0B] with possibly different k0 — fine, morph still looks OK (branch root slides slightly). Acceptable visually since branches flicker fast.

Actually simplest robust: branches attach to CURRENT main path each frame: don't morph branches; regenerate branch geometry every frame from current lerped main path with rand seeded by (seed, tick, branchIdx) — constant within tick → stable within tick, jumps at tick (8-16Hz) — acceptable for small branches (real arcs do jump). This removes branchA/B storage.

So per frame per filament:

1. f = morph factor; compute cur[65] = lerp.
2. Write main ribbon verts from cur.
3. For b in 0..1: k0 = k0A? use k0 from current tick (stored at gen): k0B. start = cur[k0B]; end = branchEndB (dir stored); gen path with rand(seed, tick, b) each frame (deterministic within tick) → write branch verts. Cost: extra 28×2×17 pts gen/frame — fine.

Store per filament: endA,endB, brEnd[2], k0[2], tick, pathA, pathB, seed, phase, intensity.

genPathInto(out vecs array of Vector3 length n+1, a, b, amp, rand).

I'll preallocate temp Vector3 arrays globally (cur[65], br[17]) reused.

Tangent: for i: t = cur[min(i+1,SEG)] - cur[max(i-1,0)] normalize → write.

Write into Float32Arrays via attr.array and setXYZ? Direct array writes faster: posArr[v*3]=x etc. Vertex order per segment: 4 verts: (i, side -1), (i, +1), (i+1, -1), (i+1, +1); indices (0,2,1),(1,2,3) pattern per quad → check winding irrelevant (DoubleSide). Set material side: THREE.DoubleSide to avoid culling issues.

fade attribute per vertex = filament intensity (same for all its verts) — write per filament loop.

t attribute static: main: i/SEG at vert positions (i or i+1); branch: 0..1 over branch; also aw: main 1, branch 0.55.

Vertex layout builder: for filament f in 0..MAXF-1: base = f * vertsPerFil; seg s in 0..SEG-1 (main) then branches.

vertsPerFil = (SEG + NB*SEGB) * 4 = (64 + 32)*4 = 384. idxPerFil = (64+32)*6 = 576.

MAXF = 28 → total verts 10752.

Endpoint glow: positions = current endpoints (lerped endA/endB by f, times R*0.985) in local + globe offset — Points object placed in globe group (local coords) so same transform. aSize ~ 26 (px at scale), aFade = intensity.

Also center bright point? Corona sprite covers.

Now colors per theme as uniforms uCore/uEdge (Vector3). Light color, ring emissive, rim color, corona color (sprite material color), endpoint color uniform.

Preset definitions:

Quality tier caps n: high 26, med 18, low 12 → active = min(preset.n, tierCap).

OK, writing the file now. Also remember meta description for SEO/card consistency.

Let me also add subtle "gas glow" inside globe: sphere R*0.98 BackSide with gradient shader (faint blue, brighter near center?) — fresnel backside gives edge glow inside; keep very faint (0.05). Optional; include simple version.

Time to write. After writing, update /space/demos/index.html to add 028 card (insert after the comment, before 027 card). Then verify with grep. Then success.

Note on write size limits: the file might be ~40-50KB; the write tool should handle it (027 was 34KB). Go.

Let me draft the entire HTML mentally then write:

Key risk areas to double check while writing:

• UnrealBloomPass constructor: new UnrealBloomPass(new THREE.Vector2(w,h), strength, radius, threshold).
• OutputPass() no args.
• Grade pass needs uniforms tDiffuse auto-provided by ShaderPass.
• composer.addPass order: render, bloom, grade, output.
• renderer.toneMapping = ACESFilmic; toneMappingExposure 1.1. With OutputPass, tone mapping applied there.
• scene.environment via PMREM; also scene.background = null (CSS gradient behind? renderer alpha?) — set scene.background = new THREE.Color(0x04050a) plus fog matching.

Floor reflection fake: skip; envmap on floor gives sheen.

Pedestal metal with env: metalness 0.85 roughness 0.35 color 0x2a2d36.

Ring: TorusGeometry(0.98, 0.03, 16, 100) emissive theme, emissiveIntensity 3, color black base.

Electrode: SphereGeometry(0.17) standard: color 0x111, emissive theme core, emissiveIntensity 2.5, roughness 0.3 metalness 0.8.

Corona sprite: SpriteMaterial(map: glowTex, color theme edge, blending Additive, depthWrite false, opacity 0.9); scale ~ (1.4,1.4,1) pulsing ±.

Glow texture canvas 128: radial gradient white→transparent.

Ring texture canvas 128: stroke circle gradient.

Audio: implement class with methods: ensure(), setMuted(), setEnergy(), burst(), update(dt). Noise buffer 1s white.

Crackle:

update: rate = 6 + energy38 (+burstBoost); if (rand < ratedt) crackle();

Hum: started once: osc saw 48Hz + osc sine 96Hz + slight detune → humGain 0.015 → lowpass 240 → master. Sizzle: looped noise → bandpass 4200 Q0.8 → sizzleGain 0 → master; update: sizzleGain.target = 0.05*energy (smooth via setTargetAtTime occasionally or direct .value lerp in update).

Burst audio: snap: noise 0.09s hp 800 + osc tri 180→50 exp 0.18s gain 0.25.

Master gain 0.9 → destination. Mute: master.gain 0.

Autoplay policy: create/resume ctx on first pointerdown/keydown.

Now pointer:

pointerActive flag: true on pointermove; false after 2.5s no move (idle) or pointerleave.

Burst trigger: pointerdown records x,y,time; pointerup: if dist<8 && dt<500 → doBurst at hit or random. Also ' ' key → random burst. Prevent when clicking UI buttons (check event target closest('#controls') etc. — attach pointer handlers to renderer.domElement only).

UI buttons wiring straightforward.

Quality: frame time EMA; every 2.5s evaluate: if ema>19ms tier down; if ema<11.5ms tier up (hysteresis 3 evals). Apply: renderer.setPixelRatio, bloom.resolution? UnrealBloomPass has setSize via composer.setSize — call composer.setSize(w,h) after pixel ratio change; bloom internal uses its own resolution set at construction... UnrealBloomPass.setSize updates render targets — composer.setSize calls pass.setSize. OK. Also set active filament cap & dust drawRange.

Tiers:

start tier 0 (cap dpr anyway).

Resize: camera aspect, renderer.setSize, composer.setSize, points uPixelScale.

Alright, writing now for real. I'll include concise comments. Also add maybe not needed.

After writing file, add index card:

Card description draft: "A hand-built plasma globe — up to 26 live ribbon filaments are regenerated every frame with midpoint-displacement fractals and ray-marched... (no raymarching here). Features: fractal lightning ribbons billboarded in a custom GLSL shader, pointer-attracted arcs, click discharge bursts with light flashes and surface rings, three field presets (Calm/Storm/Tempest), three gas themes (Violet/Azure/Ember), glass globe with fresnel rim + RoomEnvironment reflections, glowing pedestal, generative WebAudio (hum, sizzle and stochastic crackle tracking field energy), UnrealBloom + vignette/grain/chromatic grade, adaptive quality, snapshots, touch support."

Good. Write files now.

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

Now let me review the file for bugs. Key concerns:

1. controls.target.copy(GLOBE_POS).y -= 0.15; — copy() returns the Vector3, and .y -= 0.15 operates on the vector's property — this works: controls.target.copy(GLOBE_POS) returns target vector, then .y -= 0.15 modifies it. OK.

2. In FilamentSystem.update, I use mulberry32(F.seed ^ ((time * 2) | 0)) for wander — creates a new rng each frame per filament; fine.

3. anchorLocal method references performance.now() but is unused — I use updateEndpoints instead which duplicates logic. There's an unused variable tk in anchorLocal. It's dead code but harmless. Actually let me remove anchorLocal since it's unused and has a lint-y unused var. Minor. I'll clean it.

4. In BurstSystem.fire, audio.burst() — audio is defined AFTER bursts system instantiation but fire is only called at runtime after everything is defined. const bursts = new BurstSystem(); — the class references audio inside fire() method, which is fine because it's called later. But wait — audio is declared with const audio = new PlasmaAudio(); AFTER const bursts = new BurstSystem();. Since fire is only invoked via user interaction after full script evaluation, no TDZ issue. OK.

5. In BurstSystem.update, I create new THREE.Vector3() inside the filament loop (tmp.add(new THREE.Vector3(...)) — allocation per frame per burst filament; acceptable but could hoist. Minor GC churn: 3 bursts × 5 fils = 15 allocations/frame max. Fine.

6. filaments.genPath(this.path, BSEG, origin, tmp, R * 0.13, rng0) — uses rng0 (seeded once per burst) — wait, that means the path is deterministic given rng0 state... rng0 is created fresh each update() call per burst (const rng0 = mulberry32(B.seed); inside the burst loop) and then used for 5 filaments sequentially. Each frame the same sequence → same paths every frame?? But I wanted chaotic flicker. Hmm — rng0 is re-seeded with B.seed each frame, so genPath produces the SAME path each frame (no time-varying seed). The target point jitters slightly via rng (time-seeded at 60Hz), so endpoints claw around, but internal shape stays static. That will look like static bolts with jittering ends — not ideal. Let me fix: seed rng0 with (B.seed ^ ((time * 60) | 0)) so the whole path regenerates chaotically each frame.

Also in the branch gen inside FilamentSystem.update: mulberry32(F.seed ^ (F.tick * 131071) ^ (b * 8191)) — deterministic within a tick; branches jump at tick boundaries — intended.

7. F.tick = tick initial -1 → first frame generates paths. pathA starts as zeros → first morph from zero-length path (all at origin) — brief grow-in effect at start. Acceptable, actually looks like power-on. Fine.

8. updateEndpoints uses F.endA.lerp(F.endB, 0.5) — approximates morph position. Slight mismatch with actual frac but visually fine (points sit at glass near arc ends).

9. raycastGlass uses globe.worldToLocal(hit.point.clone()) — globe has only translation, fine.

10. epMat uScale initial 600, updated in onResize. OK.

11. controls.target.copy(GLOBE_POS).y -= 0.15 — fine.

12. In keydown handler, audio.ensure() on every key — ok.

13. renderer.domElement.addEventListener('pointerleave', ...) sets pointer off-screen → raycast misses → hit null. But state.pointerActive = pointerDirty && (perfNow() - lastMove < 2.5) — pointerDirty stays true forever once set; after 2.5s idle it deactivates. Good.

14. Grade pass: fract(uTime) with uTime = t % 10 fine.

15. UnrealBloomPass with threshold 0.12 — additive ribbons are HDR-bright (colors up to ~1.5) → bloom picks them. Good.

16. scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; — RoomEnvironment constructor in r164: class RoomEnvironment extends Scene { constructor(renderer?) }? Let me check: In r150+, RoomEnvironment constructor signature changed; in r164 it's constructor() — actually in r162+ RoomEnvironment takes no arguments (previously took renderer for... no). Checking memory: examples/jsm/environments/RoomEnvironment.js — in r164: constructor() creates scene with meshes; usage in examples: pmremGenerator.fromScene(new RoomEnvironment(), 0.04). Yes, r164 takes no args (the renderer arg was removed in r156-ish... actually it was constructor(renderer = null)? Hmm. In r164, RoomEnvironment's constructor is constructor() — I believe passing nothing is safe regardless.

17. renderer.getPixelRatio() used in onResize for point scale — good.

18. Filament tangent attribute name 'tangent' — three.js has built-in tangent attribute handling only when material needs it; custom ShaderMaterial with custom attribute named 'tangent' — potential conflict? THREE.WebGLProgram binds attributes by name from geometry; 'tangent' is a known attribute name (used for normal mapping) but for ShaderMaterial, attributes are looked up by the shader's declared attributes. Declaring attribute vec3 tangent; in GLSL1-style (three injects #version and attribute→in conversion)... With WebGL2, three converts attribute to in. There might be a conflict because three.js prepends common attribute declarations (position, normal, uv) for ShaderMaterial? For ShaderMaterial, three prepends a standard prefix that includes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; — but NOT tangent. So declaring attribute vec3 tangent; is fine. However — GLSL ES 3.0 reserved? No. OK.

Wait, actually there IS a potential issue: three.js ShaderMaterial prefix declares attribute vec3 position; etc. and my geometry has 'position' — fine. My custom attributes: tangent, side, t, aw, fade — all declared in my shader. Good.

19. t as attribute name — 't' fine.

20. Points material: uses gl_PointCoord with texture — fine.

21. epGeo.setDrawRange(0, filaments.active) — drawRange for non-indexed Points = vertices count. Good.

22. In FilamentSystem.update, when this.active filaments loop — fadA[vBase + vv] writes only for active ones; stale data beyond drawRange not drawn. Good.

23. state.energy init 0.36 matches storm base.

24. Meter transition 90ms — fine.

25. snapshot() — composer.render() then toDataURL — same-task, works without preserveDrawingBuffer... Actually toDataURL after render in same synchronous stack: the drawing buffer is still valid until compositing; synchronous call right after render is the standard approach. OK.

26. Font of pct span — fine.

27. import { OutputPass } — exists in r164. Good.

28. In applyTheme, dustMat.uniforms.uColor.value.set(t.rim).multiplyScalar(0.7) — .set() returns the Color, then multiplyScalar mutates — OK.

29. document.documentElement.style.setProperty('--accent-soft', t.css + '59') — appending alpha hex '59' to '#8a6bff' → '#8a6bff59' — valid 8-digit hex. Good.

30. Potential issue: glass mesh with depthWrite: false and transparent — filaments inside are also transparent additive with depthWrite false. Render order: three sorts transparent objects by distance; glass sphere center vs filament mesh — both at globe center... The glass might render after filaments (same distance → sort stable-ish). Glass is mostly transparent (opacity 0.1) so even if drawn after, it only slightly veils. Rim shell additive — fine. Gas backside — fine. Electrode is opaque, drawn in opaque pass before transparents — good, arcs pass behind/in front via depthTest vs electrode's depth (electrode writes depth; arcs depthTest true → hidden behind electrode correctly).

But wait: filaments' depthTest against glass: glass doesn't write depth → arcs visible through. Good.

31. corona is a Sprite — SpriteMaterial sizeAttenuation default true. Good.

32. Ring sprites: ring.position.copy(localPoint).multiplyScalar(1.01) — localPoint is local to globe; ring is child of globe — consistent. Good.

33. flashLight positioned localPoint*1.15 + GLOBE_POS — world space. Good.

34. On pointerup burst: raycastGlass() uses current pointer — set via setPointer(e) first. Good.

35. Space key preventDefault avoids page scroll. Good.

36. updateQuality(dt, performance.now() - frameStart) — measures CPU time of frame logic, not GPU. EMA of CPU ms — decent proxy. OK.

37. Initial applyTier() calls composer.setSize — composer created. OK.

38. dustGeo.setDrawRange — Points non-indexed. OK.

39. bloom resolution via composer.setSize — UnrealBloomPass.setSize exists. OK.

40. One more: const scale = (innerHeight * px) / (2 * Math.tan(...)) — gl_PointSize is in device pixels; position scale factor should use drawing buffer height = innerHeight * pixelRatio. Correct.

41. In filament vertex shader, cameraPosition is a built-in uniform in ShaderMaterial — yes, three provides it.

42. projectionMatrix * modelViewMatrix — provided. Good.

43. In gas/rim shaders I use viewMatrix (provided) and modelMatrix (provided). Good.

44. endpoints Points added to globe — positions local. Good.

45. updateEndpoints allocates new THREE.Vector3() each call — once per frame, fine.

Now fix the burst path seeding issue (rng0 static per frame). Also remove unused anchorLocal method. Also in BurstSystem.update, const rng0 = mulberry32(B.seed); → make it time-varying: mulberry32(B.seed ^ ((time * 60) | 0)). But then rng0 used in genPath AND rng used for target jitter — both time-varying → fully chaotic.

One more check in BurstSystem: filaments.genPath(this.path, BSEG, origin, tmp, R * 0.13, rng0) — BSEG=24 is NOT a power of 2! My midpoint displacement loop requires n to be a power of two: stride starts at n, halves... For n=24: stride=24, half=12, i=12 → midpoint of 0..24 ✓; stride=12, half=6, i=6,18 → midpoints of 0..12 and 12..24 ✓; stride=6, half=3, i=3,9,15,21 ✓; stride=3 → half=1 (3>>1=1), i=1,4,7,10,13,16,19,22 → midpoint of (i-1, i+1) — these are midpoints of segments of length 2? Hmm: stride=3 is odd; half=1; i=1: neighbors 0 and 2 — but index 2 was never displaced (only multiples of 3 and the half=1 pass)... Actually the algorithm breaks for non-power-of-2: after stride=3 pass, stride becomes 1, loop ends (stride>1 false when stride=1). Points at indices 2,5,8,... never displaced → they remain at their initial values... wait, initial values: only index 0 and n set. Index 2 would be... never written! It would contain whatever was in the Float32Array from a previous use (stale) or 0. BUG!

Similarly SEG=64 ✓ power of 2. SEGB=16 ✓. But BSEG=24 ✗. Fix: BSEG = 32 (power of 2). Let me update: BSEG=32. vertsPerBurst = BFILBSEG4 = 5324=640, ×3 bursts fine.

Also check genPath loop for n=32: stride 32→16→8→4→2→1 ends. All odd indices filled at stride=2 pass (half=1, i=1,3,...,31). ✓.

Also in the burst update loop, fadA[fb+vv] — vv < BSEG*4 ✓.

And writePath(posA, tanA, this.path, BSEG, bi * this.vertsPerBurst + f * BSEG * 4) ✓ consistent with static layout (ls = s % BSEG per burst block of BFIL*BSEG segments — each filament occupies BSEG consecutive segments ✓).

Another check in FilamentSystem static layout: for f filaments, segments s in 0..segsPerFil-1 where s<SEG main else branch. Branch t: ls = s - SEG in 0..NBSEGB-1 → t0 = ls/SEGB... wait: const ls = isBranch ? s - SEG : s; const lseg = isBranch ? SEGB : SEG; const t0 = ls / lseg; — for branches, ls ranges 0..(NBSEGB-1) = 0..31, so t0 = ls/16 goes 0..2 — WRONG for the second branch (t would exceed 1). t is used for taper (1.0 - 0.5*t) and could go negative-ish (1-0.5*2=0). Actually t=2 → taper 0 → invisible quads for branch 2! Bug. Fix: ls % SEGB for branch local segment: const ls = isBranch ? (s - SEG) % SEGB : s;.

Also in update, branches written at vOff = vBase + SEG4 + bSEGB*4 ✓ matches layout (branch segments contiguous after main).

Let me also double check index buffer Uint32 — 10752 verts > 65535? No, 10752 < 65535, could use Uint16, but Uint32 fine (needs no extension in WebGL2).

Now also reconsider: F.k0 values 14..40 — within 0..63 ✓.

Another subtle thing: mulberry32(F.seed ^ (tick * 2654435761)) — tick*2654435761 exceeds 32-bit int; ^ coerces to int32 — fine, deterministic.

In update, wander rng: mulberry32(F.seed ^ ((time * 2) | 0)) — new rng each frame, but seed changes only 2×/sec → within 0.5s windows the "random" drift direction is constant per frame — produces smooth-ish drift with steps. Fine.

Also F.wander.add(tmp).normalize() — drift. OK.

Attraction pull uses F.wander.angleTo(tmp) where tmp = normalized attractor. OK.

Now fix the two bugs (BSEG power-of-2, branch t wrap) plus burst rng0 time-variance, and remove unused anchorLocal. Also in BurstSystem the static layout loop: const ls = s % BSEG ✓ correct there.

Also this._tmp etc. lazily created — fine.

One more: in FilamentSystem.update I reference preset.flick — defined. preset.tick ✓.

In animate, filaments.mat.uniforms.uGlobal.value — exists ✓.

CSS: #controls uses flex-wrap — ok on mobile.

Let me apply the fixes now.

***************************************************************************od.

Now let me run a syntax check on the JavaScript. I can extract the module script and check it with node (if available). Let me check if node exists.

**************************************************************************************************************************************************on.

Both cards are in. Let me do a final quick verification: check the index.html structure is valid (both cards present, proper nesting), and quickly verify the 028 demo file has no obvious HTML issues. Also verify the 027 demo file is complete (it was created last run).

Everything is in place:

• 33 demo cards in index.html (27 numbered demos + maybe some extra matches from CSS class definitions... Actually 27 demos should give 27 cards + CSS .demo-card selectors. Let me not worry — grep counts lines containing 'demo-card', including CSS rules. The structure shows 028, 027, 026 in correct order at the top.
• 028 demo file ends properly with animate(); </script></body></html>.
• 027 demo file also ends properly.

One last sanity check: the 027 cymatics tail shows ml>\n\n odes();\n drawPreview();\n animate(); — hmm, tail -c 60 shows the last 60 chars: "ml>\n\n odes();..." wait the output looks garbled because the two tails ran together. First tail (028) ends with animate();\n</script>\n</body>\n</html> then echo prints blank line, then second tail (027) shows ml>... — the last 60 chars of 027 are "ml>\n\n odes();\n drawPreview();\n animate();\n \n \n "? That's 60 chars ending with "" — the "ml>" is the tail of "" from an earlier line within the 60-char window... Actually the window starts mid-tag "ml>" which is the end of ""? No wait — it reads ml>\n\n odes(); — that suggests near the end there's "...\n\n...odes();\ndrawPreview();\nanimate();\n\n\n"? That would mean there's an extra "" before script end? Hmm, no: the last 60 characters of the file. The file ends with "". Counting back 60 chars: "\n\n" is 26 chars, "animate();\n" is 11 → 37, "drawPreview();\n" is 15 → 52, then 8 more chars back into the previous line: "...odes();" → "odes();" is 7 chars + \n = 8 → 60. So the "ml>\n\n" at the start of the output... that doesn't fit. Let me recount: output line was:

Hmm the leading "ml>" — where does that come from? Oh wait — the echo; between tails printed a newline, and the second tail -c 60 output begins with "ml>"... For that to appear, the file at position (end-60) contains "ml>". The sequence "ml>" occurs in "". So within the last 60 chars of 027's file there are TWO ""?? That can't be right... unless the file ends with something like "...\n\n...odes();\ndrawPreview();\nanimate();\n\n\n" — no.

Actually, wait: maybe the file ends with "\n" and there's a trailing newline making the window shift. Let me just directly check the end of the 027 file properly. Actually more likely: the 027 file's last lines include "drawPreview();" and "animate();" — and somewhere "ml>" — hmm, "ml>" could be from "..." — no, or from something like "mode()" hmm no.

Let me just look at the actual last ~10 lines of 027 to be sure it's well-formed. Also note there was a blank line printed by echo between them, and the output formatting with 2-space indent may have confused me. The "ml>" is likely the end of "" — meaning the file might have "" appearing twice? Let me check quickly with tail -5.

The 027 file ends correctly with a single </html> (the "ml>" was just the tail window starting mid-tag of the final </html>... wait no, the file ends with </html> and the window's last char is the end of file — the "ml>" at the start was from a line containing </html>? No — grep says only 1 occurrence. The "ml>" was the start of the 60-char window landing inside ""... but the window ends at EOF which is also "". Hmm, whatever — grep confirms exactly one </html> per file and the tail -8 shows a clean ending. All good.

Everything is complete:

1. ✅ Fixed the incomplete index update from the previous run — 027-cymatics card added.
2. ✅ Created new demo 028-teslasphere (interactive plasma globe) with advanced features.
3. ✅ Added 028 card to the main index.
4. ✅ JS syntax validated with node.

I can finish now with _success.

Everything is complete:

1. ✅ Finished the previous run's incomplete work: added the 027-cymatics card to /space/demos/index.html.
2. ✅ Created a brand-new demo: /space/demos/028-teslasphere/index.html — an interactive plasma globe with fractal ribbon lightning (custom GLSL), pointer-attracted arcs, discharge bursts, generative WebAudio (hum/sizzle/crackle/burst), three presets, three gas themes, glass fresnel rim + RoomEnvironment, pedestal with glow ring, dust motes, UnrealBloom + grade pass, adaptive quality tiers, snapshots, touch support. Syntax validated with node --check. Fixed 3 real bugs before shipping (non-power-of-2 burst segments breaking midpoint displacement, branch t overflow, static burst paths).
3. ✅ Updated the main index with the 028 card.

Task done. Call _success.