Ferrofluid Demo Creation and Index Update

**********************************************************************************************************************************************************************************************ly.

The file contains " \n <a class..." — the indentation is 6 spaces before the comment (not 8 as I used), and 10 spaces before the <a. The earlier grep output showed 8 spaces but that was the grep output formatting with line numbers. Let me use python to do the insertion precisely.

***************************************************************************************************************************************************************************************************************s).

The index page is updated with the Koi Pond card at the top of the list, and the demo file's module script passes a syntax check. The "Wake up" task said "do as you please" — the previous turn's context indicated the remaining step was updating the index page, which is now done.

I could also create a new demo since the instruction says "Wake up and do as you please" — but the purpose statement says to create cool demos. The last execution (Koi Pond) was completed and the index update was the remaining task. Given the "Wake up" task is open-ended, completing the pending index update satisfies the continuity. But should I create another demo? The task cadence seems to be roughly daily; the last demo was created Aug 28, and now it's Aug 29. The instruction "Wake up and do as you please" gives me latitude. Creating a new demo would be in keeping with the daily pattern.

Let me create a new demo #025. Ideas not yet covered: spinning cube, nebula galaxy, mandelbulb, fluid dynamics, gravity sandbox, event horizon (black hole), sonic reactor (audio), void runner (game), azure odyssey (ocean?), abyssal bloom (deep sea), physarum garden, powder alchemy (falling sand), clockwork nebula, neon rain, aurora borealis, skitter (spiders?), coral resonance, threshold, attractorium (strange attractors), murmuration (boids), terraforge (terrain), cloudsea (volumetric clouds), frostline (frost), koi pond.

New idea: "Ember Forge"? Or "Magnetica" — a ferrofluid / magnetic field visualization with thousands of iron filings aligning to field lines of movable magnets. Interactive: drag magnets around, field lines computed via dipole superposition, filings (instanced elongated boxes) orient along field, with bloom and a dark lab aesthetic. That's visually striking and interactive.

Alternative: "Circuitry" — PCB city flythrough. Or "Origami"? Or "Tidal Lock" — orbital mechanics. Or "Glassworks" — ray-marched caustics? Or "Stormcell" — but cloudsea did clouds. Or "Honeycomb" — bees? Or "Lanterns" — floating paper lanterns at night with wind... Or "Bioluminescent tide" — waves + glowing plankton reacting to cursor. Abyssal bloom may have covered bioluminescence though.

Ferrofluid concept: a shallow dish of black magnetic liquid that spikes (rosenbloom-like instanced cones) under magnets you drag. The "spikes" effect: instanced cones scale by field magnitude at their position; magnets move, field changes, spikes grow/orient. Plus reflection and bloom. That could be striking. Add: multiple magnets (positive/negative polarity), field-line visualization toggle, iron-filing particles mode, audio hum, metaball-ish liquid surface shader.

Let me build 025-ferrofluid — "Ferrofluid" interactive magnetic liquid sculpture:

• Dish of dark glossy ferrofluid.
• Grid of instanced spikes (cones with rounded tips) whose height/orientation follows |B| and B direction from up to 3 draggable magnets (dipoles), each with polarity.
• CPU computes field per spike from dipole formula; or better, GPU vertex shader computes from magnet uniforms (up to 8 magnets) — fully GPU, super fast.
• Spikes get glossy env reflection via a procedural env map or matcap-style shader; highlights bloom.
• Also "iron filings" particle mode? Keep spikes.
• Interactions: drag magnets (visible as hovering spheres, north=red/south=blue), scroll to change strength, right-click to flip polarity, keys 1-3 to add/remove magnets, toggle field lines (computed lines traced on CPU from seeds, drawn as LineSegments with additive glow), turbulence "jiggle" button, presets (star, lattice, waves).
• Post: bloom + vignette/grain grade.
• Audio: magnetic hum whose pitch follows field strength under cursor; clicks on flip.
• UI glass panel consistent with previous demos; hint bar; snapshot; adaptive quality; time-based idle animation.

Implementation plan:

• Three.js r160+ via import map (unpkg), consistent with existing demos. Check what CDN previous demos use.

Let me peek at an existing demo (e.g., 023 or 024) to match style/CDN quickly.

Style confirmed: three@0.170.0 via unpkg import map, glass panel UI, hint bar, toast. Now I'll build 025-ferrofluid — "Ferrofluid — Magnetic Liquid Sculpture".

Design:

• A circular glass dish holding glossy black ferrofluid.
• The fluid surface is covered by an instanced grid of spikes (~90×90 ≈ 8100 instances of a low-poly cone, or use a rounded "spike" geometry via lathe). GPU vertex shader: for each instance at base position (x,z), compute magnetic field B from up to 6 dipole magnets (uniform arrays). Height h = f(|B|) with saturating curve; orientation tilt toward B's horizontal direction. Also idle waves.
• Lighting: matcap-ish custom shading — fake env: key light, rim light, top specular streak; deep black body with blue/purple sheen; tips get a highlight that blooms.
• Magnets: up to 4 draggable magnet orbs hovering above the dish (N glowing cyan, S glowing magenta), each with strength; scroll on selected magnet changes strength/height; double-click flips polarity; drag horizontally moves it; drag with shift (or vertical drag) raises/lowers.
• Field lines toggle: CPU-traced streamlines through the dipole field from seeds around magnets, rendered as additive lines.
• Floor: dark reflective disc with fake reflection of spikes? Simpler: a subtle radial gradient floor + fake planar reflection of magnets (mirrored sprites) — keep it simple: a big dark disc with grid-free studio look, plus soft shadow blobs under magnets.
• Post: UnrealBloom + custom grade (vignette/grain) + OutputPass.
• Audio: WebAudio hum — oscillators whose detune/pitch respond to total field energy near cursor; flip "click"; drag "whoosh" filtered noise. Sound toggle.
• UI: panel with sliders (Spike Height, Field Reach, Idle Motion), buttons (Add Magnet, Remove, Flip Polarity, Field Lines, Presets: Duo/Quad/Ring, Snapshot, Sound), stats (FPS, spikes count).
• Hint bar, toast, adaptive quality (reduce instance count / bloom), keyboard shortcuts.
• OrbitControls with right-drag/two-finger orbit, wheel zoom; left-drag reserved for magnet manipulation; if pointer not on a magnet, left-drag orbits too? To keep intuitive: left-drag on magnet moves magnet; left-drag elsewhere orbits camera. That's easier than koi pond's setup.

Magnet physics in shader: uniform vec4 uMags[6]: xyz = position, w = strength (sign = polarity). B at point p for dipole with moment m along +Y axis: B = (3 r̂ (m·r̂) − m)/|r|³, m = (0, s, 0). Vertical dipoles give nice rosette spikes.

Spike height: h = H * pow(sat(|B| * reach), 0.6) plus tiny idle ripple. Tilt: align cone Y-axis toward normalize(vec3(B.x, |B.y|*k + base, B.z)) — spikes lean toward field direction, mostly upright under a vertical magnet, leaning at edges — looks organic.

Instance placement: hex grid within disc radius R=5; jitter. Instance count target ~ 12k; adaptive.

Also dish: torus rim + glass shader? Keep a metallic rim torus and a subtle glass disc under fluid — fluid base drawn as a dark glossy disc (the spikes sit on it), slight normal ripple in its shader using the same B field for specular streaks. Nice: reuse B function in GLSL for both.

Field lines: CPU trace with RK2 from seeds at circle around each magnet in the XZ plane at spike-top heights... Actually field lines of vertical dipoles live in vertical planes; tracing in the vertical plane through magnet + viewing? Simpler and pretty: trace in 3D from seeds on a small circle around each pole (in the horizontal plane slightly below magnet), integrate along ±B, keep points where within scene bounds, produce LineSegments with additive cyan/magenta gradient. Recompute on magnet move (throttled).

Audio hum: two detuned saws → lowpass → gain; frequency maps from field energy at cursor; plus subtle noise.

Camera: initial at (7, 6, 9) looking at origin-ish; OrbitControls with damping; maxPolarAngle < horizon-ish; min/max distance.

Snapshot: render then toDataURL, download.

Adaptive quality: track EMA fps; tiers: high (spike grid 110 → ~13k instances? Let's compute: hex grid radius 5, spacing s. Area π25 ≈ 78.5; hex cell area = s²·√3/2 ≈ 0.866s². With s=0.16 → ~2830... hmm too few. s=0.11 → ~6000. s=0.09 → ~9000. Use spacing tiers: 0.085 (≈10.6k), 0.105 (≈7k), 0.135 (≈4.2k), plus bloom on/off and pixelRatio caps.

Geometry: custom lathe spike — profile: base radius 0.55*s up to sharp tip with slight bulge (like ferrofluid rosette). Segments: 10 radial × 8 height ≈ 160 tris; 10k instances → 1.6M tris. Too heavy? GPUs handle instanced 1.6M tris OK-ish on desktop, but adaptive tiers help. Reduce: 8 radial × 6 height = 96 tris → ~1M tris at high. Fine.

Shading for spikes (fragment): normal from geometry (need per-instance normal transformed by instance matrix — three's InstancedMesh handles normal via instanceMatrix in shader chunks, but I'm writing a custom ShaderMaterial; include instanceMatrix manually).

Actually simpler: use InstancedMesh with MeshStandardMaterial + onBeforeCompile injection? Custom ShaderMaterial gives more control; I'll write custom with instanceMatrix attribute (three provides instanceMatrix attribute automatically for InstancedMesh even in ShaderMaterial? Yes — when using InstancedMesh, instanceMatrix attribute exists; in ShaderMaterial you must declare attribute mat4 instanceMatrix; yourself... Actually three injects #ifdef USE_INSTANCING attribute mat4 instanceMatrix; in common chunks only for built-in materials. For RawShaderMaterial you declare it. For ShaderMaterial, I believe you must declare it manually; declaring works since the attribute is bound by geometry type. Known pattern: with ShaderMaterial + InstancedMesh, declare attribute mat4 instanceMatrix; in vertex — yes this is a known working pattern (WebGLProgram adds it only for built-ins? There have been issues; but declaring manually works because the renderer binds instanceMatrix buffer by name). Hmm, risk: three may warn about duplicate if it auto-adds. To be safe, I'll use InstancedBufferGeometry + Mesh (non-instanced) with my own attributes — full control, no ambiguity. Positions from aBase (vec3), plus aRand (vec3: random jitter/phase/scale).

Vertex shader computes B, builds rotation matrix aligning +Y to tilt dir, scales Y by h, outputs world pos + normal + color params.

Environment reflections: fake env function envColor(dir): vertical gradient + two "softbox" streaks + horizon glow — gives glossy CGI look. Reflection dir = reflect(-V, N). Fresnel mixes deep black base with env.

Tips glow: emissive = pow(fresnel,3)*tint + highlight when |B| strong (spikes near magnets glow slightly cyan/magenta depending on dominant magnet polarity — pass "energy" and "pol" varying: pol = sign of dominant magnet contribution).

Floor: big circle mesh, shader with radial vignette + subtle reflection of magnet glows (compute fake specular streak from each magnet: distance in XZ, color by polarity) + soft AO ring under dish. Dish rim: torus with standard material (metalness) — or custom to match. Use MeshStandardMaterial for rim + a few studio lights? Mixing standard and custom is fine; but floor is custom too. Rim: simple MeshStandardMaterial metal with two point lights matching key lights — ok.

Magnet orbs: sphere with emissive shader (fresnel glow, N=cyan, S=magenta), plus a PointLight? Lights: keep 2-3 directional/point for rim only.

Also add subtle "polarity ring" sprite under each magnet on the fluid? The fluid glow via spike tint handles it.

Field lines: THREE.LineSegments with vertex colors additive; recompute on change (throttle 60ms). Seeds: for each magnet, ring of 10 seeds at r=0.18 in XZ at magnet height; integrate 120 steps of h=0.06 along ±B (two directions from seed: B and −B). Terminate if out of bounds (r>6.5, y<0.05, y>4) or near another pole (r<0.15). Cap total segments ~ 4 mags×10 seeds×2 dirs×120 ≈ 9600 segs. Fine.

UI/controls per style guide. Presets: Solo (1 magnet), Duo (N+S), Trio, Quad ring (alternating), plus "Orbit" auto-mode toggle where magnets slowly circle — nice idle. Default: Duo with slow auto-orbit? Default Solo center + slow circular drift is instantly pretty. I'll default to Duo orbiting slowly.

Interaction details:

• Raycast pointer to invisible magnet hit spheres (bigger). If hit on pointerdown (left button): capture; horizontal movement maps to XZ plane at magnet height via ray-plane intersect; shift key or vertical wheel adjusts height... simpler: dragging moves in plane of current camera-facing? Use horizontal plane at magnet's y. Wheel while hovering magnet: adjust strength. Double-click: flip polarity. Keys: F flip, +/- strength, L lines, O orbit, H hide UI, S snapshot, M sound.
• Otherwise OrbitControls handles rotate (left), wheel zoom. Set controls.mouseButtons LEFT: ROTATE; we disable controls when dragging a magnet.

Adaptive quality + resize + snapshot + toast + hint.

Audio: start on first gesture. Hum: 2 saw oscillators (55Hz * (1+e*0.5)) → lowpass 300-900Hz → gain 0.05; crackle noise on flip; soft "pluck" when spike energy jumps? Keep hum + flip click + add/remove chime.

Time of writing: aim for a polished ~1200-line file. Let me write it now.

Also stats: FPS + instance count + magnet count.

Let me also double check the pattern used in koi pond for composer: EffectComposer, RenderPass, UnrealBloomPass, ShaderPass(grade), OutputPass from 'three/addons/postprocessing/...'. Yes.

One more consideration: GLSL B-field shared function string used by spike material, floor material, and CPU tracer (JS version).

Write the file at /space/demos/025-ferrofluid/index.html. Then update main index. Then done.

Key GLSL:

Note |B| can be huge near magnet; saturate: e = 1 - exp(-|B|*reach).

Spike height: h = uHeight * (0.06 + e^0.7). Tilt dir: d = normalize(vec3(B.x, max(B.y*0.5,0.0)+ 0.35, B.z))? Real ferrofluid spikes align along field but stand normal to surface under vertical magnet. Leaning by horizontal component with clamp is fine and looks alive. tilt axis-angle from +Y to d.

Dominant polarity: accumulate signed energy: polE += sign(s) * |Bi|; pol = sign(polE).

Rotation matrix: build basis: up=d; pick t = normalize(cross(d, vec3(0,0,1))) (guard when parallel); b2 = cross(d, t). M = mat3(t, d1.0, b2) with y-scale applied to d column: mat3(trad, dhgt, b2rad).

Idle motion: h = 1 + 0.06sin(uTime1.7 + aRand.y6.28 + base.x*0.8) * uIdle; plus slow traveling wave.

Fragment:

• N, V; fres = pow(1 - max(dot(N,V),0), 3)
• env reflection envColor(reflect(-V,N))
• col = base(0.015) + envfressheen + keyLight specular (Blinn) * streak
• emissive tip: tip factor from vTip (local y / height) → glow colored by pol: mix(cyan, magenta, pol*0.5+0.5) * e * fres... Actually glow strongest at tips near magnets: glow = vTip^2 * vEnergy * polColor * 1.2 → blooms.

envColor(dir):

Floor fragment: radial falloff, magnet specular pools: for each magnet, g = exp(-dist²*k) colored by polarity * strength → subtle glow pools beneath magnets; plus faint concentric dish ring; plus vignette to bg color.

Magnet orb fragment: fresnel glow sphere, color by sign uniform per orb — use per-mesh material clone with uColor. Add small PointLight? skip lights; rim uses MeshStandardMaterial... then rim needs lights. Alternative: make rim with custom envColor shader too (torus, metal look via env). Consistent and no lights needed.

Background: scene.background = null; render a big gradient via floor vignette + fog? Set renderer clear color #05060a; floor disc radius ~30 fading to clear color → seamless.

Grade pass: vignette + grain + slight chromatic aberration like previous demos.

Now magnets array management in JS: magnets = [{pos:Vector3, s:float}] max 6. Uniform vec4 array length 6; unused w=0.

Orbit mode: when enabled and user not dragging, magnets i orbit center at radius r_i with phase offsets and bob y; s constant. Pause orbit while dragging.

Presets set positions/polarities.

Sound engine: minimal — master gain, hum oscs, click via noise burst + bandpass, chime via sine env. Map hum freq from cursor energy: compute e at pointer ray-plane point each frame (JS fieldB) → smooth → set osc freq 50+90e, filter 200+1400e.

Spike grid rebuild on quality change: dispose geometry, recreate InstancedBufferGeometry with new spacing. Keep count in stats.

Hex grid: for rows q,r within radius: x = s*(q + r/2), z = sr0.866... include if within R. Jitter ±0.3s. aRand: (jitterX? no jitter stored in aBase), rand3.

Counts: s=0.085 → area-based ~ 10.9k; let's compute tiers precisely in code by generating.

Field lines: BufferGeometry preallocated max verts; drawRange set. Colors: start color by source magnet polarity, fade alpha? LineBasicMaterial vertexColors, additive, transparent opacity .5. Precompute positions+colors each update.

Trace function JS:

inv3 = invinvinv.

Seeds ring around magnet at its position, radius .2, 10 seeds, integrate both directions 140 steps h=.055, bounds r<6.8, 0.04<y<5, stop if near any pole <.14. Push segment pairs.

Throttle recompute: on magnet change set dirty; in animate, if dirty && now-last>70ms → recompute.

Snapshot: composer.render(); canvas.toDataURL → a.download.

Hint text: "Drag magnets · Wheel: zoom / hover-magnet: strength · Double-click: flip polarity · Right-drag: orbit".

Toast for snapshot saved.

OK — also page title "Ferrofluid — Magnetic Liquid Sculpture", demo folder 025-ferrofluid.

Adaptive: fps EMA; every 3s evaluate: if <45 → tier down; if >57 for a while → tier up. Tiers: 0 high s=0.085 pr=min(dpr,2) bloom on; 1 med s=0.105 pr≤1.5 bloom on; 2 low s=0.135 pr≤1.25 bloom off.

Write the code now. Keep it clean and commented. Approx 900-1100 lines.

For ShaderMaterial with InstancedBufferGeometry on a regular Mesh: use new THREE.Mesh(instancedBufferGeometry, shaderMaterial) and set geometry.instanceCount. Three supports InstancedBufferGeometry with Mesh (frustumCulled=false recommended).

Careful: position attribute needed for base cone geometry — I'll build spike geometry manually (non-indexed or indexed fine) and copy attributes into InstancedBufferGeometry via .setAttribute + index. Use **************************try().copy(baseGeo)? copy loses instanced attrs later — set after copy. There's instancedGeo.index = base.index; instancedGeo.attributes.position = ... etc. Use instancedGeo.copy(baseGeo) then add instanced attribs; note copy() of regular BufferGeometry into InstancedBufferGeometry keeps instanceCount default Infinity→ set explicitly. Wait: InstancedBufferGeometry.copy(source) — if source is a regular BufferGeometry it copies attributes+index fine.

Spike profile via LatheGeometry: points: (r, y): (0.5,0) (0.5,0.02) bulge (0.42,0.25) (0.30,0.55) (0.16,0.85) (0.001,1.0) with radius unit scaled by aRand.z in shader? Scale xy per-instance: rad = s*(0.52+0.18*rand). LatheGeometry(pts, 9) → normals included. Lathe profile starts at bottom center? LatheGeometry rotates points (x≥0,y) around Y. Normals OK. Height 1 → scaled in shader.

Tip varying: uv.y of lathe? Lathe sets uv.y along profile — vTip = uv.y. Pass through varying. But instance flattening near base... fine.

Normal transform: with my manual matrix M (orthogonal columns scaled), normal = normalize(M * n) approx (non-uniform scale on Y column distorts; acceptable visually; or scale normal.y by 1/h. Use normalize(mat3(t, d, b2) * vec3(n.x, n.y, n.z)) with rotation only (no scale) — rotation-only normal is better: apply rotation from basis without scale, then it's correct for rigid rotation; height scaling distorts but looks fine for glossy).

World pos: base + M*(pos*vec3(rad, hgt, rad)).

vEnergy = e; vPol = pol; vTip=uv.y; vRand.

Also add subtle "hiss" idle: skip.

Floor: circle radius 40, custom shader: bg gradient dark, magnet glow pools (uniform uMags same array), faint ring at dish radius 5.15, AO under dish r<5.2 darken center slight, plus env-ish horizon? Keep simple.

Dish rim: torus radius 5.15 tube .14, custom metal shader envColor based — implement quick "metal" fragment: envColor(reflect(-V,N)) * (0.25+0.75*fres). Vertex: standard normal transform.

Magnet orbs: sphere r=.22; fragment: core color + fresnel halo; also small additive sprite glow (Sprite with radial texture generated on canvas) for bloom punch. Simpler: just emissive sphere with high brightness → bloom catches it. Use ShaderMaterial outputting color*(2.2) at center → blooms nicely.

Dipole direction vertical — with N up vs down polarity flipping sign.

Now the OrbitControls import from addons. Set enableDamping, target (0,0.6,0), minDistance 4, maxDistance 26, maxPolarAngle 1.45.

Pointer logic: raycaster; magnetHit list of invisible spheres r=.5 at magnet positions (update each frame). On pointerdown left: if hit → dragging magnet index, controls.enabled=false; plane at magnet.y; else controls handle. pointermove: if dragging → set pos from ray∩plane (clamp r<4.6, also update audio). pointerup: end. wheel: if hovering magnet → adjust s (deltaY sign) clamp 0.4..3.0, preventDefault (so no zoom). dblclick: flip sign (raycast). Touch: single touch drag magnet if hit, else orbit (controls.touches.ONE=ROTATE). Pinch zoom. Good.

Height adjust: hold Shift while dragging → vertical plane facing camera to adjust y (0.6..3.4). Or keys R/F? Keep Shift.

UI panel: title FERROFLUID, sub "magnetic liquid sculpture", stats, sliders: Spike Height (0.4..2.2), Field Reach (0.2..1.6 → reach mult), Idle Motion (0..1), buttons: Add ➕, Remove ➖, Flip ±, Lines ⌇ (toggle), Orbit ◎ (toggle), Preset ▾ cycling (Solo/Duo/Trio/Quad), Snap 📷, Sound 🔊. Keyboard: A add, X remove, F flip, L lines, O orbit, P preset, S snap, M mute, H hide.

Wire button handlers.

Now write it. Also update /space/demos/index.html adding card 025 at top.

Let me write the whole HTML carefully in one go. I'll be careful with GLSL loop over uniform array (const int MAXM=6; uniform vec4 uMags[6]; loop with break on w==0).

Grain grade shader:

Audio: class SoundKit with ctx lazy init on first pointerdown; toggle sets master gain.

Hum mapping: energyAtCursor computed from last pointer ray ∩ plane y=0. If none, decay to 0.15 baseline.

Now code. Also ensure type="module" script, importmap three@0.170.0.

One risk: unpkg availability — previous demos use it; fine.

Let me now write the file (~large). I'll write via heredoc to avoid JSON escaping pain? The write tool handles content fine, but heredoc with 'EOF' quoted is safest for special chars. I'll use read_write_file_in_shell_environment write mode with full content — content has lots of quotes/newlines but JSON encoding handles it. It's long though; risk of truncation. I'll write in two chunks: first half via write, append second half via shell cat heredoc. Actually simpler: single write call; the tool supports large content. Koi pond was 54KB; this will be ~45KB. Should be OK. Let me draft mentally and write.

Actually, to reduce risk, I'll build the file with a python heredoc in shell: python writes the content from a triple-quoted string — but heredoc inside execute command with embedded $ etc. Use quoted heredoc 'HTMLEOF' so no expansion. The content itself must not contain the delimiter line. Fine.

I'll go with read_write_file_in_shell_environment write mode, full content. Let me compose the final code.

Details to get right:

• InstancedBufferGeometry + ShaderMaterial: declare attributes aBase(vec3), aRand(vec3). Standard attributes position/normal/uv available.
• instanceCount = count; mesh.frustumCulled = false.
• uniforms shared object for uMags: use same array reference across materials: const magUniform = { value: Array.from({length:6},()=>new THREE.Vector4()) } and in each material uniforms: uMags: magUniform. Sharing uniform objects across ShaderMaterials works (same object reference) — yes, commonly done.
• Update loop writes magnets into the Vector4s.

Line tracing colors: use THREE.LineSegments with Float32BufferAttribute preallocated (maxSeg23 floats). maxSeg = 6 mags12 seeds2*140 = 20160 → 40320 verts. Allocate once.

Compute in world coords; add slight y offset so lines float above spikes — they're in 3D anyway.

Also add magnet "tether" line from orb down to surface? skip.

Idle default: preset Duo with orbit ON — immediately lively.

Camera: fov 42, pos (8.2, 6.4, 10.4).

Floor y=0; spikes base y=0.02; dish rim at y~0.05 torus rotated X 90°. Actually put spikes slightly above floor; floor shader darkens under dish r<5.15.

Background clear color #04050a; also add faint stars? Not needed.

Edge fade: spikes near rim fade height? Multiply h by smoothstep(R, R-0.35, r) so edge spikes shrink — natural dish look. Add: edgeFade.

Also random per-spike phase for idle wave; wave travels: sin(t2 - r2.2 + phi).

uHeight slider default 1.0; h = uHeight*(0.05 + 1.25*pow(e,0.75)) with e = 1-exp(-|B|*uReach).

|B| scale: dipole strength s default 1.4; at distance 1.5, |B| ~ 2s/r³ ≈ 2*1.4/3.375 ≈ 0.83 → reach 1.2 → e≈0.63 nice. Near magnet r=0.6: 2s/0.216=13 → saturates. Good.

Idle baseline 0.05 gives slight bumps everywhere.

Tip glow: gl = pow(vTip,3.0) * vEnergy; col += polColor * gl * 2.0; → bloom.

polColor: mix(vec3(0.35,0.8,1.0), vec3(1.0,0.45,0.95), vPol*0.5+0.5).

vPol from dominant signed energy normalized sign — pass float.

Floor pools: for each magnet project XZ, d2, glow = exp(-d2*1.1)*min(|s|,2)*0.35, color by sign. Add ring: smoothstep ring at r≈5.15 faint metal tint. Base: mix(#05070c center? Actually darker center under dish) radial: col = mix(vec3(0.010,0.012,0.020), vec3(0.004,0.005,0.009), smoothstep(0.,18.,r)) → vignette into clear color #04050a (0.016,0.02,0.04)... make floor fade to exact clear color at r→28: mix toward vec3(0.016,0.020,0.039). Set clearColor same.

Rim torus: radius 5.15, tube 0.16, at y=0.02. env metal shader.

Stats: fps · spikes · magnets.

Snapshot key S conflicts with OrbitControls? No keys bound by default except arrows maybe; fine.

Hint: "Drag magnets · Shift-drag: raise · Wheel over magnet: strength · Double-click: flip · Right-drag: orbit".

Also hide panel with H.

Sound:

Flip → click + chime(220/330 by polarity). Add/remove → chime 520/340.

Adaptive tiers as planned; applyTier rebuilds spike geometry + setPixelRatio + bloomPass.enabled.

FPS EMA: acc frames each rAF; every 2.5s compute; adjust.

Resize handler.

Toast function.

Now, WRITE IT. I'll aim for correctness in one pass; then node-syntax-check the module script (imports stripped), and also validate GLSL braces roughly. Then update index.html with card 025. Done.

Let me be careful writing the vertex shader basis math:

Hmm — spikes should lean toward the magnet horizontally: B horizontal direction near magnet points toward/away from pole. tiltK ~ 0.35 scaled by e: lean = clamp(horiz * 0.5, ...)*e... Simpler robust:

Under magnet center B mostly vertical → upright; off to side leans. But far field B ~ 0 → dir=(0,1,0) due to 2.2 constant → upright.

Rotation:

Check: columns t, dir, bt with bt = cross(t,dir)? Right-handed: t × dir = bt. Let me define t = normalize(cross(dir, vec3(0,0,1))) — arbitrary perpendicular; then bt = cross(dir, t); columns (t, dir, bt): t × dir =? For rotation matrix need det +1: columns c1,c2,c3 valid if c1×c2=c3. Set c2=dir; c1 = normalize(cross(c2, anyNotParallel)); c3 = cross(c1, c2)?? c1×c2 = c3 means c3 = cross(c1,c2). Verify: c1 ⊥ c2, |c1|=1 → c3 unit ⊥ both. det=+1. Good:

Do: vec3 c1 = cross(dir, vec3(0.,0.,1.)); c1 = (dot(c1,c1) < 1e-6) ? vec3(1.,0.,0.) : normalize(c1); vec3 c3 = cross(c1, dir); wait need c3 = cross(c1, c2) = cross(c1, dir). Yes.

Position: vec3 lp = position; vec3 wp = aBase + c1*(lp.x*rad) + dir*(lp.y*hgt) + c3*(lp.z*rad); Normal: vec3 wn = normalize(c1*normal.x + dir*normal.y + c3*normal.z);

hgt = h * (0.9 + 0.2*aRand.z) etc.

vTip = uv.y.

Good. Fragment as planned with envColor shared string appended.

Floor fragment loops MAXM for pools — reuse uMags.

Magnet orb: separate small ShaderMaterial per polarity via uniform uCol (clone material per magnet, update uniform on flip). Orbs added/removed dynamically: pool of 6 orb meshes, set visible per active count. Simpler: create 6 orbs upfront, hide unused. Hit spheres likewise.

Orb fragment:

Plus pulsing: (0.9+0.1sin(t*3+i)).

Drag plane y = magnet.pos.y; ray.intersectPlane(new Plane(vec3(0,1,0), -y)).

Shift-drag vertical: plane normal = camera forward projected horizontal → use plane with normal facing camera: n = normalize(camDirHoriz), constant = -n·magnetPos. Then y from hit point, x/z keep? Moving in that plane changes x/z too — restrict: take only y from intersection. OK.

Wheel strength: s *= (1 - sign(deltaY)0.08)? Use s = clamp(s * exp(-deltaY0.001), 0.3, 3.0).

Now, count lines... just write it.

One more: renderer.outputColorSpace default SRGB in r170; with composer + OutputPass fine. ToneMapping: ACESFilmic, exposure 1.1. My custom shaders output linear-ish colors; with OutputPass they get tone mapped — colors chosen accordingly (slightly brighter). Set bloom threshold 0.85, strength 0.9, radius 0.6.

Alright, writing now. Also remember <canvas> created by renderer appended to #app.

Order of script sections:

1. imports
2. config/state
3. renderer/scene/camera/controls/composer
4. shared GLSL strings
5. floor, rim, spikes (build function), orbs, hit spheres
6. field lines
7. presets/magnets mgmt
8. pointer interaction
9. UI wiring
10. audio
11. adaptive quality
12. animate loop
13. resize, snapshot, toast utils

Let me write the content.

Now let me sanity-check the JS syntax and GLSL braces. Also there's a bug I want to fix in the pointermove handler:

That's leftover confusing code — it just sets orbitR = 0. Let me clean that up. Also check GLSL: in the spike vertex shader I reference uv attribute — ShaderMaterial includes uv attribute automatically (three declares attribute vec2 uv; in ShaderMaterial? For ShaderMaterial, three prepends common attribute declarations including uv, position, normal — yes, WebGLProgram prepends these for ShaderMaterial (non-raw): attributes position, normal, uv, etc.). Good.

Also in floor fragment shader I embed ${GLSL_FIELD} which declares uniform vec4 uMags[6] and functions — and floor material's uniforms includes uMags: magUniform — good. But GLSL_FIELD also gets included in spike vertex shader — fine.

One issue: in GLSL_FIELD, loop for (int i = 0; i < ${MAXM}; i++) — MAXM interpolates as 6. Good.

In spike fragment shader there's uniform float uTime; declared but also... I use uTime? Not used in fragment — declared but unused is fine.

Another issue: geo.instanceCount for InstancedBufferGeometry: renderer uses geometry.instanceCount (default Infinity → min over instanced attributes). I set it explicitly. Good.

composer.setPixelRatio exists on EffectComposer. Good.

Lathe geometry has an index — yes, LatheGeometry is indexed. Setting geo.index = base.index directly (sharing BufferAttribute) — fine since we dispose old geometry... note disposing spikeMesh.geometry (the InstancedBufferGeometry) — the base geometry attributes are referenced by it; dispose removes GL buffers. base geometry itself never added; its attributes uploaded through instanced geometry. Disposal fine.

One concern: rebuilding spikes calls buildSpikeGeometry each time, creating a new lathe — not disposed. Minor leak on tier changes (few times). Acceptable, but let me dispose base after copying: base.dispose() won't free much (CPU-side). Skip.

Potential visual issue: spike radius 0.115 with spacing 0.080 at highest tier — spikes overlap heavily (radius larger than spacing) → looks dense/cluttered at high tier. radius should scale with spacing. Let me pass spacing as uniform uRad: rad = uRad * (0.8+0.45rand) with uRad = spacing0.72. At spacing 0.096 → rad ~0.069 — slightly overlapping neighbors, which gives the continuous "liquid spikes" look. Actually ferrofluid looks better with tightly packed spikes. I'll add uRad uniform updated in applyTier.

Also in the pointermove bug: remove the weird line. And in dragVertical plane setup: dragPlane.setFromNormalAndCoplanarPoint(n, magnets[idx].pos) — good.

Also, hits variable name conflicts with raycast hitsList — fine, I renamed local.

Wait, in pickMagnet: hits.indexOf(...) — hits is the array of hit proxies. OK.

Another check: floorPlane constant = -0.4 → plane y = 0.4 (Plane: n·p + constant = 0 → y = -constant = 0.4). OK.

applyPreset referenced in $('bPreset') before definition? No — applyPreset defined before UI section. Yes it's defined earlier. Good.

applyTier uses rebuildSpikes — defined. Called after all definitions. Good.

In animate: syncMagnetUniforms every frame — fine.

UnrealBloomPass with threshold 0.82: scene mostly dark; orb output col*1.9 with fresnel up to ~4 → blooms. Tips glow up to ~2 → blooms. Good.

Also tier logic: TIERS[0] is lowest quality (fewer spikes). autoQuality: if fps < 44 && tier > 0 → tier-1 (lower quality). Starting tier 2. If fps > 57 and tier < 3 → up. Good.

devicePixelRatio could be < 1.5; Math.min fine.

Camera far 200 fine.

Let me fix the pointermove leftover and add uRad uniform. Then run syntax check with node and a quick GLSL sanity (balanced braces).

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

All checks pass. One thing to double check: in the floor fragment shader I use ${GLSL_FIELD} which itself contains ${MAXM} interpolations — but GLSL_FIELD is a template literal defined earlier with ${MAXM} already interpolated. Good.

However, there's an interpolation subtlety: in spike vertex shader I used ${DISH_R.toFixed(2)} and ${(DISH_R - 0.4).toFixed(2)} — those are inside the template literal — good, "5.00" and "4.60" → valid GLSL floats.

In floor fragment: uMags[i].xz — swizzle of vec4 valid. smoothstep(6.0, 3.0, r) — edge0 > edge1, smoothstep with edge0>edge1 is undefined per spec but works on most drivers (genType clamp). Many demos use reversed smoothstep... it's technically undefined. Better to use 1.0 - smoothstep(3.0, 6.0, r). Let me fix that to be safe. Also check other reversed smoothsteps:

• floor: smoothstep(6.2, 5.0, r) reversed → fix to 1.0 - smoothstep(5.0, 6.2, r).
• smoothstep(26, 4 ...)? I wrote smoothstep(4.0, 26.0, r) — correct order.
• smoothstep(0.22, 0.02, abs(r - 5.35)) reversed → fix: 1.0 - smoothstep(0.02, 0.22, abs(r-5.35)).
• spike vertex: smoothstep(5.00, 4.60, length) reversed → fix: 1.0 - smoothstep(4.60, 5.00, length).
• grade: smoothstep(1.08, 0.32, length(...)) reversed → fix.

In practice GLSL smoothstep with edge0>edge1 gives (undefined but usually) reversed result on ANGLE/desktop GL — but GLSL ES spec says results undefined if edge0 ≥ edge1. Many shaders do rely on it... safer to fix. Let me patch all five.

All good. Also double-check the GLSL ${...} interpolations actually render properly — the ones inside the shader template literals in the final file. Let me simulate the template evaluation in node by evaluating the file's relevant snippets... Simpler: extract the final shader strings by running the module logic? The script imports three — can't run in node easily. Instead, emulate: replace import ... lines and evaluate only GLSL construction? The constants MAXM/DISH_R are defined in the script; the template literals interpolate at script parse time in browser. I can quickly verify by grepping that no literal ${ remains outside of template contexts... Actually ${ sequences are intended inside the JS template literals — they will interpolate at runtime. The concern was only whether expressions are valid JS: new Function check already validated the whole module syntax including template expressions. Good.

One more check — spike vertex shader uses uv attribute: ShaderMaterial prepends attribute vec2 uv;. Yes, WebGLProgram's standard prefix includes uv (and uv1) for non-raw ShaderMaterial. Good.

Also cameraPosition uniform available in ShaderMaterial — yes.

viewMatrix, projectionMatrix, modelMatrix — all in prefix. Good.

LineSegments with drawRange — used correctly.

Also verify there are no leftover hits name conflicts: variable const hits = [] array of proxies; in pickMagnet local hitsList. In pointerdown uses hits.indexOf — fine.

Now update the main index with the 025 card.

Both index entries are in place. Final verification: check the demo page loads logically — can't run WebGL headless here easily, but let me do one more careful review pass of the key risky spots in the final file to catch runtime bugs:

1. applyPreset(1) after applyTier(tier) — applyPreset references linesDirty (declared with let earlier — yes, in field lines section, before presets? Order in file: field lines section defines let linesDirty at line ~... presets are defined BEFORE the field-lines section! Let me check: sections order in my file: magnets (state) with addMagnet referencing linesDirty and sound. sound is defined in the audio section which comes AFTER... addMagnet is only called at runtime (after everything initialized), so function hoisting/closure is fine — linesDirty and sound are module-level let/const declared later; calling addMagnet before their declaration would throw TDZ error. When is addMagnet first called? applyPreset(1) at init section, and $('bAdd') clicks. applyPreset pushes directly to magnets (doesn't call addMagnet) but references linesDirty and toast. Init section is after audio + UI sections? Order: presets → field lines (declares linesDirty) → post → audio (declares sound) → interaction → UI (toast) → adaptive quality (applyTier) → init (applyTier(tier); applyPreset(1)) → animate. So by the time applyPreset(1) runs, all module-level declarations are initialized. Good.

2. sound.chime inside addMagnet — sound initialized (enabled=false, chime no-ops if !this.enabled... chime checks if (!this.ctx || !this.enabled) return; — safe before init.

3. UI section toast function declaration hoisted? function toast — function declaration, hoisted within module scope — fine.

4. In animate: fieldBJS(cursorPlanePoint, _b) — _b reused from tracer; fine.

5. pointer starts (0,0) → center of screen; audio energy computed from center — fine.

6. InstancedBufferGeometry: I set geo.index = base.index — LatheGeometry indexed: yes. instanceCount set. frustumCulled false. Good.

7. OrbitControls + pointerdown: when clicking a magnet, I disable controls AFTER OrbitControls already received pointerdown? OrbitControls attaches its own pointerdown listener on the domElement — both fire; mine sets controls.enabled=false. OrbitControls checks if (this.enabled === false) return; at the START of onPointerDown. Listener order: OrbitControls registered first (created earlier), so its handler runs first → begins a rotate drag, THEN mine disables. Result: camera may rotate a bit during magnet drag start... Actually OrbitControls onPointerDown adds pointermove listeners; when controls.enabled=false, its onPointerMove returns early. The initial rotate state captured but no movement applied because pointermove checks enabled. On pointerup it re-enables? No — my pointerup sets controls.enabled=true. OrbitControls' own pointerup removes its listeners. Slight edge: during drag, OrbitControls state is "rotate" but enabled false → no rotation. Good enough. But wait — OrbitControls.onPointerMove checks enabled? Yes: if (this.enabled === false) return; in onPointerMove.

However there's a subtlety: OrbitControls calls setPointerCapture on its own in onPointerDown... both capturing same element is fine.

Also my pointerdown handler runs when clicking anywhere; only when magnet hit do we disable. OK.

8. renderer.domElement.setPointerCapture(e.pointerId) — fine.

9. Wheel handler: passive false + preventDefault only when hovering a magnet; otherwise OrbitControls dolly handles wheel (its listener also on domElement). Both listeners run: mine doesn't preventDefault when not hovering. Good.

10. dblclick: OrbitControls doesn't use dblclick. Good.

11. bloomPass.threshold 0.82 — after ACES tonemap? Bloom pass operates pre-OutputPass on linear HDR — values >0.82 bloom. Orb outputs up to ~ (0.55+1.7)1.9 ≈ 4.3 → blooms. Tips 1.9e → blooms when strong. Good.

12. Snapshot: composer.render() then toDataURL — with WebGLRenderer preserveDrawingBuffer false, toDataURL right after render in same synchronous stack works. Good.

13. Adaptive: applyTier rebuilds spikes → brief hitch, throttled ≥3.5s. OK.

14. controls.touches = { ONE: ROTATE, TWO: DOLLY_PAN } — but single-finger drag on magnet should move magnet... my pointerdown handler fires for touch too; if touch hits a magnet we capture and disable controls — OrbitControls touchstart similarly checks enabled. Single-finger magnet drag works.

15. Floor circle radius 60, camera far 200 — fine. Floor at y=-0.001 under spikes (y=0.02 bases) — rim at y=0.05 radius 5.35 tube 0.17 → outer edge 5.52; spikes within 5.0; dish shadow ring at 5.35 on floor. Good.

16. spikeMat uRad initialized 0.07 then set by applyTier before first render (applyTier called in init before animate). Good.

17. Line colors additive with fade — fine.

18. In buildSpikes: loops ±64 with spacing 0.15 → span ±9.6 — covers dish; counts: spacing .08 → grid pitch covers radius 5: rows within... z = wrow, w=0.0693, row up to 72 for z<5.1 — my loop caps row/col at ±64 → z max 4.43 < 5! At spacing 0.080, w = 0.0693, max |z| = 640.0693 = 4.43 — the dish edge ring (4.43..5.0) would be EMPTY at high tier! Bug. Need row range to cover DISH_R: rows = ceil(DISH_R / w) + 1 ≈ 74. And cols = ceil(DISH_R/spacing)+1 ≈ 64. Set loop bounds dynamically: rowMax = Math.ceil(DISH_R / w) + 1, colMax = Math.ceil(DISH_R / spacing) + 1. Fix this.

Also count estimate at spacing 0.08: area-based ~ π·25/(0.866·0.0064) ≈ 11,300 — update comment.

Let me fix the loop bounds.

Time is at 51% — I have time to continue. Let me finish validation of the ferrofluid demo: re-run syntax check, verify spike counts per tier via a quick node simulation of the grid math, and do a final headless-ish review. Also verify the index page remains valid.

Grid now covers the full dish at every tier: 4k / 6.3k / 9.8k / 14.2k spikes. Update the TIERS comments to match actual counts (~4k/~6.3k/~9.8k/~14.2k) — cosmetic but keeps code accurate. Also the demo-card description says "up to ~16k" — actual max is ~14.2k; adjust description in the index card to ~14k.

Also, one more runtime concern: default tier = 2 (9.8k spikes, pr ≤1.5). Fine.

Let me also do a final skim of the full file for anything else: check a couple of specific lines — e.g., the $('bFlip') handler uses hoverIdx which is -1 if not hovering → flipMagnet falls back to last magnet. OK.

renderer.domElement.style.cursor — fine.

Also the toast import in applyPreset — hoisted function, called at init — fine since init comes after UI section defines toast function declaration (hoisted anyway).

composer.setPixelRatio — exists in r170 EffectComposer. Yes.

Update tier comments + index description.

Now do a final end-to-end review of the demo file — read through critical sections to catch any last runtime issues. Let me view the interaction and animate sections once more, plus confirm the file's overall integrity. Also, maybe run a real browser test? No headless browser likely available. Let me check if there's a chromium/puppeteer available — probably not in this sandbox, but worth a quick check. If not, rely on static review.

This section looks fine. applyPreset references linesDirty (declared later with let) — but applyPreset is only invoked after linesDirty is initialized (init section runs last). Function declaration hoisting is fine; TDZ only matters at call time. applyPreset(1) is called at init, which is after all declarations. Good.

One thing: applyPreset pushes magnets with phase random — but orbit uses m.phase initialized randomly, meaning initial positions from preset get immediately overridden when params.orbit is true and orbitR>0: on first animate frame, pos.x = cos(phase)*orbitR — snaps from preset position to orbit position. Both on circle of radius orbitR≈preset r... preset p magnitudes: Duo p=[±1.9,...], r=1.9 — matches orbitR=1.9, so snap is just a rotation around the ring — visually instantaneous jump but acceptable (happens on frame 1 before user sees). Fine.

Also m.pos.y += sin(...)*0.0022 drifts y slightly each frame around preset y — clamped. Over time y random-walks within clamp bounds; amplitude tiny per frame, oscillating. OK.

Solo preset: orbitR 1.4 with p=[0,1.9,0] — will snap to ring r=1.4. Intended (slowly orbits). Good.

Now check the rest — interaction and animate sections were reviewed in writing. One last look at the beginning (renderer setup) and end (resize) via quick grep, then finalize. Also verify the hint mentions right-drag orbit while controls LEFT=ROTATE too — hint says "Right-drag / two-finger: orbit" but LEFT also orbits (when not on magnet). Hint could say "drag empty space: orbit". Let me update the hint to be accurate: "Drag magnets · Drag empty space / right-drag: orbit · Shift-drag raises · Wheel over magnet: strength · Double-click: flip". Update both the HTML hint and it's fine.

Also the controls — since LEFT: ROTATE and my pointerdown allows rotate when clicking empty space. Good.

Update hint text.

Everything is in place:

• /space/demos/025-ferrofluid/index.html — new demo, syntax-validated, grid coverage verified, smoothstep portability fixed.
• /space/demos/index.html — 25 cards, 025 at top, 024 (koi pond) added this turn too.

Both the pending task from last turn (index update for Koi Pond) and the new demo for this wake-up turn are done. Check status once more and finish.