Motion Studies — Five Exercises in Fluid Computation

The user wants a full HTML file with 5 different animations, each as fluid and modern as possible. They want me to show off. This is a creative showcase piece — the perfect opportunity to make something memorable. Let me think about what would make this exceptional rather than generic: **Concept**: Instead of just 5 disconnected demos stacked on a page, I'll design it as a curated "motion gallery" — an immersive, single-page experience where each animation takes over the full viewport, with a film-like chapter navigation. Think of it like a design studio's capability showcase — "MOTION STUDIES" with 5 numbered chapters. **The 5 animations** — I want variety in technique, not 5 variants of the same thing: 1. **Particle flow field** — canvas-based flow field with thousands of particles following Perlin-ish noise, leaving trails. Fluid, organic, mesmerizing. I'll implement simplex noise myself (no external lib needed, or I can write a compact noise function). Mouse influences the field. This is a classic but done with real craft (trails via low-alpha fill, velocity-based color/weight). 2. **Liquid blob / metaball** — SVG goo filter with animated blobs, or a canvas metaball with marching squares? SVG filter goo is easier and looks great: several circles moving with spring physics, blurred + contrast threshold = liquid mercury look. Interactive: cursor is another blob that merges. Actually, let me do a canvas-based metaball rendering via SVG filter applied to canvas, or pure SVG circles animated with JS springs. SVG goo with blur+contrast is the reliable, gorgeous route. I'll make it monochrome/electric with a dark background — liquid metal feel. Mouse interaction: cursor attracts/merges. 3. **Kinetic typography** — text that distorts/waves. Each letter on a spring, reacting to mouse proximity — letters repel, scale, weight-shift (variable font weight animation if I use a variable font like "Fraunces" or "Anybody"... Google Fonts has variable fonts). A big word where hovering causes letters to scatter on springs and snap back with elastic overshoot. Very "show-off" and typographic. I could do "FLUID" or "MOTION" as the word. Variable font weight + optical size shifting per letter based on mouse distance would be genuinely modern. 4. **Wave / flag simulation** — a 2D cloth or water surface. A grid of points with verlet integration rendered as lines/mesh, disturbed by mouse. Or a 1D multi-wave interference visualization — layered sine waves with different frequencies that respond to mouse, rendered as smooth filled curves. A "signal" study: multiple translucent wave layers drifting, cursor creates ripples. Canvas, very fluid. 5. **Orbital / generative rotation** — maybe something 3D-ish: a sphere of points rotating, draggable. Pure canvas 3D projection with drag-to-rotate — points on a fibonacci sphere, connected near neighbors, auto-rotating, drag to spin with inertia. This gives the 3D interactivity requirement (draggable/rotatable). Actually let me reconsider the lineup for maximum variety and polish: 1. **01 — FIELD**: Flow field particles with noise, mouse-attracted, trail fade. Organic/chaotic. 2. **02 — MERCURY**: SVG goo metaballs, liquid blob merging, cursor interacts. Tactile/liquid. 3. **03 — TYPE**: Kinetic variable-font typography, spring physics per glyph. Typographic. 4. **04 — SIGNAL**: Layered wave interference / oscilloscope lines with mouse ripples. Minimal/elegant. 5. **05 — ORBIT**: 3D point sphere with drag rotation + inertia, lines connecting close points. Spatial. That's a strong spread: particles, liquid, type, waves, 3D. Each is a different rendering approach (canvas 2D trails, SVG filters, DOM/variable fonts, canvas curves, canvas 3D projection). **Page design**: - Dark, near-black background (#0a0a0b or similar warm-black like #101014 — actually I should avoid generic. Let me pick an off-black with a warm tint, like #0e0d0b, with an ivory/bone text color #ece9e2 and ONE accent — maybe an electric chartreuse? Or warm orange-red? Let me think about the palette. Avoid blue/purple. - Option A: ink black + bone white + signal orange (#ff4d00 style). Very "studio" feel. - Option B: warm black + cream + acid green (#c8ff00). - I'll go with a warm charcoal (#0f0e0c), bone (#e8e4da), and a single accent of vermilion/signal orange (#ff5c1a or #ff4b1f). Each chapter could have its own accent variation? No — restraint: one accent color across the whole piece, maybe slight per-chapter hue shifts within a family (orange → amber → red)? Keeping ONE accent is more disciplined. Actually, giving each of the 5 studies a slightly different accent within a warm family could feel intentional — like each chapter has its own identity. Hmm. Let me do: base bone/ink palette, and each animation uses its own accent: - 01 FIELD: ember orange - 02 MERCURY: chrome/silver (monochrome) - 03 TYPE: bone (typographic, monochrome with accent) - 04 SIGNAL: warm amber - 05 ORBIT: pale copper Actually that risks incoherence. Better: unified accent = signal orange/vermilion throughout, with the mercury one being monochrome silver (which justifies itself). Let me just use one accent (#ff4d00-ish) everywhere. Clean. - Typography: I need a distinctive display font. Not Inter/Roboto. Good candidates on Google Fonts: "Space Grotesk" (a bit overused now but still good), "Archivo" (variable, has expanded widths — great for kinetic type!), "Fraunces" (variable serif, weight+optical+SOFT axes — gorgeous), "Unbounded", "Syne", "Clash Display" (Fontshare). For the kinetic type animation, a variable font with a weight axis is key. "Fraunces" variable has wght 100-900 + opsz + SOFT + WONK — animating wght and SOFT per-letter would be stunning and unusual. Or "Archivo" variable with wght + wdth — animating width per letter is very kinetic-typography. Let me use **Archivo Expanded/variable** for UI/headers? Hmm, mixing: - UI font: something mono-ish for labels — "Space Mono" or "JetBrains Mono" or "IBM Plex Mono" for the small technical labels (chapter numbers, coordinates readouts). Mono labels give that instrument/technical feel. - Display font: "Fraunces" or "Archivo" variable for the big kinetic type and titles. Plan: **"Fraunces"** (variable serif, italic option) for big display moments — a serif in a motion-tech context is unexpected and elegant. **"Space Mono"** or "IBM Plex Mono" for labels/metadata. Body copy minimal. Actually for kinetic type, animating variable font axes per-letter via CSS `font-variation-settings` with JS springs — Fraunces wght 100→900 with soft axis gives letters that "swell". That's genuinely show-off-worthy. Let me load Fraunces variable: `https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap` — I need to be careful with the axis ordering (alphabetical: ital, opsz, wght, then uppercase SOFT, WONK). The URL format: `family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1`. That should work. Simpler: just `family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900` and skip SOFT/WONK to reduce risk. But SOFT axis is fun... I'll include opsz,wght only for safety, and maybe add SOFT. Let me try with SOFT and WONK — Google Fonts does serve these axes for Fraunces. The correct URL: `https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1&display=swap`. Axis tags must be listed alphabetically with lowercase first then uppercase: ital, opsz, wght, SOFT, WONK — yes, lowercase alphabetically then uppercase alphabetically. That's correct per Google Fonts spec. And mono: `family=Space+Mono:wght@400;700` — wait, is Space Mono too common? It's fine, it's not on my avoid list. Or "IBM Plex Mono". I'll use Space Mono for its character. **Structure/navigation**: - Full-viewport sections, scroll-snapped (CSS scroll-snap, mandatory, y). Each section = one study. This gives an instantly-organized feel. - Fixed HUD: top-left wordmark "MOTION / STUDIES", top-right index "01–05", bottom: current chapter title + progress dots/lines. A thin progress rail on the right side showing scroll position with chapter ticks — clicking ticks scrolls to chapter. - Each study has a small overlay: number, title, one-line description, and an interaction hint ("move your cursor", "drag to rotate"). Also maybe a live readout (fps? particle count? cursor coordinates) — live telemetry makes it feel like an instrument. A small mono readout updating per frame in the corner of each canvas: e.g., "N=1200 · 60FPS". That's a nice authored detail. - Signature moment: the transition between chapters? With scroll-snap, transitions are native scrolling. I could add a subtle parallax on the overlay text. Or the signature moment is within study 03 (kinetic type). I'd say the mercury blob study and the kinetic type are the memorable ones. Also the intro: maybe a brief title card as chapter 00? "MOTION STUDIES — five exercises in fluid computation" that fades. Could make the first screen the title + the first study behind it? Simpler: make a compact header inside chapter 01's overlay. Actually adding a title/hero section would make 6 sections... The user asked for 5 animations; I'll keep exactly 5 sections, with study 01 carrying the intro title treatment ("MOTION STUDIES" small kicker above the field — the particles themselves are the hero). Let me now design each animation in detail: --- **STUDY 01 — FIELD (flow field particles)** - Canvas full-viewport. - ~1400–2200 particles (adaptive to screen area, cap by device). - Noise: implement a compact simplex/perlin. I'll write a small 2D value-noise with smooth interpolation and pseudo-random gradient — or classic Perlin with permutation table. Perlin 2D is ~30 lines. curl of noise for flow direction: angle = noise(x*s, y*s + t) * 2π * k, with time evolution (3rd dim approximated by adding t to coordinates or blending two noise samples). Simple approach: angle = perlin(x*scale, y*scale, seed+t) mapped to [0, 4π] for swirls. - Trails: each frame fill canvas with rgba(bg, 0.06–0.08) → motion trails. - Particle drawing: short line segments from previous to current position, stroke color varying by speed — bone at low speed, accent at high speed, low alpha. Line width ~1. Maybe additive-ish blending: `globalCompositeOperation = 'lighter'` for glow-free luminosity buildup — careful, "lighter" on dark bg creates brightness accumulation which looks great for particles without being a "glow effect" cliché. I'll use subtle lighter blending. - Mouse: cursor injects a repulsion/attraction vortex — particles within radius get tangential + radial force (swirl around cursor). - Colors: mostly bone at ~25% alpha, with ~8% of particles in accent orange. Occasional respawn to keep density even. - Readout: particle count + fps. - Also: click to burst? Click spawns a pulse that pushes particles outward — a radial impulse. Nice tactile addition. I'll implement click shockwave (store pulses with position+time, force = f(dist, age)). **STUDY 02 — MERCURY (gooey metaballs)** - SVG with filter: feGaussianBlur stdDeviation ~ 22 + feColorMatrix alpha contrast (0 0 0 25 -11 style) → goo. - Inside the filtered group: a big canvas? No — use SVG `` elements (7–9) animated by JS with velocity/spring physics bouncing softly, plus mouse blob follows cursor with easing (lerp). Circles merge visually when near — goo effect handles it. - Style: fill them with a metallic gradient? Gradients as decoration are something I avoid, but here a radial gradient inside the blob simulates material shading — that's rendering a material, not decorative gradient banners. Hmm, with the goo filter, gradients per-circle still blend fine. But maybe cleaner: solid chrome-ish fill (#dcd9d2) on dark bg with subtle per-circle radial shading (lighter top-left). Actually with goo blur, gradients get blurred together — solid fill with the filter gives clean liquid silhouette. To add material depth: after the goo silhouette, overlay an unfiltered highlight? Complicated. Alternative: render metaballs in canvas with marching squares? Too heavy. Simpler high-quality route: goo SVG with solid bone/chrome fill, and give the group a second copy slightly offset in accent color behind (depth/shadow) — no, keep it clean: single silver silhouette, plus small floating droplets, plus cursor blob. The elegance is the motion: circles with different masses, gentle attraction to center, cursor blob with lag. Also the big blob slowly deforms because constituent circles orbit each other. Wait — to make it richer: circles' radii pulsate slowly (sin), positions follow wandering attractors. And on click: blob splits — a burst of droplets ejects with physics then gets re-absorbed (spring back). That's a memorable interaction: click → splash. Physics: each circle: home position (drifting via noise or lissajous), spring to home, mouse blob = lerped cursor, plus circle-circle soft collision (repel when overlapping beyond sum minus merge threshold... actually goo looks good when they overlap; keep mild repulsion so they don't fully stack). On click: apply outward impulse to all circles from click point; springs pull them back → natural splash/recovery. Fill: I'll do a subtle vertical linear gradient from #f0ede6 to #b9b5ac to suggest chrome. Material shading, fine. Or keep solid #e8e4da. Let me do a very subtle gradient — it reads as material, not decoration. Also add a tiny inner detail: a few smaller dark circles inside the blob group? No, the goo applies to everything in the group. Keep it pure. Background for this chapter: slightly different? Maybe a very dark warm gray same as global. Add faint grid or crosshair marks? A large thin circle outline behind the blob (like a petri dish / lens) — a thin 1px bone circle at 12% alpha, giving composition. Plus corner registration marks. Nice. **STUDY 03 — TYPE (kinetic variable font)** - Big word. "FLUID"? "MOTION"? Given the piece is called Motion Studies, the word could be "FLUID" — 5 letters, nice. Or "MOBILE"? "FLUID" it is. Each letter a ``. - Each letter has spring physics on: offsetX, offsetY, scale(?) driven by mouse proximity — letters near cursor get pushed away (or pulled) and their variable font weight increases with proximity (wght 100→900) and maybe opsz. Also slight rotation based on horizontal velocity. - Springs: stiffness/damping tuned for elastic wobble (overshoot). Update via transform: translate + rotate; font-variation-settings via style. - Idle behavior: when no mouse for a while, a wave passes through letters automatically (sine-based target weight/offset), so it's alive on load and on scroll into view. - On click: shockwave through letters — sequential impulse with delay by distance from click. - Also letters could be huge — font-size: clamp(6rem, 22vw, 20rem). Fraunces with high opsz looks sharp. Add italic on hover? Maybe wght + slight per-letter baseline shift. - Layout: word centered, small caption below "hover to disturb the set · variable axes: wght / opsz". - Readout: show live wght of nearest letter? Cute: "wght 842 · opsz 144". I'll show nearest letter's weight in the telemetry line. - Performance: 5 letters, trivial. For extra flair, letters could have mixed italic/roman? Keep roman. Also entering animation when the section scrolls into view: letters rise in with stagger (IntersectionObserver adds class; CSS transition). **STUDY 04 — SIGNAL (wave interference)** - Canvas. Several stacked horizontal lines (say 4–6 "layers") across the width, each a composite of 3–4 sine waves with slowly drifting phases/frequencies, drawn as smooth polylines. One main line bright bone, others dimmer. Actually better: ONE hero waveform, large, centered, with a mirrored reflection? Or stacked like a seismograph / Joy Division? "Unknown Pleasures" style stacked ridgelines is iconic but maybe cliché. - Alternative: a single elegant oscilloscope line whose amplitude envelope is modulated by mouse Y, frequency by mouse X, with a ghost trail (previous states fading). Plus a secondary thin line offset as "echo". - I like: three lines — hero (bone, 2px), echo (accent, 1px, phase-shifted), ghost (dim, phase-shifted more). Mouse X controls base frequency/wavelength, mouse Y controls amplitude; moving the mouse quickly injects a "pluck" — a traveling Gaussian pulse along the line (like plucking a string) that propagates and decays. Click = big pluck. That's fluid and physical: implement as a set of traveling pulses: each pulse has origin x, direction, speed, amplitude, decay; wave y = Σ sines + Σ pulse gaussians centered at (origin + dir*speed*t). Plucks on mousemove when speed exceeds threshold, or continuous: amplitude envelope follows cursor y with easing. - Even richer: draw vertical connecting hairlines from a baseline to the wave (like an audio bar/waveform hybrid)? Might clutter. Keep clean curves + maybe small tick marks along a baseline axis with mono labels (like an instrument). A horizontal ruler line with ticks and "0.00 / 1.00" labels — instrument aesthetic. And a live readout "f 1.24Hz · A 0.62". - Idle: gentle autonomous breathing so it never looks dead. - Trails: instead of full clear, translate previous frame down slightly? For scope-phosphor feel: fade with rgba fill at low alpha → previous waveforms ghost away. That's beautiful and "authored". Yes: phosphor decay trails. **STUDY 05 — ORBIT (3D point sphere, draggable)** - Canvas 3D: ~350 points on a fibonacci sphere, plus maybe rings (points along 2–3 great circles). Project with perspective. Auto-rotate slowly; drag to rotate with inertia (angular velocity decays). Also mouse wheel to zoom (clamp) — adds interactivity, and pinch not needed. - Connections: draw lines between points closer than threshold in 3D — O(n²) with 350 points = 61k pairs per frame; fine (or precompute neighbor pairs once since points are fixed relative to each other — yes! The sphere is rigid; connections never change. Precompute pairs once). Lines alpha by depth. Points sized by depth, some accent-colored (e.g., 6% accent). - Interaction extra: hover proximity — points near cursor (in screen space) brighten/scale? With drag rotation, that's enough. Maybe click emits a ripple through connection lines (pulse of brightness traveling by 3D distance from clicked point). Nice: click → wave of illumination across the network, radiating from the nearest projected point by 3D geodesic distance. That's a genuine signature detail. Implement: on click, set pulseOrigin (3D point), pulseTime; each line brightness += gaussian(now - pulseTime - dist3D*factor). - Rendering order: painter's sort not needed for points/lines with alpha; but draw back-to-front roughly for lines? With low alpha it's fine without sorting; points: sort by z cheap (n log n of 350, fine). - Readout: "θ 0.42 · φ 1.13 · ω 0.03" angular readouts — instrument vibe. And "drag to rotate · scroll to zoom". --- **HUD/Chrome details**: - Top bar: left "MOTION STUDIES" (mono, small, letterspaced) + a small dot separator + "FIVE EXERCISES IN FLUID COMPUTATION". Right: local clock? or "SCROLL ↓"? Right side: chapter counter "01 / 05" updating. - Right edge: vertical progress rail with 5 ticks; active tick is accent, elongated; click to jump. - Bottom-left: current chapter big-ish label? Each section has its own overlay text; the fixed HUD bottom can show interaction hint for the active chapter, updating via IntersectionObserver. Or keep hints inside sections. I'll put per-section info within each section (position absolute) and keep the fixed HUD minimal: top bar + right rail + bottom-right fps/telemetry global? FPS global top-right next to counter. Hmm, per-canvas readouts I planned per-section. Let me consolidate: fixed bottom-left shows active chapter index+title (e.g., "01 — FIELD"); each section itself shows description + hint; per-canvas telemetry small in each section's corner (mono, dim). That might be a lot of text — keep it disciplined: per section: number (huge, outlined? no—), title, one-liner, hint. Telemetry inside the canvas area top-right small. Actually let me lay each section as: content fills viewport; text overlay top-left inside section: "01" small mono + rule line, title in Fraunces italic medium size, one-line description in mono dim. Hint bottom-center small mono with a tiny animated indicator. Telemetry top-right of section (mono, dim, updating). - Cursor: custom cursor? A small crosshair/dot custom cursor that scales on interactive hover would add craft. I'll add a fixed dot + ring following with lag, hidden on touch devices, `mix-blend-mode: difference` for flair. Careful: it should not interfere. Ring lerps to cursor; on mousedown ring contracts. This is a nice touch. Keep native cursor hidden only on desktop pointer:fine via media query. Also each canvas already shows effects at cursor. I'll make the custom cursor a small circle outline; on click it pulses. Use blend difference so it's visible over everything. - Intro: on load, a brief overlay? Maybe a 1.2s "curtain" reveal: the wordmark splits and reveals — could be nice but adds risk. A simple elegant load-in: HUD elements fade/slide in with stagger, chapter 01 text reveals. Keep it CSS keyframes with delays. Good. - Scroll snap with `scroll-snap-type: y mandatory` on the scroll container. Each section `scroll-snap-align: start`, `height: 100vh` (use 100svh for mobile? For canvases, fine with 100vh; use `100dvh` maybe). I'll set sections `height: 100dvh` fallback 100vh. - Reduced motion: respect `prefers-reduced-motion` — I could pause auto-animations... For a showcase, I'll at least tone it down or skip. I'll add a check to reduce particle counts and disable auto-rotate? Simplest: if reduced motion, render static-ish (slow). I'll mention lightly; implement: lower speeds. Keep it simple: multiply global time scale by 0.3? Eh — I'll skip heavy handling but add a small note? For craft, I'll implement: if reduced-motion, timeScale = 0.25 and no click bursts auto. Fine, minimal. **Resize handling**: canvases sized to their section with devicePixelRatio (cap at 2). On resize, re-init sizes; re-seed particles for FIELD. **Performance**: Only animate the visible section — use IntersectionObserver to track active index; run only active study's rAF work (others skip drawing but keep time). Actually keep one global rAF loop, and each study has `update(dt, t)` called only when active (or when partially visible). This keeps 5 canvases from all running. **Fonts in canvas**: for canvas text (readouts) I'll use DOM elements instead of canvas text — easier and crisper. Telemetry as absolutely-positioned mono divs updated via textContent. **Now let me write the code.** This will be long (~1000+ lines). Let me be careful and systematic. HTML skeleton: ```html Motion Studies — Five Exercises in Fluid Computation

...

... x5

...

``` Wait — scroll container: if I use a custom scroll container (#scroller with overflow-y auto, height 100dvh), window scroll events won't fire normally; IntersectionObserver with root: scroller works. Or use body as scroller (normal document scroll with snap on html). Simpler: put scroll-snap-type on `html` and sections are direct children in normal flow. IntersectionObserver default root (viewport) works. I'll do document-level scroll. CSS variables: ```css :root{ --ink:#0e0d0b; /* warm near-black */ --ink-2:#141311; --bone:#e9e4d8; /* warm bone */ --bone-dim:rgba(233,228,216,.55); --bone-faint:rgba(233,228,216,.22); --accent:#ff4d00; /* signal orange */ --mono:'Space Mono',monospace; --serif:'Fraunces',serif; } ``` Hmm, #ff4d00 pure signal orange. On dark warm bg it pops. Good. Maybe slightly softer: #ff5a1f. I'll go #ff4d00. Sections: `position:relative; height:100dvh; overflow:hidden; scroll-snap-align:start;` Each section content: - `.meta` top-left: `

Field

…

` - `.tele` top-right (mono, dim): `…` - `.hint` bottom-center: mono small with a small pulsing marker. Title styling: Fraunces, italic, size clamp(2.5rem, 6vw, 5rem), opsz high. Keep titles modest size since animations are the hero. Right rail: fixed right: vertical line with 5 buttons. Top HUD: fixed, mix-blend-difference? Might mess with accent color. Keep normal with backdrop of nothing (transparent, text has enough contrast since canvases are dark). All canvases dark, so bone text works everywhere. Custom cursor: two fixed elements; media (pointer:fine) only. `body{cursor:none}` under that media query — but careful: cursor none on everything including rail buttons. Yes, custom cursor handles feedback (ring expands over clickable: add data-hover listeners scaling ring). Now JS architecture: ```js const studies = [field, mercury, type, signal, orbit]; // each an object with init(), resize(), update(dt,t), el, active let activeIndex = 0; IntersectionObserver on sections: set active flag; also update HUD (counter, bottom label, rail). Single rAF loop: t, dt clamped; call active study update. ``` Mouse tracking: global mouse position per study (relative to each canvas) — compute per update from clientX/Y and canvas rect (cache rect on resize/scroll? getBoundingClientRect each frame is okay-ish for one canvas; but better cache on scroll+resize). Since sections are full viewport and only one active, canvas rect = section rect; on scroll it changes... Actually each section occupies full viewport when active, so canvas coordinates ≈ client coordinates offset by rect.top which is ~0 when snapped (during transition it's moving). To keep it simple and correct: compute rect once per frame only for the active canvas — one getBoundingClientRect per frame is acceptable. **STUDY 01 — FIELD implementation details** Perlin noise 2D + time: I'll implement 3D-ish by using 2D noise with time as an offset via domain shift: angle = noise2(x*s + t*0.1, y*s - t*0.07) — gives evolving field but with directional bias; acceptable and common. Better: blend two 2D noises: n = lerp(noise(x*s, y*s + t), noise(x*s, y*s - t*... )) — overkill. Simple time-shift is fine visually. Actually classic: use a permutation-based Perlin with 3D implementation? 3D Perlin is ~60 lines. Hmm. Let me write compact 3D value noise with smooth interpolation (value noise is simpler than gradient): ```js // hash function hash3(x,y,z){ ... deterministic pseudo-random [0,1) } ``` Value noise quality is okay for flow fields. But gradient (Perlin) looks better. Alternative approach many use: pseudo-simplex via sin hashing: `angle = sin(x*a + t) + sin(y*b + t*1.3) + sin((x+y)*c)`... cheap trig fields look decent but repetitively "sin-y". I'll write a proper 2D Perlin with permutation table, and evolve time by rotating/moving sample coordinates along two diagonals and mixing: ```js const n1 = perlin2(x*s + t*0.06, y*s + t*0.02); const n2 = perlin2(x*s - t*0.04 + 31.7, y*s - t*0.05 + 11.3); angle = (n1 + n2) * PI * 2; // range approx [-2,2]*2π ``` Hmm mixing two gives evolving interference — good. Or simpler: one perlin, angle = n * 2π * 2, and slowly rotate all vectors by t*0.02? That makes global rotation which looks like a vortex — actually pretty. I'll do: base angle from perlin(x*s, y*s + t*0.08) — vertical drift of the noise domain makes the field slowly flow upward — coherent evolution. Let me use perlin2 with offset t in the y-argument: angle = perlin2(x*s, y*s - t*0.1) * TWO_PI * 2. Wait, that makes field features scroll upward continuously — particles will follow a scrolling pattern — actually looks like drifting currents: good. Perlin 2D implementation (classic): ```js const PERM = new Uint8Array(512); (function(){ const p=new Uint8Array(256); for(let i=0;i<256;i++)p[i]=i; // shuffle with seeded rng for(let i=255;i>0;i--){const j=(rng()* (i+1))|0; [p[i],p[j]]=[p[j],p[i]];} for(let i=0;i<512;i++)PERM[i]=p[i&255]; })(); function fade(t){return t*t*t*(t*(t*6-15)+10);} function grad2(h,x,y){ switch(h&7){case 0:return x+y;case 1:return -x+y;case 2:return x-y;case 3:return -x-y;case 4:return x;case 5:return -x;case 6:return y;default:return -y;} } function perlin2(x,y){ const X=Math.floor(x)&255, Y=Math.floor(y)&255; x-=Math.floor(x); y-=Math.floor(y); const u=fade(x), v=fade(y); const a=PERM[X]+Y, b=PERM[X+1]+Y; return lerp(v, lerp(u, grad2(PERM[a],x,y), grad2(PERM[b],x-1,y)), lerp(u, grad2(PERM[a+1],x,y-1), grad2(PERM[b+1],x-1,y-1))); } ``` (lerp(t,a,b)=a+t*(b-a) — note argument order.) Particles: ```js count = min(2000, floor(w*h/900)); p = {x,y,px,py, life, hueType(0 bone /1 accent), speed} update: a = fieldAngle(x,y,t); vx += cos(a)*F; vy += sin(a)*F; // force // mouse swirl: dx=x-mx, dy=y-my, d2=dx²+dy², R=160 if d2 ?? ``` The classic goo: blur + contrast on alpha. The feComposite atop trick keeps crisp edges of original on top — for a single-color blob not needed; just blur+matrix gives smooth merged silhouette (edges slightly soft but with high contrast matrix they're fairly crisp). Standard values: stdDeviation 10–20 depending on size, matrix alpha row: `0 0 0 30 -14` (needs tuning: with blur alpha, contrast 30 and offset -14 gives crisp-ish). I'll use stdDeviation 16, values "1 0 0 0 0 / 0 1 0 0 0 / 0 0 1 0 0 / 0 0 0 28 -13". Colors: fill #e8e4da solid, or gradient. I'll use a linearGradient (subtle, top-lit): stops #f2efe8 → #c9c5bb → #8f8c84? A three-stop vertical gradient reads as chrome-ish shading. Subtle. ViewBox coordinates: use a fixed viewBox 1200x800 with slice; but mouse mapping then needs conversion. Alternatively size SVG to section pixel size (JS sets viewBox to actual size). Simpler: on resize set `svg.setAttribute('viewBox','0 0 w h')` and position circles in CSS pixel space. Do that. Circles: N=8, radii 30–95. Home positions arranged around center in an organic cluster (random ring radius 120–260 around center, biased to middle). Motion: each has phase-based wander: home(t) = center + (Rc*cos(θi + t*wi), ... ) using lissajous with distinct freqs (0.1–0.3 rad/s) and small vertical squash. Physics per frame: ```js target = home(t) ax = (target.x - x)*k (k~2.5) ; vx += ax*dt; vx *= damp(0.90 per frame @60 → use pow) ``` Spring-damper with dt-aware damping: `v *= Math.exp(-d*dt)`. Mouse blob: separate circle, position lerps to cursor (or rests at center-right when idle): `mx += (tx-mx)*Math.min(1, dt*6)`. Radius 46, pulsing slightly. It participates in group → merges with the cluster when cursor passes through. Circle-circle separation: for i` only. Also can reduce via `will-change`. Acceptable. Fallback: if rendering is slow, whatever — it's fine. Alternative safer: canvas-drawn metaballs with alpha-threshold? Doing threshold per-pixel is heavy in JS. SVG goo is the right call. Mobile: also respond to touchmove → update cursor pos. **STUDY 03 — TYPE** HTML: ```html

FLUID

``` Word choice: "FLUID". Fraunces italic? Roman with high contrast. font-size: clamp(7rem, 24vw, 22rem). font-variation-settings base: 'opsz' 144, 'wght' 340, 'SOFT' 0, 'WONK' 1 (WONK gives quirky letterforms — fun!). Actually WONK 1 makes some letters wonky (leaning) — could be charming. I'll animate wght and SOFT; keep WONK 0 for cleanliness? WONK on "FLUID"... try WONK 1; the N won't appear in FLUID; wonk affects mainly N, and italic forms? Fraunces WONK affects some glyphs. I'll set WONK 0, SOFT animated 0→100 (softness rounds terminals — visible morph), wght 100→900. opsz 144 fixed. Per-letter spring state: x, y, rot, wght(current), targets computed from mouse: - dx = letterCenterX - mouseX etc, d. - influence = exp(-(d/180)²) - target offset: push away: dir*(influence*46) — plus lift: y target = -influence*30? Repel in both. - wght target = 150 + influence*750 (light far, black near). SOFT target = influence*100. - rotation target = (letterVX)*0.04 clamped — from velocity for lag feel. - Spring integrate each channel: v += (target-cur)*k*dt; v *= exp(-damp*dt); cur += v*dt. Idle wave: when mouse idle >1.5s (or mouse never over section), targets = wave: wght = 200 + 260*(0.5+0.5*sin(t*2 - i*0.9)); y = 14*sin(t*1.6 - i*0.9). Ensures living idle. Click: impulse to each letter velocity away from click with magnitude ~ falloff, plus weight spike decaying. Also mouse tracking only when over this section (active anyway). Use viewport coords; letter centers via getBoundingClientRect cached on resize + on font load (layout may shift after font swap — recompute rects each frame? 5 rects/frame is cheap; do it every frame to be safe. Actually getBoundingClientRect on spans each frame: 5 calls, negligible). Entrance: letters start translateY(110%) inside overflow hidden wrapper, transition to 0 with stagger when section active first time. I'll do IntersectionObserver-based `.in` class, CSS transition 0.9s cubic-bezier(.16,1,.3,1) with per-letter delay. But JS also sets transform per frame — conflict: JS transform overrides entrance. Solution: wrap each letter in an outer span for entrance (translate) and inner span for physics (JS transform). So `.k > .ki`. Outer handles entrance via class; inner gets JS transform + font-variation. Also caption: "hover — weight & softness respond · click to shock". Readout shows max wght: "wght 731 / soft 62". **STUDY 04 — SIGNAL** Canvas. Wave function: ```js y(x,t) = Σ_k A_k * sin(x*f_k + t*w_k + φ_k) * env(x) + Σ_pulses pulseContribution ``` Envelope: global amplitude follows targetAmp (from mouseY, eased). Frequency base from mouseX (0.006–0.02 px⁻¹), eased. Pulses (plucks): triggered on pointermove when pointer speed > threshold (with cooldown 120ms) and on click (bigger). Pulse: {x0 (px position), v (px/s ~ 260), born, amp (depends on pointer speed), sign}. Contribution at position x: gaussian centered at xc = x0 ± v*age, width σ=40: amp * exp(-((x-xc)/σ)²) * decay(age) — but a traveling gaussian is one-sided; real string pluck splits into left+right traveling waves: spawn two pulses with dir -1 and +1. Decay: exp(-age*1.4). Remove when age>4 or amplitude tiny. Reflection at edges? Could reflect (invert) at boundaries — fun but let's just let them exit; or wrap? Let them travel off and die. Superposition with sines: total amplitude clamp to avoid extremes. Render with phosphor trails: each frame `fillStyle rgba(ink, 0.14); fillRect` — leaves fading previous curves. Lines: - baseline ruler: horizontal center line, 1px bone-faint, with tick marks every 80px (4px tall) and end labels ("-1", "0", "+1")? Draw ticks in canvas each frame (cheap) or once? Trails would erase... The fade fill covers everything each frame by 14%, so static elements must be redrawn every frame. Fine — redraw ruler each frame; it stays crisp (redrawn at full alpha over faded). Actually redrawing a faint line at alpha 0.2 over residue accumulates to higher effective alpha — the line will reach its steady state quickly; it's fine since it's redrawn consistently. - 3 wave layers: main (bone, lw 2, alpha .9), echo (accent, lw 1, alpha .8, same wave but sampled with slight time offset +0.18s and amplitude*0.9 — appears as phosphor-precise companion), ghost2 (bone-faint, alpha .25, time offset 0.36). Time-offset copies of the same field create a beautiful echoplex effect with the trails. - dots at sampling points? No — pure curves, maybe with occasional sample points on main line every 48px (1.5px dots bone-faint)? Adds instrument feel. Optional — small dots at the pulse centers? Skip; keep lines clean. Maybe a small circle marker traveling along the main wave (a "read head") at x = mouse x? The read head: vertical thin line at cursor x with a dot at wave intersection, plus label showing y value — very instrument-like! Draw: vertical hairline at mouseX (bone-faint), dot at (mouseX, y(mouseX)) accent 3px, and readout handled by telemetry div. Nice detail. When pointer idle/absent, read head drifts sinusoidally. Mouse Y sets amplitude directly (0.08–0.42 of height). Mouse X sets frequency. Eased with lerp. Click: also a "reset/damp"? Click = big pluck. Good. Readout: `f 0.83 Hz · A 0.41 · pulses 2`. **STUDY 05 — ORBIT** Canvas. Points: fibonacci sphere N=320: ```js for i: y = 1 - 2*(i+0.5)/N; r = sqrt(1-y²); θ = i * goldenAngle; x = cos θ * r; z = sin θ * r; scale by R (min(w,h)*0.30) ``` Plus 2 orbital rings: rings of points at radius 1.25R and 1.45R in tilted planes (tilt angles fixed relative to sphere so they rotate together). Ring points: 90 each. Connections: precompute pairs among sphere points with chord distance < threshold (tune so each node has ~2–4 edges: for N=320 on unit sphere, average nearest neighbor distance ≈ sqrt(4π/N)≈0.198; threshold 0.24 gives few neighbors each). Also connect ring points consecutively (ring line). Maybe also connect some sphere points to rings? Keep: sphere mesh + two rings drawn as polylines. Rotation: quaternion-free — maintain rotation as incremental rotations: keep a 3x3 matrix `M`, each frame rotate by small angles around screen Y (yaw from auto + dragVx) and screen X (pitch from dragVy): M = rotX(pitch)*rotY(yaw)*M. Applying to points: p' = M·p. Perspective: after rotation, z' depth: scale = persp/(persp - z*R) — define camera at z = -D, D~3.2R; s = D/(D + z) with z in [-R, R] → s in [D/(D+R), D/(D-R)]... careful sign. Use: `s = fov/(fov + z)` where fov=3.2R? If z ranges ±R (R being radius in px, e.g., 260), fov ~ 900: s = 900/(900+z) → z=+260 (far) s=0.776, z=-260 (near) s=1.406. Then screen x = cx + p.x*s*? Wait p already in px (x up to R). Projected = cx + x*s. Hmm with p in px and s factor — at z=-R, s=1.4 magnifies near points. Good. Zoom: wheel adjusts `viewScale` 0.6–1.6 with easing. Multiply R_effective = R*viewScale — but rotation math uses unit vectors; projection multiplies. Points stored unit; rotated unit; then screen = cx + ux*Rv*s_z where Rv = R*zoom and s_z uses z = uz*Rv? Cleaner: work in unit space for rotation; for projection use world = u*Rv; s = fov/(fov + world.z); sx = cx + world.x*s; sy = cy + world.y*s. Yes. Drag: pointerdown → track; movementX → yawVel += dx*0.004 (impulse) while dragging rotate directly: yaw += dx*0.005, pitch += dy*0.005 (clamp pitch? with matrix accumulation no clamp needed — free tumble feels good). On release, inertia: yawVel decays *exp(-2*dt). Auto-rotate adds small constant yaw when idle (blend in when |yawVel| small). Matrix approach: maintain m[9]; each frame compose: M = R_delta * M where R_delta = rotY(dYaw)*rotX(dPitch). Implement rot matrices multiply. Normalize occasionally (Gram-Schmidt every frame or every N frames to avoid drift) — with dt-based small rotations drift is slow; re-orthonormalize cheaply each frame: it's 9 elements, fine — implement orthonormalization. Edges precompute: pairs where dist3D < 0.34 (unit) — I'll compute avg spacing: for N=320, typical nearest ~0.2; threshold 0.33 maybe gives avg degree ~4-6. I'll tune: use threshold = 1.9 * (4π/N)^(1/2)? Let me just use 0.30 and it'll look fine. Cap total edges maybe 900. Render: compute all rotated points (350), store sx, sy, z. Sort indices by z (far first). Edges: draw with alpha = base * depthFade(avg z) — stroke each edge individually (300–800 strokes/frame, OK). Line width 1 * depthfade. Color bone at low alpha; a subset of nodes accent: color nodes where i%37==0 accent → their edges also accent? Edges take color from... keep edges bone, nodes: 8 accent. Pulse on click: find nearest projected node to click → record its index + t0. Brightness boost for node & its edges: b = exp(-(age*speed - dist3D(p, origin))²/w) — traveling illumination wave through 3D. Edges brighten with max of endpoints' wave value; nodes too (radius bump). Beautiful. Also slow "breathing": radius modulation tiny. Points: radius 1.2–2.2 * s; accent nodes slightly bigger with tiny halo? no halo — just solid accent dot. Readout: "nodes 320 · edges 743 · ω 0.12". Hint: "drag to rotate · scroll to zoom · click to pulse". **HUD bottom**: fixed bottom-left: `01 — FIELD` updates on active change; bottom-right: global hint? The per-section hints already exist; bottom bar: left: index+title; right: "MOTION STUDIES © 2025"? A little mono colophon. Keep: bottom-left chapter label, bottom-right "SOUND OFF / 60FPS"? Just put live FPS global bottom-right — instrument vibe. FPS computed via EMA. **Rail**: fixed right center: 5 items, each: small tick line + on hover label. Active: accent, wider. Click → sections[i].scrollIntoView({behavior:'smooth'}). Note scroll-snap + programmatic smooth scroll works fine. **Top HUD**: left: "MOTION STUDIES" bold mono + slash + "five exercises in fluid computation" dim. Right: "01 / 05" counter. **Mobile responsiveness**: sections stack fine; text sizes clamp; type word scales via vw; flow field particle count scales with area; mercury fine; orbit fine. Custom cursor disabled on touch (media pointer:coarse: hide cursor elements, restore default cursor). Hints adjust ("touch to disturb"). I'll set hint text via matchMedia pointer coarse? Simple: write hints as "move / drag / touch" generic: "move your cursor — click to burst" vs touch: I'll use `(pointer:coarse)` media to swap two spans. Simple approach: hint text: "MOVE · CLICK" generic. Keep desktop-centric but functional on touch: pointermove events cover touch via pointer events. For orbit, touch drag works with pointer events + touch-action none on canvas. Add `touch-action: none` to canvases? That prevents page scroll over canvas — bad since page is scroll-snapped vertically! On mobile, user needs to scroll. Compromise: touch-action: pan-y on canvases so vertical scroll works, horizontal drags rotate. For orbit that's okay-ish. Mercury & field: pointermove from touch works while scrolling? During scroll, pointermove may fire. Fine — not the focus. Set `touch-action: pan-y` on sections/canvases. **Code size**: big but fine. Let me make sure I write clean, correct code — no runtime errors. I'll carefully write each module. Let me now write out details of math to avoid bugs: Perlin gradient function returns values roughly in [-1,1] (grad2 with those diagonal gradients gives range ~±1.4? classic Perlin 2D range ±sqrt(2)/2 with unit grads; with these grads range maybe ±1.5). Angle mapping: ang = perlin * 2.2 (tune). Multiply by TWO_PI: full swirls. I'll use ang = perlin2(...) * Math.PI * 2.5? Let me use `* 4` after normalizing... just pick PI*2.4 and it will look good; flow fields are forgiving. Field scale: s = 0.0016 (perlin units per px). Force: particles have velocity; accel = 40 px/s²? With damping 0.94/frame. Common recipe: vx = vx*0.96 + cos(a)*0.14 per frame (frame-based at 60fps). I'll do dt-based-ish but frame-normalized: use `const st = Math.min(dt,0.033)*60` (steps of ~1) then apply per-frame formulas scaled by st. Simpler: fixed pseudo-step: multiply everything by (dt*60) clamped ≤2. FIELD mouse: track mouse over the whole section; when pointer leaves, ease mouse influence off (mouseActive flag with lerp of strength). Pulses (click): store; in force loop: age = t - t0; ring radius R(t) = 90 + age*520; band = exp(-((d - R)/70)^2); impulse = band * (1-age/1.1) * 90 (px/s²... whatever) along (dx,dy)/d. Also cap: skip if age>1. Colors in field: bone stroke 'rgba(233,228,216,0.14)' batched path; accent 'rgba(255,77,0,0.30)'. With 'lighter' composite they'll accumulate to bright threads. lineWidth 1. Speed-based alpha not easy when batching; could group by speed quantized — skip; uniform fine. Actually add third group: "fast" particles (speed>2.2) drawn brighter bone 0.3? Two batches enough; but I can compute per-particle alpha by batching into, say, 3 alpha buckets. Let me do: bucket particles by speed into 3 alpha tiers for bone + accent separate → 4-5 path builds. Manageable complexity... Simplicity: 2 batches. Fine — the visual richness comes from motion. Also draw occasional accent particle: every 14th particle accent. Respawn: to avoid clustering, respawn when life ends: position random, life random 100–300 frames. Wrap-around edges with px,py reset. Canvas bg initial fill: on init/resize fill opaque --ink. **Mercury details**: Circles data: ```js const blobs = []; const NR = 8; // ring + center cluster // center big: r 92, wander tiny // others: r 26..70 home(t): center + [cos(t*fa+pa)*Ra, sin(t*fb+pb)*Rb] with Ra,Rb 60..220, fa,fb 0.12..0.3 ``` Physics step (dt): ``` tx = cx + cos(t*fa + pa)*Ra; ty = cy + sin(t*fb + pb)*Rb; vx += (tx - x)*3.2*dt*?? ``` Spring: `ax = (tx-x)*K` with K ~ 4 (1/s²... let me think: want gentle floaty: critical-ish damping. Use K=6, damping: v *= exp(-2.2*dt). Integrate x += vx*dt. The circle will lazily orbit its wandering home — good. Mouse blob: separate: `mb.x += (mouseX - mb.x)*min(1, 8*dt)` with radius 44*(1+0.08*sin(t*3)). If pointer inactive for >2s, target = center offset drift so it merges into cluster gracefully. Actually simpler: target = mouse when inside section; else target = cx + cos(t*0.3)*180, cy + sin(t*0.23)*120 (a ghost cursor wandering — keeps scene alive when idle). Droplets on click: for k in 6: droplet {x,y at click, vx,vy random dir speed 260±, r 10–22, born}. Update: x+=vx*dt; v *= exp(-1.6*dt); after life 0.9s shrink r over 0.5s then remove. Also impulses to blobs: dir*(140 * falloff(d, 260)) added to v. Soft separation between blobs: pairwise: if d < (ri+rj)*0.8: push = ((ri+rj)*0.8 - d)*2.2; apply along normal to both (mass-weighted by r²?). Simple equal split. Set circle attrs each frame: el.setAttribute('cx', x) etc — 10-16 setAttribute per frame fine. Keep pool of DOM circles; droplets create/remove SVG circles (createElementNS). The mouse blob also merges — nice. Gradient fill: define in defs `` — applied to each circle fill="url(#chrome)". Since goo blurs them, gradient mostly survives within each circle silhouette (filter applies to rendered result — gradient inside circle then blurred+contrast: the alpha channel gets the threshold, color channels get blurred — colors will bleed slightly between overlapping circles but they're the same gradient... gradients are in objectBoundingBox? Default gradientUnits="objectBoundingBox" — each circle gets its own vertical gradient: consistent material. Good. Also, backdrop details: I'll add a div .lens (thin circle outline) + crosshair marks via CSS pseudo-elements, positioned center behind the svg. And maybe a big dim "02" numeral? The meta block already has "02". Keep lens only. The goo filter region: default filter region -10%..120% — blur may clip at svg edges; set filter x="-30%" y="-30%" width="160%" height="160%". feColorMatrix values: to get crisp threshold: alpha' = 28*a - 13 → threshold at a≈0.464. With stdDeviation 16 on ~100px features, edges alpha gradient is smooth; contrast 28 gives sharp edge. Slight halo risk (values >1 clamp). Use 25 and -11? threshold 0.44. I'll go stdDeviation 14, matrix "0 0 0 30 -13" → threshold .433, fairly crisp. Tune: 24, -11. Fine — I'll pick `stdDeviation="16"` and `0 0 0 26 -11.5`. It'll look good; exact values forgiving. Edge softness note: with blur+contrast, edge transition width ~ stdDeviation/contrast-slope — visually crisp enough. **TYPE details**: Letters: F L U I D. Fraunces 900 is very heavy; near cursor wght 900, idle base 300. opsz 144. letter-spacing slight negative. Color bone; maybe one letter (index 2, "U") in accent when its weight exceeds threshold? Fancy: the *most-weighted* letter tints accent (color transitions with weight). Signature micro-detail: as a letter's weight crosses 700, its color blends toward accent. Implement: color mix via style.color computed from wght: if w>650: mix bone→accent by (w-650)/250. Use precomputed rgb lerp. Nice. Spring params: stiffness 120, damping 14 (per second, using v += (target-x)*k*dt; v *= exp(-damp*dt)) — with k=120,d=14: omega≈11 rad/s, zeta = 14/(2*10.6)=0.66 → nice overshoot. For wght channel use k=90,d=12. Rotation: from vx: rot = clamp(vx*0.9, ±10deg) — target rotation from velocity (lagging). Spring it too (k=100,d=12). Offsets: target repulsion: `f = exp(-(d/170)^2)`; dir = (lc - m)/d; tx = dir.x*f*52; ty = dir.y*f*52 - f*26 (extra lift). When pointer inactive: idle wave. Idle detection: lastMove time; if now-lastMove > 1.4s → idle mode: ``` wT = 300 + 240*(0.5+0.5*sin(t*1.8 - i*0.85)); yT = -26*(0.5+0.5*sin(t*1.8 - i*0.85)); xT = 0 ``` Blend factor eases between mouse-mode and idle-mode to avoid jumps: idleBlend lerps 0..1 at speed 3/s. Compute both target sets and mix. Click shock: for each letter: impulse v += dir_from_click * 900 * exp(-(d/260)^2); and wght spike: wv += 2500*exp(...) — big bounce. Font-variation string per frame per letter: `"'opsz' 144, 'wght' W, 'SOFT' S, 'WONK' 0"`. W rounded. 5 letters → trivial. Entrance: `.study.type.in .k { transform:none; opacity:1 }` with transition on outer `.kw` wrapper: initial `transform: translateY(115%) rotate(4deg)`, transition-delay per index via CSS var --i. Overflow hidden on the word container per-letter? Outer wrapper `.kw` display:inline-block overflow:hidden? Clipping rotate looks off; simpler: no overflow hidden — fade+rise with slight blur? filter blur transitions can be pricey but 5 letters fine: initial `opacity:0; transform: translateY(60px) rotate(4deg); filter: blur(8px)` → in: none. Stagger 70ms. Elegant. Baseline layout: word centered; also small mono axis legend below: "Fraunces Variable — wght 100→900 · SOFT 0→100 · opsz 144". **SIGNAL details**: State: `freq` (target from mouseX: map x∈[0,w] → 0.004..0.016 rad/px), `amp` (mouseY → 0.05..0.4 of H/2), eased at 6/s. Idle: target freq = 0.008 + 0.002*sin(t*0.13), amp = 0.16+0.05*sin(t*0.17). Sines: y1 = A*sin(x*f + t*1.1); add second harmonic: + 0.35*A*sin(x*f*2.17 - t*0.7); third: 0.18*A*sin(x*f*3.9 + t*1.9)? Envelope shaping: multiply overall by smooth window that tapers near edges: `win = smoothstep(0,0.12,xn)*smoothstep(1,0.88,xn)` so line tapers at screen edges — elegant. Pulses: two per pluck (dir ±1): contribution = amp * exp(-((x-xc)/38)^2) * envelope(age): env = exp(-1.1*age) * pluckAmp where pluckAmp from pointer speed (clamp 30..140 px). xc = x0 + dir*age*300. Total y = win*(sines + pulses). Draw path over x step 6px. Trails: fade fill rgba(ink,0.16). Also draw ruler: center line y=cy alpha .1, ticks every 90px alpha .12 (top small), readhead at rx (mouseX eased): vertical line alpha .12 from cy-70..cy+70? Full height subtle: alpha .05 full height + brighter near wave? Keep: vertical hairline full height alpha .07; dot at (rx, y(rx)) accent r=3; small horizontal tick at dot. Also second dot on echo line bone-faint. Echo lines: draw 3 passes with time offsets [0, -0.22, -0.45] and alphas [0.85, 0.35, 0.15], widths [2,1,1], colors [bone, accent, bone-faint]. Wait main should be bone; echo accent offset -0.15s; ghost bone-faint offset -0.4. Actually accent echo might fight with accent dot — fine, cohesive. Sample rendering with ctx.beginPath, moveTo/lineTo. Cheap. Readout: `f {(freq*1000).toFixed(1)} mHz/px · A 0.42 · plucks 3`. **ORBIT details**: Matrix ops: ```js function rotY(a){c=cos,s=sin; return [c,0,s, 0,1,0, -s,0,c]} // row-major M*? define mul(A,B) row-major 3x3 function rotX(a){return [1,0,0, 0,c,-s, 0,s,c]} mul3(A,B): C[i][j]=ΣA[i][k]B[k][j] apply(M,v): [M0*x+M1*y+M2*z, ...] ``` Frame: dYaw = (autoSpin + yawVel)*dt; dPitch = pitchVel*dt; M = mul(rotY(dYaw), M); M = mul(rotX(dPitch), M)? Order: applying rotY then composition — either order fine for small deltas. Then orthonormalize: ```js // rows zAxis = normalize(row2); xAxis = normalize(cross(row1?,...)) ``` Simpler Gram-Schmidt: r0 = normalize(row0); r2 = normalize(cross(r0, row1)); r1 = cross(r2, r0); write back. Fine. While dragging: dYaw = dx*0.005 (direct), accumulate also into velocity estimate (vel = 0.8*vel + 0.2*(dx*0.005/dt)?). On release: yawVel = recent dx per second * 0.005. Simplify: during drag, set yawVel = dx/dt * 0.005 each frame (so releasing keeps last), pitchVel likewise; when not dragging, yawVel *= exp(-1.8*dt), and autoSpin blends: effective = yawVel + auto*idleFactor where idleFactor = clamp(1 - |yawVel|/0.3, 0,1)? Simpler: yawVel approaches autoSpeed when below it: if(!dragging){ yawVel += (0.12 - yawVel)*min(1,dt*0.5) } → eases back to gentle auto spin. pitchVel → 0 damping plus pitch eases back to slight tilt? Keep pitch free. Points gen: ```js const N=300; golden = Math.PI*(3-Math.sqrt(5)); for(i){ y = 1 - 2*(i+0.5)/N; r = sqrt(1-y*y); th = golden*i; pts.push({x:cos(th)*r, y, z:sin(th)*r, accent: i%29===0}) } // rings: ring1: 72 pts radius 1.22 in plane tilted: define ring in XZ plane then rotate plane by rotZ(0.42)... Precompute ring points with the plane tilt baked: for a: (cos a*1.18, 0, sin a*1.18) then apply fixed rotation R0 = rotX(0.5)*rotZ(0.35)? Since M multiplies everything anyway, rings just need fixed tilt relative to sphere: pre-rotate ring points by rotZ(1.05) etc. ring2: 72 pts radius 1.38, pre-rot rotZ(2.1) & rotX(-0.6). ``` Edges: sphere pts pairs with dist < 0.26 → count? For N=300 surface points, typical spacing ~ sqrt(4π/300) ≈ 0.205. Threshold 0.26 gives ~3-4 neighbors → ~500-700 edges. Cap at 900. Also ring consecutive edges as polyline (draw ring as continuous path with depth-fade per segment — draw per segment for alpha control; 72 segments each). Projection with fov: F = Math.min(w,h)*1.55; Rv = Math.min(w,h)*0.30*zoom; for each pt: wx=x*Rv etc; s = F/(F + wz); sx=cx+wx*s; sy=cy+wy*s; store also s. Wait sign: camera looking +z? Points with z positive far → s smaller. F/(F+wz): wz=F? no wz max = Rv*1.38 ≈ 0.42F < F fine, s ∈ [F/(F+0.42F)=0.70, F/(F-0.42F)=1.72]. Near points 1.7x — strong perspective, maybe too strong; use F = min(w,h)*2.1: s∈[0.82,1.5]. OK. Depth alpha: da = map z from [-0.42..0.42]*? → alphaScale = clamp(1.35 - (wz/Rv)*0.9, 0.15, 1.25)? Let me define nz = wz/(Rv*1.4) ∈[-1,1]; alphaScale = 0.5+0.5*(1-nz)/2 → [0.5,1]. Hmm I'll compute per point: `fade = 1.15 - nz*0.55` clamp [0.2,1.3]. Draw order: draw edges first (all, low alpha), then nodes sorted far→near. Edges: to reduce state churn, bucket edges into 4 alpha tiers by depth, batch each tier into one path: tier = floor(fade*3). Good perf. Node accent ones drawn individually. Pulse: on click: find node minimizing screen dist to click among projected (also allow ring nodes) → pulse = {i, t0}. Wave speed through "graph distance"? Use 3D distance: for node j: delay = dist3(unit_j, unit_i)*1.1 (seconds for unit sphere scale) → brightness b = exp(-((age - delay)/0.18)^2) * exp(-age*0.5). Apply to node radius & alpha; edges: use avg of endpoint boosts + own? Edge brightness: max(bA,bB)*0.9. Accent color wave? Wave in bone-bright (full bone) — a light racing across the constellation. Also apply to ring pts. Draw edges with per-edge brightness: to batch, add to tier by (base + wave) — fine, tiers 0..5. Also draw a faint circle outline of the ring paths as ellipse guides? The ring points polyline suffices. **HUD & section markup** per section: ```html

01FIELD

Flow Field

Two thousand particles advecting through a drifting Perlin field — brush through them, click to detonate a pulse.

…

MOVE TO STIR · CLICK TO PULSE

``` Wait — the meta descriptions: I said no filler, but a one-line description per study is real content (explains the piece + interaction). Keep it short and purposeful. Title styles: number small mono accent; title Fraunces italic ~clamp(2.2rem,4.5vw,3.6rem); desc mono 11-12px dim, max-width 34ch. Hint: bottom center mono 10px letterspaced with a small pulsing dot `` (CSS animation). Tele: top-right mono 10px dim, tabular. HUD top: ```html

MOTIONSTUDIES

FIVE EXERCISES IN FLUID COMPUTATION

01/ 05

``` Brand: mono bold, letterspaced; separator slash. Sub hidden on mobile. Rail: ```html
...
``` Vertical stack right: 24px from edge; each button: 28px wide line + label appears on hover (translate). Active: line accent + longer. Bottom-left chapter label: ```html
01FIELD
``` Maybe redundant with section meta — could skip. Instead bottom-right: fps. `
60 FPS
`. And bottom-left could hold a thin scroll indicator? Keep bottom-left: "SCROLL" with animated down tick, fading out at last chapter? Simpler: keep the fps bottom-right and a tiny "©2025 MMXXV" bottom-left? Slight clutter. Decide: fixed bottom bar with left: current study interaction replay? I'll do bottom-left = live telemetry for the ACTIVE study (merge per-section tele into the fixed HUD!). Yes — one telemetry line bottom-left, updates per active study. Cleaner than per-section teles. Sections keep meta (left-top) + hint (bottom-center). So `.tele` fixed bottom-left: e.g. "01 · FIELD — N 1800 · 60 FPS". Per study, its update() writes string. Good: also global FPS appended. Custom cursor: dot 4px accent? Dot bone, ring 26px border bone-faint; ring lerps; on [data-hover] hover ring scales 1.6 and becomes accent-ish. On pointerdown scale .7. mix-blend-mode: exclusion for ring. Hide on coarse pointers. Load intro: body class "boot" removed after 100ms; CSS: .hud, .rail, .meta etc animate in with keyframes + delays. Simple: elements have `animation: rise .9s cubic-bezier(.16,1,.3,1) both` with staggered delays. Sections' meta per-section: animate on scroll into view via `.in` class from IntersectionObserver (adds to section; CSS transitions its children with delays). Use same `.in` mechanism for type letters. Fonts note: canvas doesn't use custom fonts (all text in DOM) — good, avoids FOUT issues in canvas. Scroll snap caveat: html {scroll-snap-type: y mandatory} can fight with smooth programmatic scroll — fine in modern browsers. Use `scroll-behavior: smooth` on html for rail clicks? scrollIntoView smooth works regardless. **Reduced motion**: media query — I'll add a JS check: if prefers-reduced-motion, set global TIMESCALE=0.35 and skip auto pulses. Minor. Now, writing all the code carefully. Let me draft the full file mentally with attention to correctness. Key risk areas: 1. Perlin implementation correctness — I'll write standard 2D Perlin. 2. Matrix math for orbit — write carefully. 3. IntersectionObserver active tracking — threshold: use threshold 0.6? For snap scrolling, sections fully visible when settled. Use threshold 0.5 → isIntersecting events set activeIndex and add .in once. 4. Resize: each study resize handler reads its canvas parent size. Let me write the JS as one IIFE with helpers. ```js 'use strict'; const clamp=(v,a,b)=>vb?b:v; const lerp=(a,b,t)=>a+(b-a)*t; const TAU=Math.PI*2; const DPR=Math.min(devicePixelRatio||1,2); const fine=matchMedia('(pointer:fine)').matches; const RM=matchMedia('(prefers-reduced-motion: reduce)').matches; const TS=RM?0.35:1; // time scale ``` Canvas helper: ```js function fitCanvas(cv){ const r=cv.parentElement.getBoundingClientRect(); const w=Math.max(2,Math.round(r.width)), h=Math.max(2,Math.round(r.height)); cv.width=w*DPR; cv.height=h*DPR; cv.style.width=w+'px'; cv.style.height=h+'px'; const ctx=cv.getContext('2d'); ctx.setTransform(DPR,0,0,DPR,0,0); return {w,h,ctx}; } ``` Canvas CSS: position absolute inset 0 w/h 100%? If I set style width/height explicitly it's same. Use CSS width/height 100% and just set backing store: with setTransform scaling, drawing coords in CSS px. But canvas element CSS 100% ensures fill; backing store set from rect. OK — skip style.width assignments, rely on CSS `width:100%;height:100%`. Study base objects: ```js function makeStudy(i, el, hooks){ return {i, el, active:false, ...hooks} } ``` I'll just write 5 modules each with init/resize/frame(dt,t)/onMove/onDown etc, stored in array `studies`. Global loop dispatches to active. Also pointer coords passed per frame: I'll maintain `pointer = {x:0,y:0, inside:false, down:false, vx, vy, lastT}` global (client coords), and each study converts via its rect (recomputed on demand). For active fullscreen section, rect top ~ -scrollDelta during transition — computing rect each frame for the active study only: 1 gBCR/frame OK. Actually simpler: each study's frame receives global client pointer, and computes local using cached rect updated on scroll/resize events + rAF? During snap animation the rect changes per frame... The animations look fine if pointer mapping is slightly off during the ~0.5s transition. I'll cache rect on resize + on scroll end? Getting exactness: just call getBoundingClientRect in frame for active study. It's one call — fine. Now Study 1 FIELD full code: ```js const field=(()=>{ const cv=document.getElementById('c0'); let ctx,W,H; let pts=[], pulses=[], mouse={x:-1e4,y:-1e4,in:false}; // perlin const P=new Uint8Array(512); {let p=new Uint8Array(256); for(let i=0;i<256;i++)p[i]=i; let seed=1337; const rnd=()=>((seed=seed*16807%2147483647)/2147483647); for(let i=255;i>0;i--){const j=(rnd()*(i+1))|0; const t=p[i];p[i]=p[j];p[j]=t;} for(let i=0;i<512;i++)P[i]=p[i&255];} const fade=t=>t*t*t*(t*(t*6-15)+10); function grad(h,x,y){h&=7; const u=h<4?x:y, v=h<4?y:x; return ((h&1)?-u:u)+((h&2)?-2*v:2*v);} ``` Hmm classic grad2: use 8 gradient directions. Let me use simpler: ```js function grad(h,x,y){switch(h&3){case 0:return x+y;case 1:return -x+y;case 2:return x-y;default:return -x-y;}} ``` 4 diagonals — fine. ```js function noise(x,y){ const X=Math.floor(x),Y=Math.floor(y); const xf=x-X, yf=y-Y, xi=X&255, yi=Y&255; const u=fade(xf), v=fade(yf); const aa=P[P[xi]+yi], ab=P[P[xi]+yi+1], ba=P[P[xi+1]+yi], bb=P[P[xi+1]+yi+1]; const x1=lerp(grad(aa,xf,yf),grad(ba,xf-1,yf),u); const x2=lerp(grad(ab,xf,yf-1),grad(bb,xf-1,yf-1),u); return lerp(x1,x2,v); // ~[-1,1] } ``` P is 512 so P[xi+1] ok (xi≤255→256 ok), P[xi]+yi+1 ≤ 255+256=511 ok. Particle init: ```js function spawn(p){p.x=Math.random()*W; p.y=Math.random()*H; p.px=p.x; p.py=p.y; p.vx=0;p.vy=0; p.life=120+Math.random()*260; p.acc=Math.random()<0.07;} function init(){ const n=clamp(Math.round(W*H/1100),500,2200); pts=Array.from({length:n},()=>{const p={};spawn(p);return p;}); } ``` Frame: ```js function frame(dt,t){ ctx.globalCompositeOperation='source-over'; ctx.fillStyle='rgba(13,12,10,0.075)'; ctx.fillRect(0,0,W,H); ctx.globalCompositeOperation='lighter'; const s=0.0016, tt=t*0.10; // prune pulses pulses=pulses.filter(p=>t-p.t0<1.1); const mx=mouse.x,my=mouse.y, mIn=mouse.in; const bA=ctx.createLinearGradient? null:null; // no ctx.lineWidth=1; // two passes: bone & accent for(let pass=0;pass<2;pass++){ ctx.strokeStyle=pass? 'rgba(255,82,20,0.5)':'rgba(233,228,216,0.20)'; ctx.beginPath(); for(const p of pts){ if((p.acc?1:0)!==pass) continue; const a=noise(p.x*s + tt*0.06, p.y*s - tt*0.045)*TAU*1.6; let ax=Math.cos(a)*36, ay=Math.sin(a)*36; const dx=p.x-mx, dy=p.y-my, d2=dx*dx+dy*dy; if(mIn && d2<22500){ const d=Math.sqrt(d2)||1, f=(1-d/150); ax+=(-dy/d)*f*220 + (dx/d)*f*60; ay+=(dx/d)*f*220+(dy/d)*f*60; } for(const q of pulses){ const age=t-q.t0; const dx2=p.x-q.x,dy2=p.y-q.y; const d=Math.hypot(dx2,dy2)||1; const R=60+age*520; const band=Math.exp(-((d-R)*(d-R))/4900); const g=band*(1-age/1.1)*900/d; ax+=dx2*g*0.02? ... } ``` Hmm let me define pulse force cleanly: impulse accel = band * strength, direction radial outward: `ax += dx2/d * band * 1400 * (1-age)`? tune numbers: strength 1200. At band=1 → 1200 px/s² for ~0.1s effective → noticeable kick. ok. ``` p.vx=(p.vx+ax*dt)*Math.pow(0.90, dt*60/60)?? ``` Damping frame-based: use `const dmp = Math.exp(-3.2*dt);` then v = (v + a*dt)*dmp. With a=36 and steady state v≈36/3.2≈11 px/s — slow drift. Speeds will vary with field. Let me raise force to 90 and damping 3.0 → v≈30px/s average with swirls faster near mouse (mouse force 220*f → up to ~70px/s tangential). Trail segments per frame ≈ v*dt ≈ 0.5–1.5px at 60fps — quite short; trails come from persistence. Looks like fine filaments. Maybe force 140, damping 2.6 → v~54px/s → 0.9px/frame. Hmm typical flow fields move faster: use damping 1.6, force 120 → v≈75px/s, 1.25px/frame. With strokes 1px that's nearly dots. Increase speed: force 260 damping 2.2 → 100px/s → 1.7px/frame — visible dashes. Particles also get acceleration from field curvature. I'll tune: F=240, damp exp(-2.2dt). Mouse swirl 320. Fine — these produce fluid motion; exact numbers I'll set reasonably and trust the classic look. Life: p.life -= dt*60; if <0 or offscreen: wrap: if x<0 x+=W etc (and reset px,py). Also random respawn small chance to keep distribution: if(Math.random()<0.002) respawn. Draw: line from (px,py)→(x,y): inside pass loop: ``` ctx.moveTo(p.px,p.py); ctx.lineTo(p.x,p.y); ``` after loop stroke once. Then update px=x? — note I update positions in the same loop before moveTo? I need move-then-draw: compute new pos first, then add segment. Reorganize: single loop over all particles: physics update, push into per-pass arrays? Building two path objects sequentially requires two loops or storing. Simplest: one loop doing physics for all; store segments in two arrays of coords (Float32Array preallocated, with counts). Then two stroke passes. Preallocate segsA (bone) & segsB arrays sized n*4. ``` const segA=new Float32Array(maxN*4), segB=new Float32Array(maxN*4); let nA=0,nB=0; ``` maxN = 2200. Also cap dt: dt=min(dt,0.033). mouse events: on section pointermove → mouse.x = e.clientX - rect.left... compute using cv.getBoundingClientRect() at event time (cheap on move). pointerleave → in=false. Also pointerdown → pulses.push({x,y,t0:tNow}); need current sim time: keep module `let now=0` updated in frame; event uses that. Also spawn ring visual: store in pulses (drawn separately): in draw phase after segments: for pulses draw ring: alpha=(1-age/1.1)*0.5, radius R, strokeStyle accent, lw 1. composite lighter fine. Resize: refit, re-init particles (keep), fill bg opaque: ctx.fillStyle='#0d0c0a'; fillRect. Tele update (every ~0.25s): `N ${pts.length} · V avg`? compute avg speed sample occasionally — skip; show `N ${n} · SWIRL ${mouse.in? 'ON':'—'}`. Plus pulses count. Fine: `FIELD — N 1800 · PULSES 0`. **Mercury code**: ```js const mercury=(()=>{ const cvWrap=document.getElementById('s1'); const svg=document.getElementById('gooSvg'); let W,H,cx,cy; const g=document.getElementById('gooG'); const blobs=[]; const drops=[]; // build const N=8; for(let i=0;i1.25 ``` Click handler: for each blob: dir from click, imp = 520 * clamp(1 - dist/420, 0.15, 1); vx += nx*imp; spawn 7 droplets: speed 180+rand*220, dir random, r 7+rand*16. Also droplets pushed from center of click outward — spawn at click + small jitter. SVG sizing: on resize: W,H from wrapper; svg.setAttribute('viewBox',`0 0 ${W} ${H}`); svg width/height 100% via CSS. Circles fill: `fill="url(#chrome)"`. Goo filter on g. Also add a subtle second layer: a smaller "core" group without filter? Skip. Composition extras: `.lens` div: centered, width 52vmin, aspect 1, border 1px solid var(--bone-faint), border-radius 50%; plus crosshair lines (before/after: horizontal & vertical 1px lines through center at low alpha, length 100%?). Crosshair full-screen lines might be too much; use lens + tick marks at 12/3/6/9 o'clock? Implement ticks with 4 small divs? Use lens::before/::after for two ticks. Good enough. Also for depth, a huge dim numeral behind? The section already has meta at top-left. Keep clean. Tele: `BLOBS 9 · VISC 1.6 · DROP ${drops.length}`. Edge case: SVG filter performance with fullscreen blur 16 — chrome handles fine typically. **Type code**: ```js const kinetic=(()=>{ const el=document.getElementById('kword'); const spans=[...el.querySelectorAll('.ki')]; const L=spans.map(s=>({s, x:0,y:0,vx:0,vy:0, r:0,vr:0, w:300,vw:0, so:0,vso:0, cx:0,cy:0})); let lastMove=-10, idle=1; frame(dt,t): // rects for each: r=span.getBoundingClientRect(); cx=r.left+r.width/2; cy=r.top+r.height/2; (5 gBCR/frame ok) const idleT = (t-lastMoveT>1.6 || !pointer.seen); idle += ((idleT?1:0)-idle)*Math.min(1,dt*2.5); // pointer local = client coords (viewport) since sections are viewport-sized & rects are viewport-based → use client coords directly! Since letters' rects are viewport-based and pointer is client-based, no conversion needed. for i,l: // mouse targets const dx=l.cx-pointer.x, dy=l.cy-pointer.y, d=Math.hypot(dx,dy)||1; const inf=Math.exp(-(d*d)/(2*160*160)); const tx=dx/d*inf*60, ty=dy/d*inf*60 - inf*30; const tw=300+inf*620, tso=inf*100; // idle targets const iw=280+230*(0.5+0.5*Math.sin(t*1.7-i*0.8)); const iy=-30*(0.5+0.5*Math.sin(t*1.7-i*0.8+1.3)); const irot= 4*Math.sin(t*1.1-i*0.5); // blend const T_x=lerp(tx,0,idle), T_y=lerp(ty,iy,idle), T_w=lerp(tw,iw,idle), T_so=lerp(tso, idle*60, 1)?? ``` SOFT idle: 30+30*sin(...) fine. Springs: ``` spring(l,'x','vx',T_x,130,13); ... generic: function sp(o,p,v,target,k,c,dt){ o.v+= (target-o[p])*k*dt; o.v*=Math.exp(-c*dt); o[p]+=o[v]*dt; } ``` Wait naming: store v in l.vx etc. Write inline per channel: ``` l.vx+=(T_x-l.x)*130*dt; l.vy+=(T_y-l.y)*130*dt; const dmp=Math.exp(-11*dt); l.vx*=dmp; l.vy*=dmp; l.x+=l.vx*dt; l.y+=l.vy*dt; // rotation from horizontal velocity const tr=clamp(l.vx*0.55,-14,14); l.vr+=(tr-l.r)*120*dt; l.vr*=dmp; l.r+=l.vr*dt; // weight l.vw+=(T_w-l.w)*160*dt; l.vw*=Math.exp(-10*dt); l.w+=l.vw*dt; // soft l.vso+=(T_so-l.so)*140*dt; l.vso*=Math.exp(-10*dt); l.so+=l.vso*dt; apply: s.style.transform=`translate(${l.x}px,${l.y}px) rotate(${l.r}deg)`; s.style.fontVariationSettings=`'opsz' 144,'wght' ${l.w|0},'SOFT' ${l.so|0},'WONK' 0`; // color blend when heavy const h=clamp((l.w-620)/230,0,1); if changed: s.style.color = mix bone→accent ``` Color mix: bone rgb(233,228,216), accent rgb(255,77,0): r=233+(255-233)*h etc. lastMoveT updated on pointermove while this study active (module onMove). Click impulse in onDown: dir from click to letter center; l.vx += nx*700*falloff; l.vw += 2600*falloff. Hmm vw is d(w)/dt; adding 2600 → w spikes by ~2600*0.2s≈500 with damping — good bounce. Clamp w to [100,900] when applying. Also entrance handled by `.in` class transitions on `.kw` wrappers — but JS sets transform on the same element... Conflict: entrance animation on outer span `.kw`, physics on inner `.ki`. So HTML: `F`. Entrance: `.kw {display:inline-block; opacity:0; transform:translateY(.6em) rotate(3deg); transition: .9s var(--e) calc(var(--d)*1)} section.in .kw{opacity:1; transform:none}`. Inner `.ki` display:inline-block gets JS transforms. font-variation on .ki. Also the whole word uses Fraunces; set font-feature? none. Note: `getBoundingClientRect` on .ki includes the JS transform — offsets included; target computations still behave (influence by visual center) fine. Also the word should scale-in nicely; ok. Tele: `wght ${maxW|0} · soft ${...}`. **Signal code**: ```js const signal=(()=>{ const cv=document.getElementById('c3'); ctx; W,H; let A=0.16,A_t=0.16, F=0.009,F_t=0.009, rx=0.5, rx_t=0.5 (readhead 0..1); let plucks=[], nPlucks=0, lastPluck=0, lastPX=0,lastPY=0,lastPT=0; frame(dt,t): // idle targets let Aq=0.14+0.05*Math.sin(t*0.21), Fq=0.008+0.0022*Math.sin(t*0.13+2), rxq=0.5+0.38*Math.sin(t*0.23); if(pointerLocal.inside){ Aq=0.06+0.34*(clamp(py/H,0,1)); Fq=lerp(0.004,0.016, px/W); rxq=px/W; } A+=(Aq-A)*min(1,dt*3); F+=(Fq-F)*min(1,dt*3); rx+=(rxq-rx)*min(1,dt*5); // fade ctx.fillStyle='rgba(13,12,10,0.16)'; ctx.fillRect(0,0,W,H); // ruler line cy: strokeStyle bone-faint(0.10), ticks every 90px height 5 alpha .12, plus center marker // plucks update plucks=plucks.filter(p=> t-p.t<3.5); // wave draw x3 offsets const passes=[{dt:0,a:1,col:'233,228,216',w:2,al:0.9},{dt:-0.16,a:0.9,col:'255,82,20',w:1,al:0.55},{dt:-0.42,a:0.85,col:'233,228,216',w:1,al:0.22}]; for pass: beginPath; for x=0..W step 5: const win=smooth edges: e=x/W; win=smoothstep(0,0.1,e)*smoothstep(1,0.9,e); // careful smoothstep(edge0>edge1) implement own let y=0; const tt=t+pass.dt; y+= Math.sin(x*F + tt*1.9)*1.0; y+= 0.42*Math.sin(x*F*2.13 - tt*0.8); y+= 0.18*Math.sin(x*F*4.7 + tt*1.7); y*=A*H*0.5*?? A is fraction: y_px = y*A*H*0.5? define A as 0..0.45 amplitude fraction of H/2: y_px = y * A * (H*0.5)?? with y up to ~1.6 → 1.6*0.45*H/2=0.36H ok. for p of plucks: age=t-p.t + pass.dt?? echo should also show pulse — include tt: age=t+pass.dt-p.t; xc=p.x+p.dir*age*300; if age>0: g=Math.exp(-((x-xc)**2)/(2*34*34))*p.amp*Math.exp(-age*1.1); y+= g*Math.sign? Pulse should push both up? Symmetric bump downward or upward based on sign stored. p.s=±1: y+= p.s*g; y*=win; px coords: X=x, Y=cy+y; lineTo stroke. ``` Wait — pulses with time offset for echo passes: echo shows past state — pass.dt negative → age larger → pulse progressed differently. OK good. smoothstep with reversed edges: write helper `sstep(a,b,x)` standard; for right edge call sstep(1,0.9,e) — my helper should handle a>b: t=clamp((x-a)/(b-a),0,1) works with a>b too. Good. Pluck trigger in onMove: speed=dist/dtms; if speed>0.9 px/ms && now-lastPluck>0.12: spawn pair at x=px: amp=clamp(speed*26,10,60)?? amplitude in px: clamp(speed*18, 12, H*0.22); s alternates or by direction of vertical movement: s = sign(dy) (dy = py-lastY). dir ±1 both. lastPluck=now. Also onDown: amp=H*0.3. Read head: vertical hairline at X=rx*W alpha .08; find y at that x (compute wave value main pass) → dot accent r 3; plus small text? no, tele covers. Tele: `F ${(F*1000).toFixed(1)} · A ${A.toFixed(2)} · PLUCKS ${nPlucks}`. Phosphor trails + moving waves = lovely. Init: fill bg opaque. **Orbit code**: ```js const orbit=(()=>{ cv c4; ctx; W,H; const N=300, nodes=[]; golden angle; unit sphere pts. rings: ringPts(72, 1.24, tiltA), ringPts(72,1.42, tiltB): generate in XZ plane then apply fixed rotation: rotate around X by a, then around Z by b? implement small helpers rotAxis. edges: for ii: d24. edge brightness = clamp(base + max(bA,bB)*1.2). Node alpha=0.35+0.65*fade + boost. ``` Vector rotation by matrix each frame: 444 nodes × 9 mults — trivial. Pointer: pointerdown on canvas → dragging=true, capture pointer; pointermove: dx=e.movementX (careful: movementX not on touch pointer events in some browsers — compute from last pos manually). yaw += dx*0.0045 → apply immediately: rotate matrix by dx*0.0045, pitch dy*0.0045; and set yawV=dx*0.0045/dt-ish — simpler: track lastDx, and on frame if dragging: use accumulated drag delta consumed: store pending dx,dy; in frame: rotY(pdx*0.0045); yawV = lerp(yawV, pdx*0.0045/max(dt,1e-3)*dt?? — inertia: set yawV from recent motion: yawV = 0.7*yawV + 0.3*(pdx*0.0045)/max(dt,0.001)*... hmm units: yawV is rad/s applied per frame when free. While dragging apply delta directly, and record instantaneous velocity vyaw=dx*0.0045/dt (clamp). On pointerup: yawV=vyaw clamp ±3. Then free: yawV eases to 0.14 baseline, pitchV decays. wheel: zoomT = clamp(zoomT * (1 - deltaY*0.001), 0.55, 1.7); preventDefault on canvas wheel — but page scroll... wheel over canvas should zoom not scroll: add wheel listener with {passive:false} + preventDefault. Scroll-snap page: wheel is the scroll mechanism — hijacking it on this section prevents scrolling past the section. Hmm — that could trap users. Better: don't hijack wheel; zoom via... pinch? Or require holding a modifier? Or skip zoom, use double-click? I'll keep wheel-zoom but only when a modifier? Unintuitive. Alternative: drag with two pointers... Simplest good UX: zoom with wheel ONLY while pointer is over the canvas AND... that's the whole section. Risk: user can't scroll past. Mitigation: sections are snap; keyboard/space/rail still scroll. Hmm, still bad. Alternative: make zoom happen while dragging? No. Use vertical drag = pitch; wheel untouched. Add zoom via pinch gesture (two-pointer distance) for touch, and for desktop: wheel while holding Shift? Undiscoverable. OR: subtle idle zoom oscillation (breathing dolly) + drag rotate + click pulse. That's plenty interactive without hijacking scroll. Decision: no wheel zoom; add slow breathing zoom (zoom = base*(1+0.04*sin(t*0.3))). Hint stays "drag to rotate · click to pulse". Good, keeps scroll natural. Edge count: N=300, threshold 0.26: average degree? For geodesic-ish uniform, neighbor count within chord 0.26: cap area on sphere: cap radius angle asin(0.13)≈0.13 rad; fraction = (1-cos0.13)/2 ≈ 0.0042; ×300 ≈ 1.27 neighbors avg → too sparse. threshold 0.34: angle asin(0.17)=0.171, frac=(1-cos .171)/2=0.0073 → degree ~2.2 → edges ~330. Use 0.36 → degree ~2.7, edges ~400. Good: threshold 0.36. Ring generation helper: ```js function ring(r, count, rx, rz){ const out=[]; for(let k=0;ks.init()); let cur=0, last=performance.now(); function loop(now){ requestAnimationFrame(loop); let dt=(now-last)/1000; last=now; dt=Math.min(dt,0.05); const t=now/1000*?? ``` Time base: use seconds t=now/1000; apply TS scaling by dt*=TS but t monotonic global fine (idle waves slow with dt accumulation? modules track own phase via accumulating `this.t += dt*TS`). I'll give each module local time accumulation `T += dt` where dt already scaled. Pulses store module-local T. Good — make each module hold `T` incremented in frame. Only active module frames: `if(s.active) s.frame(dt, ...)` — but when scrolled away mid-transition, the outgoing still active until threshold flips; fine. Resize observer: window resize → all resize(). Also initial after fonts load? Type study measures rects each frame — self-healing. IntersectionObserver: ```js const io=new IntersectionObserver(es=>{ es.forEach(e=>{ const i=+e.target.dataset.i; const st=studies[i]; st.active=e.isIntersecting; if(e.isIntersecting){ e.target.classList.add('in'); setActive(i);} }); },{threshold:0.55}); ``` setActive updates counter, foot label, rail active class, and `.tele` visibility? tele is single fixed element updated by active module each frame (throttle to every 200ms). Rail click: sections[i].scrollIntoView({behavior:'smooth'}). Custom cursor: ```js if(fine){ document.body.classList.add('fine'); dot/ring follow: pointermove updates targets; rAF inside main loop: dx+=; ring lerp 0.18 per frame (frame-rate dependent—use dt*10 factor). hoverables: document.querySelectorAll('button, a, .rail button') → mouseenter/leave toggle ring class 'hov'. pointerdown/up → class 'dn'. } ``` Main loop also updates cursor ring position each frame. Blend: ring border-color bone; mix-blend-mode: difference makes bone→inverted... difference with bone over dark bg ≈ bone; over bone text → dark. Good. `cursor:none` for all elements under `.fine` media? CSS: `body.fine, body.fine *{cursor:none!important}`. **HTML for sections**: canvases with ids c0..c4; section 2 (mercury) has svg instead of canvas. Section 3 type has DOM stage. Let me also add subtle film grain? A fixed noise overlay via tiny canvas or SVG turbulence with low opacity adds texture and cohesion — `pointer-events:none; opacity:.05`. Implement with an SVG feTurbulence data-URI background repeated. Cheap: a div with background-image: url("data:image/svg+xml,...feTurbulence...") 180px tile, animation? Static grain fine (animated grain = perf cost). Static grain at 0.05 opacity adds material. Actually animated grain via CSS steps on background-position is cheap and adds life: 8-step keyframe translating background-position. Small cost. I'll include static grain (subtle) — keep it classy, opacity .045, mix-blend overlay? plain normal. OK. Also vignette per section? A radial darkening at edges via CSS radial-gradient overlay — that's a gradient but functional (photographic vignette) — I'd rather skip to keep flat clean look. Skip. **Meta text per section** (concise, purposeful): 01 FIELD — "Flow Field" — "Nineteen hundred particles advect through a slowly drifting noise field. Brush the current; click to detonate a pulse." 02 MERCURY — "Liquid Gooey" — wait title: "Mercury" — "Nine weighted volumes chase wandering orbits through an SVG goo filter. The blob follows your cursor — click to splash." 03 TYPE — "Kinetic Set" — "Fraunces Variable — weight and softness springs per glyph. Run your cursor through the letters; click to shock the set." 04 SIGNAL — "Phosphor Scope" — "Three phase-offset traces on a decaying phosphor screen. Height sets amplitude, width sets frequency; flick to pluck the string." 05 ORBIT — "Rigid Constellation" — "A rigid body of 444 nodes and its two rings, projected in perspective. Drag to tumble it; click to send a light-wave through the lattice." Hints: 01: MOVE TO STIR — CLICK TO PULSE 02: CURSOR MERGES — CLICK TO SPLASH 03: HOVER TO BEND — CLICK TO SHOCK 04: MOVE TO MODULATE — FLICK TO PLUCK 05: DRAG TO ROTATE — CLICK TO PULSE Titles in Fraunces italic: "Flow Field", "Mercury", "Kinetic Type", "Phosphor", "Constellation". Nice. **Accent color usage**: number + rule tick in accent, hint dot accent, signal echo accent, some field particles accent, orbit accents, type heavy letters accent. Mercury: chrome only (accent appears in... the hint/tele only). Cohesive. Let me reconsider the goo matrix to make sure of feColorMatrix behavior: `type="matrix"` (not mode). values 20 numbers. Alpha row `0 0 0 26 -13`: a' = 26a −13; threshold a=0.5. With blur stdDev 16, a near edge ~0.5 at silhouette → crisp. Colors: RGB rows keep (1 0 0 0 0 etc) — colors unpremultiplied handling — standard goo recipe works. One more consideration: the goo g element — droplets created/removed inside g. **Now — writing final code.** I'll be methodical. Also add `

create a full html file which has 5 different animations eac...