llms-full.txt

# Gradient Flow (shader)

> Silky domain-warped color field in deep blue, purple and teal; slow hypnotic drift.

- **id**: `gradient` · **kind**: shader · **section**: generative
- **tags**: noise, flow, plasma, glow, webgl2, background · **vibe**: calm, ambient, meditative
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [gradient.json](https://fx.rosuh.me/effects/gradient.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Dot-Matrix Wave (shader)

> Blue-teal dot grid pulses in rolling waves; cursor pushes dots outward in a satisfying bulge.

- **id**: `dots` · **kind**: shader · **section**: generative
- **tags**: dots, grid, waves, noise, webgl2, background · **vibe**: calm, playful, geometric
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [dots.json](https://fx.rosuh.me/effects/dots.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Metaballs (shader)

> Five glowing purple-magenta blobs orbit and merge organically; cursor draws in a sixth.

- **id**: `metaballs` · **kind**: shader · **section**: generative
- **tags**: metaballs, plasma, glow, fluid, webgl2, background · **vibe**: hypnotic, psychedelic, organic
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [metaballs.json](https://fx.rosuh.me/effects/metaballs.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Aurora Ribbons (shader)

> Shimmering green-and-purple aurora curtains stream down a starry night sky; serene fullscreen background.

- **id**: `aurora` · **kind**: shader · **section**: generative
- **tags**: aurora, waves, glow, noise, webgl2, background · **vibe**: calm, meditative, ambient
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [aurora.json](https://fx.rosuh.me/effects/aurora.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Ripple Grid (shader)

> Teal grid lines bend under expanding ripple rings that emanate from the cursor.

- **id**: `ripple` · **kind**: shader · **section**: generative
- **tags**: ripple, grid, waves, noise, webgl2, background · **vibe**: hypnotic, technical, geometric
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [ripple.json](https://fx.rosuh.me/effects/ripple.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Voronoi Cells (shader)

> Animated colour-cell mosaic with drifting seeds in jewel tones; organic and hypnotic.

- **id**: `voronoi` · **kind**: shader · **section**: generative
- **tags**: voronoi, cellular, geometry, noise, webgl2, background · **vibe**: hypnotic, organic, geometric
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [voronoi.json](https://fx.rosuh.me/effects/voronoi.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Truchet Tiles (shader)

> Scrolling arc-tile maze in dark teal; endlessly generative, calm, low-contrast texture.

- **id**: `truchet` · **kind**: shader · **section**: generative
- **tags**: tiling, geometry, lines, webgl2, background · **vibe**: calm, geometric, meditative
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [truchet.json](https://fx.rosuh.me/effects/truchet.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Kaleidoscope (shader)

> 8-fold FBM kaleidoscope blooms with shifting hues; cursor tilts the mandala in real time.

- **id**: `kaleido` · **kind**: shader · **section**: generative
- **tags**: kaleidoscope, mandala, fractal, noise, webgl2, background · **vibe**: hypnotic, psychedelic
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [kaleido.json](https://fx.rosuh.me/effects/kaleido.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Raymarch SDF (shader)

> Glowing torus spins in deep space via 48-step SDF raymarching; blue-to-magenta Fresnel rim.

- **id**: `raymarch` · **kind**: shader · **section**: generative
- **tags**: geometry, orbit, glow, rings, webgl2, background · **vibe**: hypnotic, futuristic, technical
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [raymarch.json](https://fx.rosuh.me/effects/raymarch.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Vaporwave Grid (shader)

> Retro vaporwave: banded sunset sun over a perspective cyan neon grid scrolling to the horizon.

- **id**: `vapor` · **kind**: shader · **section**: post-and-print
- **tags**: grid, neon, geometry, lines, webgl2, background · **vibe**: retro, calm, futuristic
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [vapor.json](https://fx.rosuh.me/effects/vapor.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Chromatic Glitch (shader)

> Horizontal RGB bands jitter and split over CRT scanlines; aggressive retro glitch.

- **id**: `glitch` · **kind**: shader · **section**: post-and-print
- **tags**: glitch, scanlines, noise, neon, webgl2, overlay · **vibe**: aggressive, retro, dramatic
- **culture**: —
- **perf**: gpu med / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

See full GLSL + drop-in snippet in [glitch.json](https://fx.rosuh.me/effects/glitch.json).

## Runtime notes

WebGL2 fragment shader compiled against the shared PRE preamble (uniforms iResolution, iTime, iMouse — iMouse is Y-flipped physical px, centered when no pointer). Browsers cap ~8–16 live WebGL2 contexts; the gallery lazy-unmounts off-screen tiles to stay under the limit. Perf budget — gpu: med, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- WebGL2 context limit: browsers cap ~8–16 live contexts; unmount off-screen shaders (the gallery does this) to stay under it.


---

# Flow Field (canvas)

> Dim constellation of drifting particles draws faint connecting lines; cursor repels the swarm.

- **id**: `field` · **kind**: canvas · **section**: data-and-system
- **tags**: particles, canvas2d, flow, trail, lines · **vibe**: calm, ambient, elegant
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: field — Flow Field (canvas) · license MIT -->
<canvas id="fx-field" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function field(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.p=[];for(let i=0;i<60;i++)s.p.push({x:Math.random()*w,y:Math.random()*h,vx:Math.random()-.5,vy:Math.random()-.5});}
      ctx.fillStyle='rgba(12,13,16,0.32)';ctx.fillRect(0,0,w,h); const ps=s.p;
      for(const p of ps){ const dx=p.x-mx,dy=p.y-my,d=Math.hypot(dx,dy)||1; if(mx>=0&&d<130){const f=(1-d/130)*0.8;p.vx+=dx/d*f;p.vy+=dy/d*f;} p.vx+=(Math.random()-.5)*0.06;p.vy+=(Math.random()-.5)*0.06;p.vx*=0.95;p.vy*=0.95;p.x+=p.vx;p.y+=p.vy; if(p.x<0)p.x+=w;else if(p.x>w)p.x-=w; if(p.y<0)p.y+=h;else if(p.y>h)p.y-=h; }
      ctx.lineWidth=1; for(let i=0;i<ps.length;i++)for(let j=i+1;j<ps.length;j++){const a=ps[i],b=ps[j],dx=a.x-b.x,dy=a.y-b.y,d2=dx*dx+dy*dy;if(d2<8100){ctx.strokeStyle='rgba(127,200,255,'+((1-Math.sqrt(d2)/90)*0.22).toFixed(3)+')';ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}}
      ctx.fillStyle='rgba(190,225,255,0.9)'; for(const p of ps){ctx.beginPath();ctx.arc(p.x,p.y,1.5,0,7);ctx.fill();} };
const cv = document.getElementById('fx-field');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Particle positions and connecting-line trails accumulate via partial alpha clear Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Particle positions and connecting-line trails accumulate via partial alpha clear; remount to reset.


---

# Seigaiha (canvas)

> Serene overlapping blue-white wave fans tile the screen; calm Japanese oceanic elegance.

- **id**: `seigaiha` · **kind**: canvas · **section**: world-patterns
- **tags**: waves, tiling, geometry, canvas2d, background · **vibe**: calm, elegant, cultural
- **culture**: Japan
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: seigaiha — Seigaiha (canvas) · license MIT
     accuracy: Procedural approximation of Japanese Seigaiha wave tiling; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-seigaiha" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function seigaiha(ctx,w,h,t){ ctx.fillStyle='#0d1b2a';ctx.fillRect(0,0,w,h); const R=26,sx=R,sy=R*0.62,ph=t*0.4; ctx.lineWidth=2;
      for(let row=0,y=0;y<h+R;row++,y+=sy){ const off=(row%2)*sx; for(let x=-R;x<w+R;x+=sx*2){ const cx=x+off,cy=y+Math.sin(x*0.02+ph)*2;
        for(let k=4;k>=1;k--){ const rr=R*k/4; ctx.strokeStyle=(k%2)?'rgba(120,190,230,0.95)':'rgba(225,238,247,0.85)'; ctx.beginPath();ctx.arc(cx,cy,rr,Math.PI,Math.PI*2);ctx.stroke(); } } } };
const cv = document.getElementById('fx-seigaiha');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Japanese Seigaiha wave tiling; not a faithful reproduction of any specific historical motif.


---

# Girih (canvas)

> Dark ground of slowly rotating golden octagram lattice; elegant Islamic geometric meditation.

- **id**: `girih` · **kind**: canvas · **section**: world-patterns
- **tags**: geometry, tiling, mosaic, canvas2d, background · **vibe**: elegant, hypnotic, cultural
- **culture**: Islamic
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: girih — Girih (canvas) · license MIT
     accuracy: Procedural approximation of Islamic girih tiling; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-girih" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function girih(ctx,w,h,t){ ctx.fillStyle='#10130f';ctx.fillRect(0,0,w,h); ctx.strokeStyle='rgba(212,175,90,0.85)';ctx.lineWidth=1.3; const R=30,rot=t*0.06,S=R*1.7;
      for(let gy=0;gy<h+S;gy+=S)for(let gx=0;gx<w+S;gx+=S){ for(let q=0;q<2;q++){ ctx.beginPath(); for(let i=0;i<4;i++){const a=rot+q*Math.PI/4+i*Math.PI/2;const x=gx+Math.cos(a)*R,y=gy+Math.sin(a)*R;i?ctx.lineTo(x,y):ctx.moveTo(x,y);} ctx.closePath();ctx.stroke(); }
        ctx.beginPath(); for(let i=0;i<8;i++){const a=rot+i*Math.PI/4+Math.PI/8;const x=gx+Math.cos(a)*R*0.46,y=gy+Math.sin(a)*R*0.46;i?ctx.lineTo(x,y):ctx.moveTo(x,y);} ctx.closePath();ctx.stroke(); } };
const cv = document.getElementById('fx-girih');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Islamic girih tiling; not a faithful reproduction of any specific historical motif.


---

# Celtic Knot (canvas)

> Glowing green interlace arcs weave across a dark field with a flowing animated dash; hypnotic.

- **id**: `celtic` · **kind**: canvas · **section**: world-patterns
- **tags**: knot, weave, geometry, canvas2d, background · **vibe**: hypnotic, elegant, cultural
- **culture**: Celtic
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: celtic — Celtic Knot (canvas) · license MIT
     accuracy: Procedural approximation of Celtic knotwork interlace; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-celtic" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function celtic(ctx,w,h,t){ ctx.fillStyle='#0c1410';ctx.fillRect(0,0,w,h); ctx.strokeStyle='rgba(120,225,170,0.9)';ctx.lineWidth=3.2;ctx.lineCap='round'; ctx.setLineDash([15,9]);ctx.lineDashOffset=-t*22; const C=34;
      for(let y=0;y<h+C;y+=C)for(let x=0;x<w+C;x+=C){ const o=(((x/C)+(y/C))%2===0); ctx.beginPath(); if(o){ctx.arc(x,y,C*0.5,0,Math.PI*0.5);ctx.moveTo(x+C,y+C);ctx.arc(x+C,y+C,C*0.5,Math.PI,Math.PI*1.5);} else {ctx.arc(x+C,y,C*0.5,Math.PI*0.5,Math.PI);ctx.moveTo(x,y+C);ctx.arc(x,y+C,C*0.5,Math.PI*1.5,Math.PI*2);} ctx.stroke(); } ctx.setLineDash([]); };
const cv = document.getElementById('fx-celtic');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Celtic knotwork interlace; not a faithful reproduction of any specific historical motif.


---

# Dot Painting (canvas)

> Warm earth-tone concentric dot rings orbit fixed anchors on dark brown; organic and meditative.

- **id**: `aboriginal` · **kind**: canvas · **section**: world-patterns
- **tags**: dots, geometry, canvas2d, background · **vibe**: meditative, organic, cultural
- **culture**: Aboriginal Australian
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: aboriginal — Dot Painting (canvas) · license MIT
     accuracy: Procedural approximation of Aboriginal Australian dot painting; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-aboriginal" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function aboriginal(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.c=[];for(let i=0;i<6;i++)s.c.push({x:Math.random()*w,y:Math.random()*h});} ctx.fillStyle='#2a1a0f';ctx.fillRect(0,0,w,h); const cols=['#e8b04b','#d9763a','#ece0cf','#b5472a','#7a3b1f'];
      for(const c of s.c){ for(let ring=0;ring<6;ring++){ const rad=7+ring*9; const n=Math.max(6,Math.floor(rad*0.7)); for(let i=0;i<n;i++){ const a=i/n*6.2831+ring*0.3+t*0.12*(ring%2?1:-1); ctx.fillStyle=cols[(ring+i)%cols.length]; ctx.beginPath();ctx.arc(c.x+Math.cos(a)*rad,c.y+Math.sin(a)*rad,2.0,0,7);ctx.fill(); } } } };
const cv = document.getElementById('fx-aboriginal');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Dot centre positions generated once on first frame via Math.random. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Aboriginal Australian dot painting; not a faithful reproduction of any specific historical motif.
- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Dot centre positions generated once on first frame via Math.random.; remount to reset.


---

# Ink Wash (canvas)

> Soft ink blobs drift on cream paper; hover to drop a brushstroke wash at the cursor.

- **id**: `inkwash` · **kind**: canvas · **section**: world-patterns
- **tags**: ink, canvas2d, background, overlay · **vibe**: calm, meditative, cultural, minimal
- **culture**: China
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: inkwash — Ink Wash (canvas) · license MIT
     accuracy: Procedural approximation of Chinese ink wash painting; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-inkwash" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function inkwash(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.b=[];for(let i=0;i<5;i++)s.b.push({x:Math.random()*w,y:Math.random()*h,r:24+Math.random()*40,p:Math.random()*6});} ctx.fillStyle='#f3efe6';ctx.fillRect(0,0,w,h);
      for(const b of s.b){ const cx=b.x+Math.sin(t*0.2+b.p)*22,cy=b.y+Math.cos(t*0.17+b.p)*16; const g=ctx.createRadialGradient(cx,cy,0,cx,cy,b.r); g.addColorStop(0,'rgba(18,18,22,0.5)');g.addColorStop(0.6,'rgba(28,28,34,0.2)');g.addColorStop(1,'rgba(40,40,46,0)'); ctx.fillStyle=g;ctx.beginPath();ctx.arc(cx,cy,b.r,0,7);ctx.fill(); }
      if(mx>=0){ const g=ctx.createRadialGradient(mx,my,0,mx,my,42);g.addColorStop(0,'rgba(8,8,12,0.55)');g.addColorStop(1,'rgba(8,8,12,0)');ctx.fillStyle=g;ctx.beginPath();ctx.arc(mx,my,42,0,7);ctx.fill(); } };
const cv = document.getElementById('fx-inkwash');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Ink blob positions generated once on first frame via Math.random. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Chinese ink wash painting; not a faithful reproduction of any specific historical motif.
- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Ink blob positions generated once on first frame via Math.random.; remount to reset.


---

# Op-Art Moiré (canvas)

> Black-and-white concentric rings create a dizzying moiré illusion; cursor shifts the offset.

- **id**: `opart` · **kind**: canvas · **section**: design-movements
- **tags**: moire, canvas2d, optical, rings, geometry · **vibe**: hypnotic, geometric
- **culture**: Op-Art / optical illusion
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: opart — Op-Art Moiré (canvas) · license MIT -->
<canvas id="fx-opart" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function opart(ctx,w,h,t,mx,my){ ctx.fillStyle='#fff';ctx.fillRect(0,0,w,h); const cx=mx>=0?mx:w*0.5+Math.sin(t*0.6)*w*0.22, cy=my>=0?my:h*0.5+Math.cos(t*0.5)*h*0.22; const R=Math.hypot(w,h);
      ctx.lineWidth=7;ctx.strokeStyle='#0a0a0a'; for(let r=4;r<R;r+=14){ctx.beginPath();ctx.arc(w*0.5,h*0.5,r,0,7);ctx.stroke();}
      ctx.globalCompositeOperation='difference';ctx.strokeStyle='#fff'; for(let r=4;r<R;r+=14){ctx.beginPath();ctx.arc(cx,cy,r,0,7);ctx.stroke();} ctx.globalCompositeOperation='source-over'; };
const cv = document.getElementById('fx-opart');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Bauhaus (canvas)

> Bold Bauhaus shapes — blue circle, red arc, yellow triangle — slow-turn in primary colours.

- **id**: `bauhaus` · **kind**: canvas · **section**: design-movements
- **tags**: geometry, canvas2d, curves, lines · **vibe**: elegant, geometric, minimal
- **culture**: Bauhaus / design movement
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: bauhaus — Bauhaus (canvas) · license MIT -->
<canvas id="fx-bauhaus" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function bauhaus(ctx,w,h,t){ ctx.fillStyle='#e8e2d4';ctx.fillRect(0,0,w,h); const a=t*0.3,M=Math.min(w,h);
      ctx.fillStyle='#2b4a9b';ctx.beginPath();ctx.arc(w*0.32,h*0.4,M*0.26,0,7);ctx.fill();
      ctx.save();ctx.translate(w*0.7,h*0.62);ctx.rotate(a);ctx.fillStyle='#d23b2a';ctx.beginPath();ctx.arc(0,0,M*0.2,0,Math.PI);ctx.fill();ctx.restore();
      ctx.fillStyle='#e8b53a';ctx.beginPath();ctx.moveTo(w*0.55,h*0.08);ctx.lineTo(w*0.82,h*0.08);ctx.lineTo(w*0.55,h*0.42);ctx.closePath();ctx.fill();
      ctx.fillStyle='#1a1a1a';ctx.fillRect(w*0.1,h*0.76,w*0.8,6);ctx.fillRect(w*0.12,h*0.86,w*0.46,6); };
const cv = document.getElementById('fx-bauhaus');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Memphis 80s (canvas)

> Neon Memphis shapes drift and spin on dark; vibrant 80s pop-design energy.

- **id**: `memphis` · **kind**: canvas · **section**: design-movements
- **tags**: geometry, canvas2d, particles, lines · **vibe**: playful, energetic, retro
- **culture**: Memphis / pop design
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: memphis — Memphis 80s (canvas) · license MIT -->
<canvas id="fx-memphis" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function memphis(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.sh=[];for(let i=0;i<16;i++)s.sh.push({x:Math.random()*w,y:Math.random()*h,k:i%4,c:i%5,r:8+Math.random()*15,p:Math.random()*6});} ctx.fillStyle='#0f1020';ctx.fillRect(0,0,w,h); const cols=['#ff5a8a','#34d1c4','#ffd23f','#7b6cf6','#ff8f3f'];
      for(const o of s.sh){ const y=o.y+Math.sin(t*0.6+o.p)*6; ctx.fillStyle=cols[o.c];ctx.strokeStyle=cols[o.c];ctx.lineWidth=3; ctx.save();ctx.translate(o.x,y);ctx.rotate(t*0.2+o.p);
        if(o.k===0){ctx.beginPath();ctx.arc(0,0,o.r,0,7);ctx.fill();} else if(o.k===1){ctx.beginPath();ctx.moveTo(-o.r,o.r);ctx.lineTo(0,-o.r);ctx.lineTo(o.r,o.r);ctx.closePath();ctx.fill();} else if(o.k===2){ctx.beginPath();ctx.arc(0,0,o.r,0,7);ctx.stroke();} else {ctx.beginPath();ctx.moveTo(-o.r,0);ctx.lineTo(o.r,0);ctx.moveTo(0,-o.r);ctx.lineTo(0,o.r);ctx.stroke();} ctx.restore(); } };
const cv = document.getElementById('fx-memphis');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# Matrix Rain (canvas)

> Green Katakana glyphs cascade in columns on black; iconic hacker-terminal rain effect.

- **id**: `matrix` · **kind**: canvas · **section**: data-and-system
- **tags**: ascii, canvas2d, rain, trail, neon · **vibe**: retro, dramatic, technical
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: matrix — Matrix Rain (canvas) · license MIT -->
<canvas id="fx-matrix" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function matrix(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.cols=Math.floor(w/12);s.y=[];for(let i=0;i<s.cols;i++)s.y[i]=Math.random()*h;} ctx.fillStyle='rgba(2,8,4,0.16)';ctx.fillRect(0,0,w,h); ctx.font='13px monospace';
      for(let i=0;i<s.cols;i++){ const x=i*12; ctx.fillStyle='rgba(190,255,205,0.95)';ctx.fillText(String.fromCharCode(0x30A0+Math.floor(Math.random()*92)),x,s.y[i]); ctx.fillStyle='rgba(60,220,120,0.4)';ctx.fillText(String.fromCharCode(0x30A0+Math.floor(Math.random()*92)),x,s.y[i]-15); s.y[i]+=8; if(s.y[i]>h&&Math.random()>0.975)s.y[i]=0; } };
const cv = document.getElementById('fx-matrix');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Column y-positions and character trails accumulate via partial alpha clear Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Column y-positions and character trails accumulate via partial alpha clear; remount to reset.


---

# Oscilloscope (canvas)

> Phosphor-green oscilloscope waveform glows on a dim CRT grid; calm technical atmosphere.

- **id**: `scope` · **kind**: canvas · **section**: data-and-system
- **tags**: oscilloscope, canvas2d, waves, glow, grid · **vibe**: calm, technical, retro
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: scope — Oscilloscope (canvas) · license MIT -->
<canvas id="fx-scope" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function scope(ctx,w,h,t){ ctx.fillStyle='#04140a';ctx.fillRect(0,0,w,h); ctx.strokeStyle='rgba(40,120,70,0.3)';ctx.lineWidth=1; for(let x=0;x<w;x+=w/8){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.stroke();} for(let y=0;y<h;y+=h/6){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke();}
      ctx.strokeStyle='#7CFFB0';ctx.lineWidth=2;ctx.shadowBlur=8;ctx.shadowColor='#7CFFB0';ctx.beginPath(); for(let x=0;x<=w;x+=2){const u=x/w;const y=h/2+Math.sin(u*12+t*3)*h*0.18*Math.sin(t*0.7)+Math.sin(u*30+t*5)*h*0.07;x?ctx.lineTo(x,y):ctx.moveTo(x,y);} ctx.stroke();ctx.shadowBlur=0; };
const cv = document.getElementById('fx-scope');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Starfield Warp (canvas)

> Stars streak inward at warp speed from a deep-space vanishing point; hypnotic forward pull.

- **id**: `starfield` · **kind**: canvas · **section**: data-and-system
- **tags**: starfield, canvas2d, stars, trail, tunnel · **vibe**: futuristic, hypnotic, energetic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: starfield — Starfield Warp (canvas) · license MIT -->
<canvas id="fx-starfield" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function starfield(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.st=[];for(let i=0;i<150;i++)s.st.push({x:(Math.random()-.5)*w,y:(Math.random()-.5)*h,z:Math.random()*w});} ctx.fillStyle='rgba(4,5,12,0.4)';ctx.fillRect(0,0,w,h); const cx=w/2,cy=h/2;
      for(const p of s.st){ p.z-=4; if(p.z<1){p.z=w;p.x=(Math.random()-.5)*w;p.y=(Math.random()-.5)*h;} const k=128/p.z,k2=128/(p.z+5); const x=cx+p.x*k,y=cy+p.y*k,px=cx+p.x*k2,py=cy+p.y*k2; const b=Math.min(1,(1-p.z/w)*1.6); ctx.strokeStyle='rgba('+(180+b*60|0)+','+(200+b*40|0)+',255,'+b.toFixed(2)+')';ctx.lineWidth=b*1.6;ctx.beginPath();ctx.moveTo(px,py);ctx.lineTo(x,y);ctx.stroke(); } };
const cv = document.getElementById('fx-starfield');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Star positions and warp-streak trails accumulate via partial alpha clear Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Star positions and warp-streak trails accumulate via partial alpha clear; remount to reset.


---

# Halftone CMYK (canvas)

> Warm CMYK halftone dots bloom from cursor position; editorial print-design feel.

- **id**: `halftone` · **kind**: canvas · **section**: post-and-print
- **tags**: halftone, dots, canvas2d, geometry · **vibe**: elegant, retro
- **culture**: print / design
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: halftone — Halftone CMYK (canvas) · license MIT -->
<canvas id="fx-halftone" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function halftone(ctx,w,h,t,mx,my){ ctx.fillStyle='#f4f1ea';ctx.fillRect(0,0,w,h); const cx=mx>=0?mx:w*0.5+Math.sin(t*0.5)*w*0.25, cy=my>=0?my:h*0.5+Math.cos(t*0.4)*h*0.25; const screens=[['rgba(0,170,235,0.8)',2,1],['rgba(236,0,140,0.72)',6,4],['rgba(255,210,0,0.78)',4,7]]; const S=10,maxd=Math.hypot(w,h)*0.62;
      ctx.globalCompositeOperation='multiply'; for(const sc of screens){ ctx.fillStyle=sc[0]; for(let y=sc[2];y<h;y+=S)for(let x=sc[1];x<w;x+=S){ const v=Math.max(0,1-Math.hypot(x-cx,y-cy)/maxd); const rad=v*S*0.62; if(rad>0.3){ctx.beginPath();ctx.arc(x,y,rad,0,7);ctx.fill();} } } ctx.globalCompositeOperation='source-over'; };
const cv = document.getElementById('fx-halftone');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# ASCII Field (canvas)

> Blue-purple ASCII characters pulse in sine-wave brightness waves; retro terminal glow.

- **id**: `ascii` · **kind**: canvas · **section**: post-and-print
- **tags**: ascii, canvas2d, waves, neon · **vibe**: retro, energetic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: ascii — ASCII Field (canvas) · license MIT -->
<canvas id="fx-ascii" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function ascii(ctx,w,h,t){ ctx.fillStyle='#0a0b0d';ctx.fillRect(0,0,w,h); const ramp=' .:-=+*#%@';ctx.font='12px monospace';ctx.textBaseline='top'; const S=11;
      for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){ const u=x/w,v=y/h; const n=0.5+0.5*Math.sin(u*8+t)*Math.cos(v*8-t*0.7)+0.3*Math.sin((u+v)*12+t*1.4); const b=Math.max(0,Math.min(1,n)); ctx.fillStyle='rgba(120,'+(180+b*60|0)+',255,'+(0.3+b*0.7).toFixed(2)+')'; ctx.fillText(ramp[Math.floor(b*(ramp.length-1))],x,y); } };
const cv = document.getElementById('fx-ascii');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Topographic (canvas)

> Animated teal contour lines map slowly shifting noise terrain; cursor warps the topology.

- **id**: `topo` · **kind**: canvas · **section**: data-and-system
- **tags**: terrain, canvas2d, noise, flow, lines · **vibe**: calm, ambient, organic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: topo — Topographic (canvas) · license MIT -->
<canvas id="fx-topo" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function topo(ctx,w,h,t,mx,my){ ctx.fillStyle='#0b1a18';ctx.fillRect(0,0,w,h); const warp=mx>=0?(mx/w-0.5):Math.sin(t*0.2)*0.3; const S=5;
      for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){ const vv=this.vnoise(x*0.012+warp,y*0.012+t*0.05); const band=Math.abs((vv*10)%1-0.5); if(band<0.05){const c=80+vv*120|0;ctx.fillStyle='rgba('+c+',220,180,0.85)';ctx.fillRect(x,y,S,S);} else {ctx.fillStyle='rgba(20,60,55,'+(0.08+vv*0.12).toFixed(2)+')';ctx.fillRect(x,y,S,S);} } };
function vhash(x,y){ let n=Math.sin(x*127.1+y*311.7)*43758.5453; return n-Math.floor(n); }
function vnoise(x,y){ const xi=Math.floor(x),yi=Math.floor(y),xf=x-xi,yf=y-yi; const u=xf*xf*(3-2*xf),v=yf*yf*(3-2*yf); const a=this.vhash(xi,yi),b=this.vhash(xi+1,yi),c=this.vhash(xi,yi+1),d=this.vhash(xi+1,yi+1); return a+(b-a)*u+(c-a)*v+(a-b-c+d)*u*v; }
const NOISE = { vhash, vnoise };
const cv = document.getElementById('fx-topo');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw.call(NOISE, ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Quasicrystal (canvas)

> Shimmering five-fold crystal interference; blue-purple moiré tiles slowly pulse and breathe.

- **id**: `quasicrystal` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: moire, optical, geometry, noise, canvas2d, background · **vibe**: hypnotic, psychedelic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: quasicrystal — Quasicrystal (canvas) · license MIT -->
<canvas id="fx-quasicrystal" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function quasicrystal(ctx,w,h,t){ const S=3; for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){ let v=0; for(let i=0;i<5;i++){const a=i*Math.PI/5; v+=Math.cos((x*Math.cos(a)+y*Math.sin(a))*0.07+t);} const c=Math.sin(v)*0.5+0.5; ctx.fillStyle='rgb('+(c*255|0)+','+(c*150|0)+','+((1-c)*255|0)+')'; ctx.fillRect(x,y,S,S);} };
const cv = document.getElementById('fx-quasicrystal');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Phyllotaxis (canvas)

> Sunflower spiral of rainbow glowing dots; golden-angle phyllotaxis slowly rotating outward.

- **id**: `phyllotaxis` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: dots, spiral, geometry, particles, canvas2d, background · **vibe**: calm, meditative, organic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: phyllotaxis — Phyllotaxis (canvas) · license MIT -->
<canvas id="fx-phyllotaxis" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function phyllotaxis(ctx,w,h,t){ ctx.fillStyle='#0a0b12';ctx.fillRect(0,0,w,h); const cx=w/2,cy=h/2,g=2.399963; for(let i=0;i<420;i++){const r=Math.sqrt(i)*5.4,a=i*g+t*0.2; ctx.fillStyle='hsl('+((i*0.8+t*20)%360)+',70%,60%)'; ctx.beginPath();ctx.arc(cx+Math.cos(a)*r,cy+Math.sin(a)*r,2.2,0,7);ctx.fill();} };
const cv = document.getElementById('fx-phyllotaxis');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Rose Curve (canvas)

> Soft pink rose curve cycling through 3-to-8-petal forms on a dark field; elegant math bloom.

- **id**: `rose` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: curves, geometry, spiral, rings, canvas2d, inline · **vibe**: elegant, minimal, calm
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: rose — Rose Curve (canvas) · license MIT -->
<canvas id="fx-rose" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function rose(ctx,w,h,t){ ctx.fillStyle='#0b0a12';ctx.fillRect(0,0,w,h); const cx=w/2,cy=h/2,R=Math.min(w,h)*0.42,k=Math.floor(t*0.2)%6+3; ctx.strokeStyle='#ff7ab0';ctx.lineWidth=1.5;ctx.beginPath(); for(let a=0;a<6.30;a+=0.01){const r=R*Math.cos(k*a);a?ctx.lineTo(cx+Math.cos(a)*r,cy+Math.sin(a)*r):ctx.moveTo(cx+Math.cos(a)*r,cy+Math.sin(a)*r);} ctx.stroke(); };
const cv = document.getElementById('fx-rose');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Spirograph (canvas)

> Electric-blue spirograph tracing a hypotrochoid; intricate lace-like winding slowly rotates.

- **id**: `spiro` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: curves, spiral, geometry, rings, canvas2d, inline · **vibe**: elegant, hypnotic, geometric
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: spiro — Spirograph (canvas) · license MIT -->
<canvas id="fx-spiro" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function spiro(ctx,w,h,t){ ctx.fillStyle='#08101a';ctx.fillRect(0,0,w,h); const cx=w/2,cy=h/2,R=Math.min(w,h)*0.34,r=R*0.55,d=R*0.72; ctx.strokeStyle='#6fd0ff';ctx.lineWidth=1;ctx.beginPath(); for(let a=0;a<37.7;a+=0.03){const x=cx+(R-r)*Math.cos(a)+d*Math.cos((R-r)/r*a+t),y=cy+(R-r)*Math.sin(a)-d*Math.sin((R-r)/r*a+t);a?ctx.lineTo(x,y):ctx.moveTo(x,y);} ctx.stroke(); };
const cv = document.getElementById('fx-spiro');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Lissajous (canvas)

> Glowing green Lissajous figure cycling through phase; oscilloscope curve on dark background.

- **id**: `lissajous` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: curves, oscilloscope, geometry, lines, canvas2d, background · **vibe**: hypnotic, technical, minimal
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: lissajous — Lissajous (canvas) · license MIT -->
<canvas id="fx-lissajous" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function lissajous(ctx,w,h,t){ ctx.fillStyle='#0a0e0a';ctx.fillRect(0,0,w,h); const cx=w/2,cy=h/2,A=w*0.4,B=h*0.4; ctx.strokeStyle='#9CFF6A';ctx.lineWidth=1.5;ctx.shadowBlur=6;ctx.shadowColor='#9CFF6A';ctx.beginPath(); for(let i=0;i<=600;i++){const u=i/600*6.2831;i?ctx.lineTo(cx+Math.sin(u*3+t)*A,cy+Math.sin(u*4)*B):ctx.moveTo(cx+Math.sin(u*3+t)*A,cy+Math.sin(u*4)*B);} ctx.stroke();ctx.shadowBlur=0; };
const cv = document.getElementById('fx-lissajous');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Superformula (canvas)

> Purple superformula outline morphing through stars, flowers, and polygons; organic math shapes.

- **id**: `superformula` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: curves, geometry, rings, spiral, canvas2d, inline · **vibe**: elegant, hypnotic, organic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: superformula — Superformula (canvas) · license MIT -->
<canvas id="fx-superformula" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function superformula(ctx,w,h,t){ ctx.fillStyle='#0c0a14';ctx.fillRect(0,0,w,h); const cx=w/2,cy=h/2,S=Math.min(w,h)*0.36,m=Math.floor(2+t*0.3)%14; const sf=(a)=>Math.pow(Math.pow(Math.abs(Math.cos(m*a/4)),7)+Math.pow(Math.abs(Math.sin(m*a/4)),7),-1/7); ctx.strokeStyle='#c79bff';ctx.lineWidth=2;ctx.beginPath(); for(let a=0;a<6.2831;a+=0.01){const r=sf(a)*S;a?ctx.lineTo(cx+Math.cos(a)*r,cy+Math.sin(a)*r):ctx.moveTo(cx+Math.cos(a)*r,cy+Math.sin(a)*r);} ctx.closePath();ctx.stroke(); };
const cv = document.getElementById('fx-superformula');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Hex Grid (canvas)

> Pulsing blue honeycomb grid; a rippling brightness wave sweeps across hex cells.

- **id**: `hexgrid` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: hexgrid, geometry, grid, waves, canvas2d, background · **vibe**: technical, futuristic, ambient
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: hexgrid — Hex Grid (canvas) · license MIT -->
<canvas id="fx-hexgrid" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function hexgrid(ctx,w,h,t){ ctx.fillStyle='#0a0d12';ctx.fillRect(0,0,w,h);const R=17,SQ=Math.sqrt(3); ctx.lineWidth=1.2; for(let row=0,y=0;y<h+R;row++,y+=R*1.5)for(let x=0;x<w+R;x+=R*SQ){const cx=x+(row%2)*R*SQ/2,cy=y,ph=0.5+0.5*Math.sin(t*2-(cx+cy)*0.02); ctx.strokeStyle='rgba(100,210,255,'+(0.2+ph*0.6).toFixed(2)+')';ctx.beginPath();for(let i=0;i<6;i++){const a=i*Math.PI/3+Math.PI/6;i?ctx.lineTo(cx+Math.cos(a)*R,cy+Math.sin(a)*R):ctx.moveTo(cx+Math.cos(a)*R,cy+Math.sin(a)*R);}ctx.closePath();ctx.stroke();} };
const cv = document.getElementById('fx-hexgrid');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Concentric (canvas)

> Rainbow concentric squares scrolling outward from center; bold, cycling hue tunnel effect.

- **id**: `concentric` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: geometry, rings, optical, grid, canvas2d, background · **vibe**: psychedelic, energetic, hypnotic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: concentric — Concentric (canvas) · license MIT -->
<canvas id="fx-concentric" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function concentric(ctx,w,h,t){ ctx.fillStyle='#120a0a';ctx.fillRect(0,0,w,h);const cx=w/2,cy=h/2,M=Math.max(w,h); for(let i=0;i<26;i++){const s=(i*14+t*20)%M; ctx.strokeStyle='hsl('+((i*12+t*30)%360)+',65%,58%)';ctx.lineWidth=4;ctx.strokeRect(cx-s/2,cy-s/2,s,s);} };
const cv = document.getElementById('fx-concentric');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Spiral (canvas)

> Clean white Archimedean spiral slowly rotating on pure black; minimal and meditative.

- **id**: `spiralarc` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: spiral, curves, geometry, lines, canvas2d, background · **vibe**: minimal, meditative, calm
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: spiralarc — Spiral (canvas) · license MIT -->
<canvas id="fx-spiralarc" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function spiralarc(ctx,w,h,t){ ctx.fillStyle='#0a0a0a';ctx.fillRect(0,0,w,h);const cx=w/2,cy=h/2; ctx.strokeStyle='#fff';ctx.lineWidth=2;ctx.beginPath(); for(let a=0;a<44;a+=0.1){const r=a*2.2;a?ctx.lineTo(cx+Math.cos(a+t)*r,cy+Math.sin(a+t)*r):ctx.moveTo(cx+Math.cos(a+t)*r,cy+Math.sin(a+t)*r);} ctx.stroke(); };
const cv = document.getElementById('fx-spiralarc');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Interference (canvas)

> Blue interference fringes from two point-sources pulsing across canvas; hypnotic wave moiré.

- **id**: `interference` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: moire, waves, optical, noise, canvas2d, background · **vibe**: hypnotic, technical, psychedelic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: interference — Interference (canvas) · license MIT -->
<canvas id="fx-interference" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function interference(ctx,w,h,t){ const S=4,s1x=w*0.35,s1y=h*0.5,s2x=w*0.65+Math.sin(t)*20,s2y=h*0.5; for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){const v=Math.sin(Math.hypot(x-s1x,y-s1y)*0.2-t*3)+Math.sin(Math.hypot(x-s2x,y-s2y)*0.2-t*3),c=(v*0.25+0.5)*255|0; ctx.fillStyle='rgb('+(c*0.3|0)+','+(c*0.7|0)+','+c+')';ctx.fillRect(x,y,S,S);} };
const cv = document.getElementById('fx-interference');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Chevron (canvas)

> Scrolling multicolor chevron stripes; vivid zigzag rows stream in retro palette.

- **id**: `chevron` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: chevron, stripes, geometry, lines, canvas2d, background · **vibe**: energetic, playful, retro
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: chevron — Chevron (canvas) · license MIT -->
<canvas id="fx-chevron" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function chevron(ctx,w,h,t){ const cols=['#ff6b5a','#ffd23f','#34d1c4','#7b6cf6'],S=26,off=(t*20)%(S*2); for(let r=0,y=-S;y<h+S;r++,y+=S/2+0)for(let x=-S*2;x<w+S;x+=S*2){ctx.strokeStyle=cols[r%4];ctx.lineWidth=4;ctx.beginPath();ctx.moveTo(x+off,y+S/2);ctx.lineTo(x+S+off,y);ctx.lineTo(x+2*S+off,y+S/2);ctx.stroke();} };
const cv = document.getElementById('fx-chevron');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Herringbone (canvas)

> Warm gold herringbone tile weave on dark brown; a rich static textile pattern.

- **id**: `herringbone` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: geometry, tiling, weave, stripes, canvas2d, background · **vibe**: elegant, cozy, retro
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger none
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: herringbone — Herringbone (canvas) · license MIT -->
<canvas id="fx-herringbone" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function herringbone(ctx,w,h,t){ ctx.fillStyle='#16140f';ctx.fillRect(0,0,w,h);const L=22,W=8; ctx.fillStyle='#c9a86a'; for(let y=-L,r=0;y<h+L;y+=W*2,r++)for(let x=-L;x<w+L;x+=L){ctx.save();ctx.translate(x+(r%2)*L/2,y);ctx.rotate(((Math.floor(x/L)+r)%2?1:-1)*Math.PI/4);ctx.fillRect(0,0,L,W);ctx.restore();} };
const cv = document.getElementById('fx-herringbone');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Polka Dots (canvas)

> White polka dots gently breathing on vivid hot-pink; cheerful and playful pop-art pattern.

- **id**: `polka` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: dots, geometry, grid, canvas2d, background · **vibe**: playful, energetic, retro
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: polka — Polka Dots (canvas) · license MIT -->
<canvas id="fx-polka" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function polka(ctx,w,h,t){ ctx.fillStyle='#e8366b';ctx.fillRect(0,0,w,h);ctx.fillStyle='#fff';const S=28; for(let row=0,y=0;y<h+S;row++,y+=S)for(let x=0;x<w+S;x+=S){const r=6+2*Math.sin(t*2+x*0.05+y*0.05);ctx.beginPath();ctx.arc(x+(row%2)*S/2,y,r,0,7);ctx.fill();} };
const cv = document.getElementById('fx-polka');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Houndstooth (canvas)

> Classic black-and-white houndstooth check slowly scrolling; crisp tailoring pattern.

- **id**: `houndstooth` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: geometry, tiling, stripes, grid, canvas2d, background · **vibe**: elegant, retro, minimal
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: houndstooth — Houndstooth (canvas) · license MIT -->
<canvas id="fx-houndstooth" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function houndstooth(ctx,w,h,t){ ctx.fillStyle='#fff';ctx.fillRect(0,0,w,h);ctx.fillStyle='#111';const S=20,off=(t*10)%S; for(let y=-S;y<h+S;y+=S)for(let x=-S;x<w+S;x+=S){const px=x+off;ctx.fillRect(px,y,S/2,S/2);ctx.beginPath();ctx.moveTo(px+S/2,y);ctx.lineTo(px+S,y);ctx.lineTo(px+S/2,y+S/2);ctx.closePath();ctx.fill();ctx.beginPath();ctx.moveTo(px,y+S/2);ctx.lineTo(px+S/2,y+S);ctx.lineTo(px,y+S);ctx.closePath();ctx.fill();} };
const cv = document.getElementById('fx-houndstooth');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Tartan Plaid (canvas)

> Scrolling tartan plaid in forest green, red, and cream; classic Scottish textile in motion.

- **id**: `plaid` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: stripes, geometry, tiling, grid, canvas2d, background · **vibe**: cozy, retro, elegant
- **culture**: Scotland
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: plaid — Tartan Plaid (canvas) · license MIT -->
<canvas id="fx-plaid" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function plaid(ctx,w,h,t){ ctx.fillStyle='#13362a';ctx.fillRect(0,0,w,h);const bands=[['rgba(220,60,50,0.55)',0,14],['rgba(240,225,185,0.45)',18,4],['rgba(40,40,70,0.5)',30,10]],o=(t*8)%40; for(let p=-40;p<w;p+=40)for(const b of bands){ctx.fillStyle=b[0];ctx.fillRect(p+b[1]+o,0,b[2],h);} for(let p=-40;p<h;p+=40)for(const b of bands){ctx.fillStyle=b[0];ctx.fillRect(0,p+b[1]+o,w,b[2]);} };
const cv = document.getElementById('fx-plaid');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Starburst (canvas)

> Yellow and pink radiating wedges slowly spinning; bold retro sunburst from canvas center.

- **id**: `starburst` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: geometry, spiral, rings, lines, canvas2d, background · **vibe**: energetic, playful, retro
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: starburst — Starburst (canvas) · license MIT -->
<canvas id="fx-starburst" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function starburst(ctx,w,h,t){ ctx.fillStyle='#0a0a14';ctx.fillRect(0,0,w,h);const cx=w/2,cy=h/2,N=40,D=Math.hypot(w,h); for(let i=0;i<N;i++){const a=i/N*6.2831+t*0.1;ctx.fillStyle=i%2?'#ffd23f':'#ff5a8a';ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(cx+Math.cos(a)*D,cy+Math.sin(a)*D);ctx.lineTo(cx+Math.cos(a+6.2831/N)*D,cy+Math.sin(a+6.2831/N)*D);ctx.closePath();ctx.fill();} };
const cv = document.getElementById('fx-starburst');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Wave Lines (canvas)

> Stacked rainbow sine waves undulating on dark blue-black; hypnotic layered ribbon flow.

- **id**: `wavelines` · **kind**: canvas · **section**: geometry-and-curves
- **tags**: waves, lines, geometry, flow, canvas2d, background · **vibe**: calm, ambient, hypnotic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: wavelines — Wave Lines (canvas) · license MIT -->
<canvas id="fx-wavelines" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function wavelines(ctx,w,h,t){ ctx.fillStyle='#070a14';ctx.fillRect(0,0,w,h);ctx.lineWidth=1.6; for(let i=0;i<20;i++){ctx.strokeStyle='hsl('+((200+i*6)%360)+',80%,60%)';ctx.beginPath();for(let x=0;x<=w;x+=4){const y=h*0.5+Math.sin(x*0.02+t+i*0.4)*(20+i*3)*Math.sin(t*0.5+i);x?ctx.lineTo(x,y):ctx.moveTo(x,y);}ctx.stroke();} };
const cv = document.getElementById('fx-wavelines');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Mandelbrot (canvas)

> Hypnotic zoom into the Mandelbrot set; cycling hues trace infinite fractal complexity.

- **id**: `mandelbrot` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: fractal, geometry, curves, pixel · **vibe**: hypnotic, psychedelic, meditative
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: mandelbrot — Mandelbrot (canvas) · license MIT -->
<canvas id="fx-mandelbrot" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function mandelbrot(ctx,w,h,t){ const S=2,zoom=1.7+Math.sin(t*0.1)*0.6,cx=-0.745,cy=0.115; for(let py=0;py<h;py+=S)for(let px=0;px<w;px+=S){const x0=(px/w-0.5)*zoom+cx,y0=(py/h-0.5)*zoom*(h/w)+cy;let x=0,y=0,i=0;for(;i<42&&x*x+y*y<4;i++){const xt=x*x-y*y+x0;y=2*x*y+y0;x=xt;}const c=i===42?0:i/42;ctx.fillStyle='hsl('+((c*300+t*20)%360)+','+(c>0?70:0)+'%,'+(c*55|0)+'%)';ctx.fillRect(px,py,S,S);} };
const cv = document.getElementById('fx-mandelbrot');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Julia Set (canvas)

> Julia set blooms through parameter space; vivid fractal shapes drift and morph in cyan-blue.

- **id**: `julia` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: fractal, geometry, curves, pixel · **vibe**: hypnotic, psychedelic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: julia — Julia Set (canvas) · license MIT -->
<canvas id="fx-julia" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function julia(ctx,w,h,t){ const S=2,jx=0.7885*Math.cos(t*0.3),jy=0.7885*Math.sin(t*0.3),zoom=3; for(let py=0;py<h;py+=S)for(let px=0;px<w;px+=S){let x=(px/w-0.5)*zoom*(w/h),y=(py/h-0.5)*zoom,i=0;for(;i<48&&x*x+y*y<4;i++){const xt=x*x-y*y+jx;y=2*x*y+jy;x=xt;}const c=i/48;ctx.fillStyle='hsl('+((200+c*200)%360)+',80%,'+(c*60|0)+'%)';ctx.fillRect(px,py,S,S);} };
const cv = document.getElementById('fx-julia');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Clifford Attractor (canvas)

> Electric-blue dust swirls into alien strange-attractor shapes; meditative accumulator on dark.

- **id**: `clifford` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: attractor, geometry, curves, particles · **vibe**: hypnotic, ambient, technical
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: clifford — Clifford Attractor (canvas) · license MIT -->
<canvas id="fx-clifford" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function clifford(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.x=0.1;s.y=0.1;ctx.fillStyle='#06070c';ctx.fillRect(0,0,w,h);}else{ctx.fillStyle='rgba(6,7,12,0.05)';ctx.fillRect(0,0,w,h);} const a=-1.4+Math.sin(t*0.1)*0.3,b=1.6,c=1.0,d=0.7;ctx.fillStyle='rgba(130,210,255,0.5)';for(let i=0;i<2200;i++){const nx=Math.sin(a*s.y)+c*Math.cos(a*s.x),ny=Math.sin(b*s.x)+d*Math.cos(b*s.y);s.x=nx;s.y=ny;ctx.fillRect(w/2+nx*w*0.22,h/2+ny*h*0.22,1,1);} };
const cv = document.getElementById('fx-clifford');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Accumulates 2200 dots per frame; canvas only partially erased each frame (alpha fade, not full clear). Reduced motion: freeze.

## Known limitations

- Accumulates state across frames — Accumulates 2200 dots per frame; canvas only partially erased each frame (alpha fade, not full clear).; remount to reset.


---

# De Jong (canvas)

> Pink dust drifts into strange alien loops; a De Jong attractor slowly builds on dark violet.

- **id**: `dejong` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: attractor, geometry, curves, particles · **vibe**: hypnotic, ambient, technical
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: dejong — De Jong (canvas) · license MIT -->
<canvas id="fx-dejong" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function dejong(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.x=0;s.y=0;ctx.fillStyle='#0a060c';ctx.fillRect(0,0,w,h);}else{ctx.fillStyle='rgba(10,6,12,0.05)';ctx.fillRect(0,0,w,h);} const a=1.4+Math.sin(t*0.07),b=-2.3,c=2.4,d=-2.1;ctx.fillStyle='rgba(255,150,200,0.5)';for(let i=0;i<2200;i++){const nx=Math.sin(a*s.y)-Math.cos(b*s.x),ny=Math.sin(c*s.x)-Math.cos(d*s.y);s.x=nx;s.y=ny;ctx.fillRect(w/2+nx*w*0.2,h/2+ny*h*0.2,1,1);} };
const cv = document.getElementById('fx-dejong');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Accumulates 2200 dots per frame; canvas only partially erased each frame (alpha fade, not full clear). Reduced motion: freeze.

## Known limitations

- Accumulates state across frames — Accumulates 2200 dots per frame; canvas only partially erased each frame (alpha fade, not full clear).; remount to reset.


---

# Lorenz (canvas)

> Electric-blue butterfly trace of the Lorenz attractor; calm chaotic orbit on dark navy.

- **id**: `lorenz` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: attractor, curves, geometry, trail · **vibe**: calm, ambient, technical, hypnotic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: lorenz — Lorenz (canvas) · license MIT -->
<canvas id="fx-lorenz" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function lorenz(ctx,w,h,t,mx,my,s){ if(!s.init){s.init=1;s.x=0.1;s.y=0;s.z=0;s.pts=[];} for(let i=0;i<8;i++){const dx=10*(s.y-s.x),dy=s.x*(28-s.z)-s.y,dz=s.x*s.y-8/3*s.z;s.x+=dx*0.008;s.y+=dy*0.008;s.z+=dz*0.008;s.pts.push([s.x,s.z]);} if(s.pts.length>900)s.pts.splice(0,s.pts.length-900); ctx.fillStyle='#05060a';ctx.fillRect(0,0,w,h);ctx.strokeStyle='#7fd0ff';ctx.lineWidth=1;ctx.globalAlpha=0.7;ctx.beginPath();for(let i=0;i<s.pts.length;i++){const p=s.pts[i],x=w/2+p[0]*w*0.018,y=h*0.92-p[1]*h*0.026;i?ctx.lineTo(x,y):ctx.moveTo(x,y);}ctx.stroke();ctx.globalAlpha=1; };
const cv = document.getElementById('fx-lorenz');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Accumulates up to 900 XZ path points across frames. Reduced motion: freeze.

## Known limitations

- Accumulates state across frames — Accumulates up to 900 XZ path points across frames.; remount to reset.


---

# Barnsley Fern (canvas)

> Bright green Barnsley fern materializes from chaos; organic fractal nature on dark green.

- **id**: `fern` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: fractal, particles, geometry, noise · **vibe**: calm, organic, meditative
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: fern — Barnsley Fern (canvas) · license MIT -->
<canvas id="fx-fern" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function fern(ctx,w,h,t){ ctx.fillStyle='#060c06';ctx.fillRect(0,0,w,h);ctx.fillStyle='rgba(120,230,120,0.7)';let x=0,y=0;for(let i=0;i<7000;i++){const r=Math.random();let nx,ny;if(r<0.01){nx=0;ny=0.16*y;}else if(r<0.86){nx=0.85*x+0.04*y;ny=-0.04*x+0.85*y+1.6;}else if(r<0.93){nx=0.2*x-0.26*y;ny=0.23*x+0.22*y+1.6;}else{nx=-0.15*x+0.28*y;ny=0.26*x+0.24*y+0.44;}x=nx;y=ny;ctx.fillRect(w/2+x*w*0.085,h-y*h*0.095,1,1);} };
const cv = document.getElementById('fx-fern');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# Sierpinski (canvas)

> Warm amber Sierpinski triangle emerges from the chaos game; minimal fractal on dark.

- **id**: `sierpinski` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: fractal, geometry, particles, dots · **vibe**: minimal, geometric, hypnotic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: sierpinski — Sierpinski (canvas) · license MIT -->
<canvas id="fx-sierpinski" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function sierpinski(ctx,w,h,t){ ctx.fillStyle='#0a0a0f';ctx.fillRect(0,0,w,h);const V=[[w/2,8],[8,h-8],[w-8,h-8]];let x=w/2,y=h/2;ctx.fillStyle='rgba(255,210,120,0.7)';for(let i=0;i<7000;i++){const v=V[Math.floor(Math.random()*3)];x=(x+v[0])/2;y=(y+v[1])/2;if(i>10)ctx.fillRect(x,y,1,1);} };
const cv = document.getElementById('fx-sierpinski');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# Dragon Curve (canvas)

> Purple dragon-curve fractal slowly rotates; clean self-similar line on dark violet.

- **id**: `dragon` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: fractal, curves, geometry, lines · **vibe**: minimal, geometric, hypnotic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: dragon — Dragon Curve (canvas) · license MIT -->
<canvas id="fx-dragon" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function dragon(ctx,w,h,t,mx,my,s){ if(!s.seq){let seq=[1];for(let g=0;g<11;g++){const rev=seq.slice().reverse().map(v=>v?0:1);seq=seq.concat([1],rev);}s.seq=seq;} ctx.fillStyle='#0b0a14';ctx.fillRect(0,0,w,h);ctx.strokeStyle='#a98bff';ctx.lineWidth=1;let x=w*0.62,y=h*0.42,dir=Math.PI+t*0.05;ctx.beginPath();ctx.moveTo(x,y);for(const turn of s.seq){dir+=turn?1.5708:-1.5708;x+=Math.cos(dir)*3.2;y+=Math.sin(dir)*3.2;ctx.lineTo(x,y);}ctx.stroke(); };
const cv = document.getElementById('fx-dragon');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Fractal Tree (canvas)

> Wind-blown fractal tree sways gently; organic green branches on dark, calm and alive.

- **id**: `fractaltree` · **kind**: canvas · **section**: fractal-and-chaos
- **tags**: fractal, curves, geometry, lines · **vibe**: calm, organic, ambient
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: fractaltree — Fractal Tree (canvas) · license MIT -->
<canvas id="fx-fractaltree" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function fractaltree(ctx,w,h,t){ ctx.fillStyle='#0a0c0a';ctx.fillRect(0,0,w,h);const ang=0.35+Math.sin(t*0.6)*0.25;const br=(x,y,len,a,d)=>{if(d>9||len<2)return;const x2=x+Math.cos(a)*len,y2=y+Math.sin(a)*len;ctx.strokeStyle='hsl('+(110+d*8)+','+(50+d*4)+'%,'+(30+d*5)+'%)';ctx.lineWidth=10-d;ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x2,y2);ctx.stroke();br(x2,y2,len*0.74,a-ang,d+1);br(x2,y2,len*0.74,a+ang,d+1);};br(w/2,h-6,h*0.22,-1.5708,0); };
const cv = document.getElementById('fx-fractaltree');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Game of Life (canvas)

> Glowing green cells flicker on a dark grid; Conway's Game of Life evolves hypnotic patterns.

- **id**: `life` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: cellular, grid, dots, geometry, canvas2d, background · **vibe**: hypnotic, technical, geometric
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: life — Game of Life (canvas) · license MIT -->
<canvas id="fx-life" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function life(ctx,w,h,t,mx,my,s){ const C=8,gw=Math.ceil(w/C),gh=Math.ceil(h/C),N=gw*gh;if(!s.g||s.gw!==gw){s.gw=gw;s.gh=gh;s.g=new Uint8Array(N);for(let i=0;i<N;i++)s.g[i]=Math.random()<0.3?1:0;s.acc=0;}s.acc++;if(s.acc%4===0){const n=new Uint8Array(N);let alive=0;for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){let c=0;for(let dy=-1;dy<=1;dy++)for(let dx=-1;dx<=1;dx++)if(dx||dy){c+=s.g[((y+dy+gh)%gh)*gw+(x+dx+gw)%gw];}const a=s.g[y*gw+x],v=(a&&(c===2||c===3))||(!a&&c===3)?1:0;n[y*gw+x]=v;alive+=v;}for(let k=0;k<3;k++)n[(Math.random()*N)|0]=1;if(alive<N*0.06){const bx=(Math.random()*gw)|0,by=(Math.random()*gh)|0;for(let dy=0;dy<8;dy++)for(let dx=0;dx<8;dx++)if(Math.random()<0.5)n[((by+dy)%gh)*gw+(bx+dx)%gw]=1;}s.g=n;}ctx.fillStyle='#070b07';ctx.fillRect(0,0,w,h);ctx.fillStyle='#6bf08a';for(let y=0;y<gh;y++)for(let x=0;x<gw;x++)if(s.g[y*gw+x])ctx.fillRect(x*C,y*C,C-1,C-1); };
const cv = document.getElementById('fx-life');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Uint8Array cell grid accumulates across frames; never cleared between generation steps. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Uint8Array cell grid accumulates across frames; never cleared between generation steps.; remount to reset.


---

# Brian's Brain (canvas)

> White sparks and blue trailing echoes pulse across a dark grid; three-state cellular automaton.

- **id**: `briansbrain` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: cellular, grid, dots, particles, neon, canvas2d, background · **vibe**: hypnotic, technical, energetic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: briansbrain — Brian's Brain (canvas) · license MIT -->
<canvas id="fx-briansbrain" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function briansbrain(ctx,w,h,t,mx,my,s){ const C=7,gw=Math.ceil(w/C),gh=Math.ceil(h/C),N=gw*gh;if(!s.g||s.gw!==gw){s.gw=gw;s.gh=gh;s.g=new Uint8Array(N);for(let i=0;i<N;i++)s.g[i]=Math.random()<0.25?1:0;s.acc=0;}s.acc++;if(s.acc%4===0){const n=new Uint8Array(N);let firing=0;for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){const i=y*gw+x;if(s.g[i]===1)n[i]=2;else if(s.g[i]===2)n[i]=0;else{let c=0;for(let dy=-1;dy<=1;dy++)for(let dx=-1;dx<=1;dx++)if(dx||dy){if(s.g[((y+dy+gh)%gh)*gw+(x+dx+gw)%gw]===1)c++;}n[i]=c===2?1:0;}if(n[i]===1)firing++;}if(firing<N*0.02){const bx=(Math.random()*gw)|0,by=(Math.random()*gh)|0;for(let dy=0;dy<10;dy++)for(let dx=0;dx<10;dx++)if(Math.random()<0.4)n[((by+dy)%gh)*gw+(bx+dx)%gw]=1;}s.g=n;}ctx.fillStyle='#04060c';ctx.fillRect(0,0,w,h);for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){const v=s.g[y*gw+x];if(v){ctx.fillStyle=v===1?'#fff':'#3a6cff';ctx.fillRect(x*C,y*C,C-1,C-1);}} };
const cv = document.getElementById('fx-briansbrain');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Uint8Array three-state cell grid accumulates across frames; never cleared between generation steps. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Uint8Array three-state cell grid accumulates across frames; never cleared between generation steps.; remount to reset.


---

# Langton's Ant (canvas)

> A lone ant traces deterministic yellow highways on a black grid, growing complex structure from nothing.

- **id**: `langton` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: cellular, grid, geometry, attractor, canvas2d, background · **vibe**: hypnotic, technical, geometric
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: langton — Langton's Ant (canvas) · license MIT -->
<canvas id="fx-langton" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function langton(ctx,w,h,t,mx,my,s){ const C=5,gw=Math.ceil(w/C),gh=Math.ceil(h/C);if(!s.g||s.gw!==gw){s.gw=gw;s.gh=gh;s.g=new Uint8Array(gw*gh);s.ax=gw>>1;s.ay=gh>>1;s.dir=0;ctx.fillStyle='#0a0a0a';ctx.fillRect(0,0,w,h);}for(let k=0;k<40;k++){const i=s.ay*gw+s.ax;if(s.g[i]){s.dir=(s.dir+3)%4;s.g[i]=0;}else{s.dir=(s.dir+1)%4;s.g[i]=1;}ctx.fillStyle=s.g[i]?'#ffcf5a':'#0a0a0a';ctx.fillRect(s.ax*C,s.ay*C,C,C);s.ax=(s.ax+[0,1,0,-1][s.dir]+gw)%gw;s.ay=(s.ay+[-1,0,1,0][s.dir]+gh)%gh;}ctx.fillStyle='#ff4a6a';ctx.fillRect(s.ax*C,s.ay*C,C,C); };
const cv = document.getElementById('fx-langton');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Uint8Array cell grid and ant position accumulate; canvas is only partially redrawn each frame (no full clear). Reduced motion: freeze.

## Known limitations

- Accumulates state across frames — Uint8Array cell grid and ant position accumulate; canvas is only partially redrawn each frame (no full clear).; remount to reset.


---

# Boids Flocking (canvas)

> 60 pale-blue flecks flock and steer toward the cursor; fluid organic swarm with motion trails.

- **id**: `boids` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: flocking, particles, flow, trail, canvas2d, background, overlay · **vibe**: hypnotic, organic, ambient
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: boids — Boids Flocking (canvas) · license MIT -->
<canvas id="fx-boids" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function boids(ctx,w,h,t,mx,my,s){ if(!s.b){s.b=[];for(let i=0;i<60;i++)s.b.push({x:Math.random()*w,y:Math.random()*h,vx:Math.random()-.5,vy:Math.random()-.5});}ctx.fillStyle='rgba(8,10,16,0.3)';ctx.fillRect(0,0,w,h);for(const b of s.b){let ax=0,ay=0,cx=0,cy=0,sx=0,sy=0,n=0;for(const o of s.b){const dx=o.x-b.x,dy=o.y-b.y,d=Math.hypot(dx,dy);if(o!==b&&d<40){ax+=o.vx;ay+=o.vy;cx+=o.x;cy+=o.y;if(d<18){sx-=dx;sy-=dy;}n++;}}if(n){b.vx+=(ax/n-b.vx)*0.05+(cx/n-b.x)*0.0008+sx*0.004;b.vy+=(ay/n-b.vy)*0.05+(cy/n-b.y)*0.0008+sy*0.004;}if(mx>=0){b.vx+=(mx-b.x)*0.001;b.vy+=(my-b.y)*0.001;}const sp=Math.hypot(b.vx,b.vy)||1;b.vx=b.vx/sp*1.6;b.vy=b.vy/sp*1.6;b.x=(b.x+b.vx+w)%w;b.y=(b.y+b.vy+h)%h;const a=Math.atan2(b.vy,b.vx);ctx.fillStyle='#9fe0ff';ctx.beginPath();ctx.moveTo(b.x+Math.cos(a)*5,b.y+Math.sin(a)*5);ctx.lineTo(b.x+Math.cos(a+2.5)*4,b.y+Math.sin(a+2.5)*4);ctx.lineTo(b.x+Math.cos(a-2.5)*4,b.y+Math.sin(a-2.5)*4);ctx.closePath();ctx.fill();} };
const cv = document.getElementById('fx-boids');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Canvas not fully cleared each frame; motion trail fades at 30% opacity overlay per tick. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Canvas not fully cleared each frame; motion trail fades at 30% opacity overlay per tick.; remount to reset.


---

# Doom Fire (canvas)

> Roiling orange-red fire climbs from a white-hot base; retro demoscene flame in warm pixel blocks.

- **id**: `doomfire` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: fire, particles, noise, trail, pixel, canvas2d, background · **vibe**: dramatic, aggressive, retro, energetic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: doomfire — Doom Fire (canvas) · license MIT -->
<canvas id="fx-doomfire" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function doomfire(ctx,w,h,t,mx,my,s){ const C=4,gw=Math.ceil(w/C),gh=Math.ceil(h/C);if(!s.p||s.gw!==gw){s.gw=gw;s.gh=gh;s.p=new Uint8Array(gw*gh);for(let x=0;x<gw;x++)s.p[(gh-1)*gw+x]=36;s.pal=[];for(let i=0;i<37;i++){const f=i/36;s.pal.push('rgb('+Math.min(255,f*510|0)+','+Math.min(255,f*f*400|0)+','+(f>0.7?(f-0.7)*600|0:0)+')');}}for(let x=0;x<gw;x++)for(let y=1;y<gh;y++){const src=y*gw+x,r=Math.random(),dst=src-gw+(r<0.5?-1:r<0.66?1:0),nv=Math.max(0,s.p[src]-(r<0.4?1:0));if(dst>=0)s.p[dst]=nv;}ctx.fillStyle='#000';ctx.fillRect(0,0,w,h);for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){const v=s.p[y*gw+x];if(v>0){ctx.fillStyle=s.pal[v];ctx.fillRect(x*C,y*C,C,C);}} };
const cv = document.getElementById('fx-doomfire');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Uint8Array heat-propagation grid accumulates upward each frame; bottom row stays at max heat. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Uint8Array heat-propagation grid accumulates upward each frame; bottom row stays at max heat.; remount to reset.


---

# Falling Sand (canvas)

> Colorful sand grains pour from the cursor and settle into dunes; playful particle physics.

- **id**: `sandfall` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: particles, cellular, grid, dots, canvas2d, background · **vibe**: playful, organic, ambient
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor true, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: sandfall — Falling Sand (canvas) · license MIT -->
<canvas id="fx-sandfall" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function sandfall(ctx,w,h,t,mx,my,s){ const C=4,gw=Math.ceil(w/C),gh=Math.ceil(h/C);if(!s.g||s.gw!==gw){s.gw=gw;s.gh=gh;s.g=new Uint8Array(gw*gh);}const sx=mx>=0?Math.floor(mx/C):gw>>1;for(let k=-1;k<=1;k++){const xx=sx+k;if(xx>=0&&xx<gw)s.g[xx]=1+Math.floor(Math.random()*5);}for(let y=gh-2;y>=0;y--)for(let x=0;x<gw;x++){const i=y*gw+x;if(s.g[i]){if(!s.g[(y+1)*gw+x])s.g[(y+1)*gw+x]=s.g[i],s.g[i]=0;else{const dir=Math.random()<0.5?-1:1,bx=x+dir;if(bx>=0&&bx<gw&&!s.g[(y+1)*gw+bx]){s.g[(y+1)*gw+bx]=s.g[i];s.g[i]=0;}}}}ctx.fillStyle='#0a0a0c';ctx.fillRect(0,0,w,h);const cols=['','#ff6b5a','#ffd23f','#34d1c4','#7b6cf6','#ff8f3f'];for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){const v=s.g[y*gw+x];if(v){ctx.fillStyle=cols[v];ctx.fillRect(x*C,y*C,C,C);}} };
const cv = document.getElementById('fx-sandfall');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Uint8Array particle grid accumulates settled grains each frame; dunes grow until canvas is full. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Uint8Array particle grid accumulates settled grains each frame; dunes grow until canvas is full.; remount to reset.


---

# Double Pendulum (canvas)

> A double pendulum traces chaotic pink arcs on a deep-blue field; beautiful deterministic chaos.

- **id**: `pendulum` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: pendulum, trail, attractor, curves, geometry, canvas2d, background · **vibe**: hypnotic, technical, dramatic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: pendulum — Double Pendulum (canvas) · license MIT -->
<canvas id="fx-pendulum" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function pendulum(ctx,w,h,t,mx,my,s){ if(s.a1===undefined){s.a1=Math.PI*0.9;s.a2=Math.PI*0.9;s.v1=0;s.v2=0;s.tr=[];s.calm=0;}const m1=10,m2=10,l1=h*0.2,l2=h*0.2,g=1,DT=0.06;for(let k=0;k<8;k++){const a1=s.a1,a2=s.a2,v1=s.v1,v2=s.v2,d=2*m1+m2-m2*Math.cos(2*a1-2*a2);s.v1+=(-g*(2*m1+m2)*Math.sin(a1)-m2*g*Math.sin(a1-2*a2)-2*Math.sin(a1-a2)*m2*(v2*v2*l2+v1*v1*l1*Math.cos(a1-a2)))/(l1*d)*DT;s.v2+=(2*Math.sin(a1-a2)*(v1*v1*l1*(m1+m2)+g*(m1+m2)*Math.cos(a1)+v2*v2*l2*m2*Math.cos(a1-a2)))/(l2*d)*DT;s.a1+=s.v1*DT;s.a2+=s.v2*DT;}if(!isFinite(s.a1+s.a2+s.v1+s.v2)){s.a1=Math.PI*0.9;s.a2=Math.PI*0.9;s.v1=s.v2=0;s.tr.length=0;}s.calm=(Math.abs(s.v1)+Math.abs(s.v2)<0.03)?s.calm+1:0;if(s.calm>90){s.a1=Math.PI*(0.6+Math.random()*0.7);s.a2=Math.PI*(0.6+Math.random()*0.7);s.v1=s.v2=0;s.calm=0;}const ox=w/2,oy=h*0.42,x1=ox+l1*Math.sin(s.a1),y1=oy+l1*Math.cos(s.a1),x2=x1+l2*Math.sin(s.a2),y2=y1+l2*Math.cos(s.a2);s.tr.push([x2,y2]);if(s.tr.length>150)s.tr.shift();ctx.fillStyle='#0a0a12';ctx.fillRect(0,0,w,h);ctx.lineWidth=1.6;for(let i=1;i<s.tr.length;i++){const a=i/s.tr.length;ctx.strokeStyle='hsla('+((i*2+t*30)%360)+',85%,65%,'+(a*0.7).toFixed(2)+')';ctx.beginPath();ctx.moveTo(s.tr[i-1][0],s.tr[i-1][1]);ctx.lineTo(s.tr[i][0],s.tr[i][1]);ctx.stroke();}ctx.strokeStyle='#fff';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(ox,oy);ctx.lineTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();ctx.fillStyle='#9fe0ff';ctx.beginPath();ctx.arc(x1,y1,5,0,7);ctx.fill();ctx.beginPath();ctx.arc(x2,y2,5,0,7);ctx.fill();ctx.fillStyle='#fff';ctx.beginPath();ctx.arc(ox,oy,3,0,7);ctx.fill(); };
const cv = document.getElementById('fx-pendulum');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Orbits (canvas)

> Four colored planets orbit a golden sun on deep space; calm, minimal cosmic loop.

- **id**: `orbits` · **kind**: canvas · **section**: cellular-and-physics
- **tags**: orbit, rings, stars, dots, geometry, canvas2d, background · **vibe**: calm, ambient, meditative
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: orbits — Orbits (canvas) · license MIT -->
<canvas id="fx-orbits" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function orbits(ctx,w,h,t){ ctx.fillStyle='#05060e';ctx.fillRect(0,0,w,h);const cx=w/2,cy=h/2;ctx.fillStyle='#ffd23f';ctx.beginPath();ctx.arc(cx,cy,8,0,7);ctx.fill();const pl=[[28,1.2,'#7fd0ff',3],[50,0.8,'#ff8f6a',5],[74,0.5,'#9fe0a0',4],[98,0.34,'#c79bff',6]];for(const p of pl){const a=t*p[1];ctx.strokeStyle='rgba(255,255,255,0.08)';ctx.beginPath();ctx.arc(cx,cy,p[0],0,7);ctx.stroke();ctx.fillStyle=p[2];ctx.beginPath();ctx.arc(cx+Math.cos(a)*p[0],cy+Math.sin(a)*p[0],p[3],0,7);ctx.fill();} };
const cv = document.getElementById('fx-orbits');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Asanoha (canvas)

> Crisp blue-white hemp-leaf hexagonal lattice on indigo; serene Japanese textile geometry.

- **id**: `asanoha` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: geometry, tiling, grid, canvas2d, background · **vibe**: minimal, elegant, cultural
- **culture**: Japan
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: asanoha — Asanoha (canvas) · license MIT
     accuracy: Procedural approximation of Japanese Asanoha hemp-leaf tiling; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-asanoha" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function asanoha(ctx,w,h,t){ ctx.fillStyle='#10243a';ctx.fillRect(0,0,w,h);ctx.strokeStyle='rgba(150,200,235,0.7)';ctx.lineWidth=1;const R=24,SQ=Math.sqrt(3);for(let row=0,y=0;y<h+R;row++,y+=R*1.5)for(let x=0;x<w+R;x+=R*SQ){const cx=x+(row%2)*R*SQ/2,cy=y;for(let i=0;i<6;i++){const a=i*Math.PI/3;ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(cx+Math.cos(a)*R,cy+Math.sin(a)*R);ctx.lineTo(cx+Math.cos(a+Math.PI/3)*R,cy+Math.sin(a+Math.PI/3)*R);ctx.stroke();}}};
const cv = document.getElementById('fx-asanoha');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Japanese Asanoha hemp-leaf tiling; not a faithful reproduction of any specific historical motif.


---

# Kolam (canvas)

> Pink circle rings and warm dots repeat on deep plum; delicate South Indian threshold geometry.

- **id**: `kolam` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: dots, geometry, tiling, canvas2d, background · **vibe**: elegant, meditative, cultural
- **culture**: India
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: kolam — Kolam (canvas) · license MIT
     accuracy: Procedural approximation of South Indian Kolam floor patterns; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-kolam" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function kolam(ctx,w,h,t){ ctx.fillStyle='#2a0a1e';ctx.fillRect(0,0,w,h);const S=30;ctx.strokeStyle='#ff7ab0';ctx.lineWidth=2;for(let y=S;y<h-S/2;y+=S)for(let x=S;x<w-S/2;x+=S){ctx.beginPath();ctx.arc(x+S/2,y+S/2,S*0.46,0,7);ctx.stroke();}ctx.fillStyle='#ffd9b0';for(let y=S;y<h;y+=S)for(let x=S;x<w;x+=S){ctx.beginPath();ctx.arc(x,y,2,0,7);ctx.fill();}};
const cv = document.getElementById('fx-kolam');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of South Indian Kolam floor patterns; not a faithful reproduction of any specific historical motif.


---

# Greek Key (canvas)

> Gold meander hooks scroll steadily across deep navy, forming a flowing ancient Greek frieze.

- **id**: `greekkey` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: geometry, lines, tiling, canvas2d, background · **vibe**: elegant, cultural, retro
- **culture**: Greece
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: greekkey — Greek Key (canvas) · license MIT
     accuracy: Procedural approximation of Greek meander (key) pattern; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-greekkey" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function greekkey(ctx,w,h,t){ ctx.fillStyle='#0a1a2a';ctx.fillRect(0,0,w,h);ctx.strokeStyle='#ffd23f';ctx.lineWidth=3;const S=30,off=(t*12)%S;for(let y=S;y<h+S;y+=S)for(let x=-S+off;x<w;x+=S){ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x,y-S*0.62);ctx.lineTo(x+S*0.62,y-S*0.62);ctx.lineTo(x+S*0.62,y-S*0.28);ctx.lineTo(x+S*0.3,y-S*0.28);ctx.stroke();}};
const cv = document.getElementById('fx-greekkey');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Greek meander (key) pattern; not a faithful reproduction of any specific historical motif.


---

# Aztec Step-Fret (canvas)

> Earthy step-fret squares in terracotta and teal tile boldly; vivid Mesoamerican graphic rhythm.

- **id**: `aztec` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: geometry, mosaic, tiling, grid, canvas2d, background · **vibe**: energetic, cultural, geometric
- **culture**: Mesoamerica
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: aztec — Aztec Step-Fret (canvas) · license MIT
     accuracy: Procedural approximation of Mesoamerican step-fret pattern; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-aztec" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function aztec(ctx,w,h,t){ ctx.fillStyle='#1a0f0a';ctx.fillRect(0,0,w,h);const cols=['#d9763a','#e8b04b','#3a9b8a','#c0392b'],S=28;for(let y=0,r=0;y<h;y+=S,r++)for(let x=0,c=0;x<w;x+=S,c++){ctx.fillStyle=cols[(r+c)%4];ctx.fillRect(x,y,S,S);ctx.fillStyle='#1a0f0a';ctx.fillRect(x+S*0.3,y+S*0.3,S*0.4,S*0.4);ctx.fillStyle=cols[(r+c+1)%4];ctx.fillRect(x+S*0.4,y+S*0.4,S*0.2,S*0.2);}};
const cv = document.getElementById('fx-aztec');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Mesoamerican step-fret pattern; not a faithful reproduction of any specific historical motif.


---

# Kente Cloth (canvas)

> Vivid gold, green and red colour bands tile in the rhythm of West African Kente weaving.

- **id**: `kente` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: stripes, weave, geometry, canvas2d, background · **vibe**: energetic, cultural, geometric
- **culture**: West Africa
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: kente — Kente Cloth (canvas) · license MIT
     accuracy: Procedural approximation of West African Kente cloth weaving; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-kente" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function kente(ctx,w,h,t){ const cols=['#f2c20a','#0a8a3a','#c0140a','#111','#1a6cc0'],S=17;for(let y=0,r=0;y<h;y+=S,r++)for(let x=0,c=0;x<w;x+=S,c++){ctx.fillStyle=cols[((r%2)?(c+r):(r*2+c))%5];ctx.fillRect(x,y,S,S);if((r+c)%3===0){ctx.fillStyle=cols[c%5];ctx.fillRect(x,y,S,S/2);}}};
const cv = document.getElementById('fx-kente');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of West African Kente cloth weaving; not a faithful reproduction of any specific historical motif.


---

# Talavera (canvas)

> Cream tiles edged in cobalt, petalled in gold; bright repeating Mexican Talavera ceramics.

- **id**: `talavera` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: mosaic, tiling, geometry, canvas2d, background · **vibe**: elegant, cultural, playful
- **culture**: Mexico
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: talavera — Talavera (canvas) · license MIT
     accuracy: Procedural approximation of Mexican Talavera ceramic tile; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-talavera" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function talavera(ctx,w,h,t){ ctx.fillStyle='#f4f0e4';ctx.fillRect(0,0,w,h);const S=58;for(let y=0;y<h+S;y+=S)for(let x=0;x<w+S;x+=S){ctx.strokeStyle='#1a5fa8';ctx.lineWidth=2;ctx.strokeRect(x,y,S,S);ctx.fillStyle='#e8a800';for(let i=0;i<8;i++){const a=i*Math.PI/4;ctx.save();ctx.translate(x+S/2+Math.cos(a)*S*0.28,y+S/2+Math.sin(a)*S*0.28);ctx.rotate(a);ctx.beginPath();ctx.ellipse(0,0,5,2,0,0,7);ctx.fill();ctx.restore();}ctx.fillStyle='#1a5fa8';ctx.beginPath();ctx.arc(x+S/2,y+S/2,6,0,7);ctx.fill();}};
const cv = document.getElementById('fx-talavera');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Mexican Talavera ceramic tile; not a faithful reproduction of any specific historical motif.


---

# Ruyi Cloud (canvas)

> Crimson field of pulsing five-lobed cloud medallions; festive and elegant Chinese folk pattern.

- **id**: `cloud` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: curves, geometry, tiling, canvas2d, background · **vibe**: elegant, cultural, calm
- **culture**: China
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: cloud — Ruyi Cloud (canvas) · license MIT
     accuracy: Procedural approximation of Chinese Ruyi cloud patterns; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-cloud" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function cloud(ctx,w,h,t){ ctx.fillStyle='#7a1420';ctx.fillRect(0,0,w,h);ctx.strokeStyle='#ffcf5a';ctx.lineWidth=2.5;const S=60;for(let y=S/2;y<h+S;y+=S)for(let x=S/2;x<w+S;x+=S){ctx.beginPath();for(let a=0;a<6.2831;a+=0.15){const r=S*0.3*(1+0.32*Math.sin(a*5+t*0.5));const px=x+Math.cos(a)*r,py=y+Math.sin(a)*r;a?ctx.lineTo(px,py):ctx.moveTo(px,py);}ctx.closePath();ctx.stroke();ctx.beginPath();ctx.arc(x,y,S*0.1,0,7);ctx.stroke();}};
const cv = document.getElementById('fx-cloud');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Chinese Ruyi cloud patterns; not a faithful reproduction of any specific historical motif.


---

# Koru (canvas)

> Cream fern spirals slowly uncoil across a dark forest ground; meditative Māori koru motif.

- **id**: `koru` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: spiral, geometry, canvas2d, background · **vibe**: meditative, organic, cultural
- **culture**: Maori
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: koru — Koru (canvas) · license MIT
     accuracy: Procedural approximation of Māori Koru spiral motif; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-koru" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function koru(ctx,w,h,t){ ctx.fillStyle='#0a1410';ctx.fillRect(0,0,w,h);ctx.strokeStyle='#e8e0cf';ctx.lineWidth=3;ctx.lineCap='round';const S=78;for(let y=0;y<h+S;y+=S)for(let x=0;x<w+S;x+=S){ctx.beginPath();for(let a=0;a<6.5;a+=0.1){const r=a*3+2,px=x+Math.cos(a+t*0.3)*r,py=y+Math.sin(a+t*0.3)*r;a?ctx.lineTo(px,py):ctx.moveTo(px,py);}ctx.stroke();}};
const cv = document.getElementById('fx-koru');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Māori Koru spiral motif; not a faithful reproduction of any specific historical motif.


---

# Paisley (canvas)

> Jewel-toned boteh teardrops gently sway on deep indigo; lush Persian paisley textile rhythm.

- **id**: `paisley` · **kind**: canvas · **section**: world-patterns-ii
- **tags**: curves, geometry, tiling, canvas2d, background · **vibe**: elegant, cultural, hypnotic
- **culture**: Persia
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: paisley — Paisley (canvas) · license MIT
     accuracy: Procedural approximation of Persian Paisley (boteh) textile pattern; not a faithful reproduction of any specific historical motif. -->
<canvas id="fx-paisley" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function paisley(ctx,w,h,t){ ctx.fillStyle='#1a0a2a';ctx.fillRect(0,0,w,h);const cols=['#e8b04b','#ff7ab0','#34d1c4'],S=64;for(let y=0,r=0;y<h+S;y+=S,r++)for(let x=0,c=0;x<w+S;x+=S,c++){ctx.save();ctx.translate(x+(r%2)*S/2,y);ctx.rotate(Math.sin(t*0.3+r+c)*0.2);ctx.fillStyle=cols[(r+c)%3];ctx.beginPath();ctx.moveTo(0,-18);ctx.bezierCurveTo(17,-16,17,9,0,17);ctx.bezierCurveTo(-9,10,-7,-5,0,-18);ctx.fill();ctx.fillStyle='#1a0a2a';ctx.beginPath();ctx.moveTo(0,-12);ctx.bezierCurveTo(9,-10,9,5,0,10);ctx.bezierCurveTo(-4,6,-3,-3,0,-12);ctx.fill();ctx.restore();}};
const cv = document.getElementById('fx-paisley');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- Procedural approximation of Persian Paisley (boteh) textile pattern; not a faithful reproduction of any specific historical motif.


---

# Tunnel (canvas)

> Hypnotic blue checkerboard rushes toward you in an infinite demoscene tunnel flythrough.

- **id**: `tunnel` · **kind**: canvas · **section**: screen-and-signal
- **tags**: tunnel, geometry, grid, optical, canvas2d, background · **vibe**: hypnotic, retro
- **culture**: demoscene
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: tunnel — Tunnel (canvas) · license MIT -->
<canvas id="fx-tunnel" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function tunnel(ctx,w,h,t){ const S=4;for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){const dx=x-w/2,dy=y-h/2,a=Math.atan2(dy,dx),r=Math.hypot(dx,dy)||1,u=a/Math.PI*8,v=320/r+t*2,c=((Math.floor(u)+Math.floor(v))&1)?1:0.25,sh=Math.min(1,r/(w*0.5));ctx.fillStyle='rgb('+(c*120*sh|0)+','+(c*200*sh|0)+','+(c*255*sh|0)+')';ctx.fillRect(x,y,S,S);}};
const cv = document.getElementById('fx-tunnel');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Plasma (canvas)

> Swirling rainbow sine-wave blobs morph endlessly; psychedelic demoscene classic.

- **id**: `plasma` · **kind**: canvas · **section**: screen-and-signal
- **tags**: plasma, waves, noise, geometry, canvas2d, background · **vibe**: psychedelic, energetic, retro
- **culture**: demoscene
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: plasma — Plasma (canvas) · license MIT -->
<canvas id="fx-plasma" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function plasma(ctx,w,h,t){ const S=4;for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){const v=Math.sin(x*0.04+t)+Math.sin(y*0.05+t*1.1)+Math.sin((x+y)*0.03+t*0.7)+Math.sin(Math.hypot(x-w/2,y-h/2)*0.04-t),c=v/4;ctx.fillStyle='hsl('+(((c*180+t*40)%360+360)%360)+',80%,'+(50+c*20|0)+'%)';ctx.fillRect(x,y,S,S);}};
const cv = document.getElementById('fx-plasma');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Rotozoom (canvas)

> Pink-and-dark checkerboard spins and zooms in and out; retro demoscene rotozoom.

- **id**: `rotozoom` · **kind**: canvas · **section**: screen-and-signal
- **tags**: geometry, grid, tiling, optical, canvas2d, background · **vibe**: hypnotic, retro, playful
- **culture**: demoscene
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: rotozoom — Rotozoom (canvas) · license MIT -->
<canvas id="fx-rotozoom" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function rotozoom(ctx,w,h,t){ const S=4,zoom=1.5+Math.sin(t*0.5)*0.8,ca=Math.cos(t*0.3)*zoom,sa=Math.sin(t*0.3)*zoom;for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){const u=((x-w/2)*ca-(y-h/2)*sa)|0,v=((x-w/2)*sa+(y-h/2)*ca)|0,c=((u>>4)+(v>>4))&1;ctx.fillStyle=c?'#ff5a8a':'#1a1030';ctx.fillRect(x,y,S,S);}};
const cv = document.getElementById('fx-rotozoom');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Copper Bars (canvas)

> Five glowing colored bars bounce on black; warm Amiga Copper demoscene glow.

- **id**: `copperbars` · **kind**: canvas · **section**: screen-and-signal
- **tags**: lines, neon, glow, geometry, canvas2d, background · **vibe**: retro, energetic, playful
- **culture**: demoscene / Amiga
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: copperbars — Copper Bars (canvas) · license MIT -->
<canvas id="fx-copperbars" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function copperbars(ctx,w,h,t){ ctx.fillStyle='#000';ctx.fillRect(0,0,w,h);const hues=[30,180,300,90,210];for(let i=0;i<5;i++){const cy=h/2+Math.sin(t*1.5+i*0.6)*h*0.34;for(let y=-18;y<18;y++){ctx.fillStyle='hsl('+hues[i]+',90%,'+(58-Math.abs(y)*2.6)+'%)';ctx.fillRect(0,cy+y,w,1);}}};
const cv = document.getElementById('fx-copperbars');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# 7-Segment (canvas)

> Red seven-segment digits show a live HH:MM:SS clock on near-black; crisp retro electronics.

- **id**: `sevenseg` · **kind**: canvas · **section**: screen-and-signal
- **tags**: clock, geometry, grid, canvas2d, inline · **vibe**: technical, retro, minimal
- **culture**: signal / electronics / display
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: sevenseg — 7-Segment (canvas) · license MIT -->
<canvas id="fx-sevenseg" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function sevenseg(ctx,w,h,t){ ctx.fillStyle='#0a0c0a';ctx.fillRect(0,0,w,h);const segs={0:[1,1,1,1,1,1,0],1:[0,1,1,0,0,0,0],2:[1,1,0,1,1,0,1],3:[1,1,1,1,0,0,1],4:[0,1,1,0,0,1,1],5:[1,0,1,1,0,1,1],6:[1,0,1,1,1,1,1],7:[1,1,1,0,0,0,0],8:[1,1,1,1,1,1,1],9:[1,1,1,1,0,1,1]};const tm=new Date(),str=[tm.getHours(),tm.getMinutes(),tm.getSeconds()].map(v=>String(v).padStart(2,'0')).join(''),dw=w/6.5,x0=dw*0.3;for(let d=0;d<6;d++){const seg=segs[+str[d]],bx=x0+d*dw,by=h*0.34,sw=dw*0.55,sh=h*0.32;ctx.fillStyle='#ff3a3a';const dr=(i,x,y,wv,hv)=>{if(seg[i])ctx.fillRect(bx+x,by+y,wv,hv);};dr(0,4,0,sw-8,4);dr(1,sw-2,2,4,sh/2-3);dr(2,sw-2,sh/2,4,sh/2-3);dr(3,4,sh-4,sw-8,4);dr(4,0,sh/2,4,sh/2-3);dr(5,0,2,4,sh/2-3);dr(6,4,sh/2-2,sw-8,4);}};
const cv = document.getElementById('fx-sevenseg');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# LED Matrix (canvas)

> Amber LED dot grid ripples with a traveling sine wave; warm retro electronics glow.

- **id**: `ledmatrix` · **kind**: canvas · **section**: screen-and-signal
- **tags**: dots, grid, waves, neon, canvas2d, background · **vibe**: retro, technical, ambient
- **culture**: signal / electronics / display
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: ledmatrix — LED Matrix (canvas) · license MIT -->
<canvas id="fx-ledmatrix" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function ledmatrix(ctx,w,h,t){ ctx.fillStyle='#0a0a0a';ctx.fillRect(0,0,w,h);const C=9,gw=Math.ceil(w/C),gh=Math.ceil(h/C);for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){const on=0.5+0.5*Math.sin((x-gw/2)*0.3+(y-gh/2)*0.2-t*3);ctx.fillStyle='rgba(255,'+(80+on*120|0)+',20,'+(0.15+on*0.8).toFixed(2)+')';ctx.beginPath();ctx.arc(x*C+C/2,y*C+C/2,C*0.35,0,7);ctx.fill();}};
const cv = document.getElementById('fx-ledmatrix');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Radar Sweep (canvas)

> Phosphor-green radar sweep rotates over range rings on dark; tense sci-fi monitor.

- **id**: `radar` · **kind**: canvas · **section**: screen-and-signal
- **tags**: radar, geometry, rings, canvas2d, background, overlay · **vibe**: technical, futuristic, dramatic
- **culture**: signal / military / sci-fi
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: radar — Radar Sweep (canvas) · license MIT -->
<canvas id="fx-radar" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function radar(ctx,w,h,t){ ctx.fillStyle='#04140a';ctx.fillRect(0,0,w,h);const cx=w/2,cy=h/2,R=Math.min(w,h)*0.46;ctx.strokeStyle='rgba(80,255,140,0.3)';for(let i=1;i<=4;i++){ctx.beginPath();ctx.arc(cx,cy,R*i/4,0,7);ctx.stroke();}const a=t*1.2;ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,R,a-0.85,a);ctx.closePath();ctx.fillStyle='rgba(80,255,140,0.16)';ctx.fill();ctx.strokeStyle='#5fff90';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(cx+Math.cos(a)*R,cy+Math.sin(a)*R);ctx.stroke();};
const cv = document.getElementById('fx-radar');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# EKG Monitor (canvas)

> Green heartbeat trace scrolls across a dark grid; tense clinical EKG monitor simulation.

- **id**: `ekg` · **kind**: canvas · **section**: screen-and-signal
- **tags**: oscilloscope, grid, lines, canvas2d, inline, overlay · **vibe**: technical, dramatic, minimal
- **culture**: signal / medical
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: ekg — EKG Monitor (canvas) · license MIT -->
<canvas id="fx-ekg" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function ekg(ctx,w,h,t){ ctx.fillStyle='#04100a';ctx.fillRect(0,0,w,h);ctx.strokeStyle='rgba(60,140,90,0.25)';ctx.lineWidth=1;for(let x=0;x<w;x+=18){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.stroke();}ctx.strokeStyle='#5fff90';ctx.lineWidth=2;ctx.shadowBlur=8;ctx.shadowColor='#5fff90';ctx.beginPath();for(let x=0;x<=w;x+=2){const p=((x/w*3-t*0.5)%1+1)%1;let y=h/2;if(p>=0.5&&p<0.55)y-=h*0.02;else if(p>=0.55&&p<0.59)y-=h*0.33;else if(p>=0.59&&p<0.63)y+=h*0.17;else if(p>=0.63&&p<0.69)y-=h*0.04;x?ctx.lineTo(x,y):ctx.moveTo(x,y);}ctx.stroke();ctx.shadowBlur=0;};
const cv = document.getElementById('fx-ekg');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Cursor Trail (canvas)

> Flowing rainbow streak follows the cursor across a dark canvas; playful, energetic overlay.

- **id**: `cursortrail` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: trail, particles, cursor, overlay, canvas2d · **vibe**: playful, energetic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: cursortrail — Cursor Trail (canvas) · license MIT -->
<canvas id="fx-cursortrail" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function cursortrail(ctx,w,h,t,mx,my,s){ if(!s.tr)s.tr=[];s.tr.push(mx>=0?[mx,my]:[w/2+Math.cos(t)*w*0.3,h/2+Math.sin(t*1.3)*h*0.3]);if(s.tr.length>40)s.tr.shift();ctx.fillStyle='#0a0b10';ctx.fillRect(0,0,w,h);ctx.lineCap='round';for(let i=1;i<s.tr.length;i++){const a=i/s.tr.length;ctx.strokeStyle='hsla('+((t*60+i*6)%360)+',90%,60%,'+a.toFixed(2)+')';ctx.lineWidth=a*8;ctx.beginPath();ctx.moveTo(s.tr[i-1][0],s.tr[i-1][1]);ctx.lineTo(s.tr[i][0],s.tr[i][1]);ctx.stroke();} };
const cv = document.getElementById('fx-cursortrail');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Trail point array s.tr accumulates cursor positions across frames Reduced motion: freeze.

## Known limitations

- Accumulates state across frames — Trail point array s.tr accumulates cursor positions across frames; remount to reset.


---

# Crosshair HUD (canvas)

> Sci-fi HUD crosshair locks to the cursor with real-time coordinate readout; minimal, technical.

- **id**: `crosshair` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: lines, geometry, cursor, overlay, canvas2d · **vibe**: technical, minimal
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: crosshair — Crosshair HUD (canvas) · license MIT -->
<canvas id="fx-crosshair" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function crosshair(ctx,w,h,t,mx,my){ ctx.fillStyle='#0a0c10';ctx.fillRect(0,0,w,h);const x=mx>=0?mx:w/2+Math.cos(t)*w*0.3,y=my>=0?my:h/2+Math.sin(t)*h*0.3;ctx.strokeStyle='rgba(120,255,180,0.3)';ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke();ctx.strokeStyle='#7CFFB0';ctx.beginPath();ctx.arc(x,y,14,0,7);ctx.stroke();ctx.font='11px monospace';ctx.fillStyle='#7CFFB0';ctx.fillText('X:'+String(Math.round(x)).padStart(4,'0')+' Y:'+String(Math.round(y)).padStart(4,'0'),x+18,y-10); };
const cv = document.getElementById('fx-crosshair');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Water Ripple (canvas)

> Blue water ripples spread from cursor touch across a CPU-simulated height field; calm, fluid.

- **id**: `ripplewater` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: ripple, waves, fluid, canvas2d, overlay · **vibe**: calm, organic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: ripplewater — Water Ripple (canvas) · license MIT -->
<canvas id="fx-ripplewater" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function ripplewater(ctx,w,h,t,mx,my,s){ const C=6,gw=Math.ceil(w/C),gh=Math.ceil(h/C);if(!s.a||s.gw!==gw){s.gw=gw;s.gh=gh;s.a=new Float32Array(gw*gh);s.b=new Float32Array(gw*gh);}const di=mx>=0?Math.floor(my/C)*gw+Math.floor(mx/C):(Math.floor(gh/2+Math.sin(t*2)*gh*0.3))*gw+Math.floor(gw/2+Math.cos(t*2)*gw*0.3);if(di>=0&&di<s.a.length)s.a[di]=320;for(let y=1;y<gh-1;y++)for(let x=1;x<gw-1;x++){const i=y*gw+x;s.b[i]=((s.a[i-1]+s.a[i+1]+s.a[i-gw]+s.a[i+gw])/2-s.b[i])*0.95;}const tmp=s.a;s.a=s.b;s.b=tmp;ctx.fillStyle='#04101c';ctx.fillRect(0,0,w,h);for(let y=0;y<gh;y++)for(let x=0;x<gw;x++){const v=s.a[y*gw+x];if(Math.abs(v)>2){const c=Math.min(255,128+v);ctx.fillStyle='rgb('+(c*0.3|0)+','+(c*0.7|0)+','+(c|0)+')';ctx.fillRect(x*C,y*C,C,C);}} };
const cv = document.getElementById('fx-ripplewater');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Persistent accumulator: Two Float32Array height field buffers s.a and s.b swap and accumulate wave energy across frames Reduced motion: freeze.

## Known limitations

- Accumulates state across frames — Two Float32Array height field buffers s.a and s.b swap and accumulate wave energy across frames; remount to reset.


---

# Gooey Blob (canvas)

> Pulsing purple gooey blob clings to the cursor with orbiting metaball satellites; playful, organic.

- **id**: `blobcursor` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: metaballs, fluid, cursor, overlay, canvas2d · **vibe**: playful, organic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: blobcursor — Gooey Blob (canvas) · license MIT -->
<canvas id="fx-blobcursor" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function blobcursor(ctx,w,h,t,mx,my,s){ if(!s.b){s.b=[];for(let i=0;i<6;i++)s.b.push({a:Math.random()*6,r:14+Math.random()*10});}const cx=mx>=0?mx:w/2+Math.cos(t)*40,cy=my>=0?my:h/2+Math.sin(t)*40,S=5;ctx.fillStyle='#0a0a12';ctx.fillRect(0,0,w,h);for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){let v=400/((x-cx)*(x-cx)+(y-cy)*(y-cy)+40);for(const b of s.b){const bx=cx+Math.cos(b.a+t)*b.r*2,by=cy+Math.sin(b.a+t*1.2)*b.r*2;v+=300/((x-bx)*(x-bx)+(y-by)*(y-by)+40);}if(v>1){const e=Math.min(1,(v-1)*3);ctx.fillStyle='rgb('+(120+e*130|0)+',60,'+(200+e*55|0)+')';ctx.fillRect(x,y,S,S);}} };
const cv = document.getElementById('fx-blobcursor');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# Iron Filings (canvas)

> Tiny iron filings snap to magnetic field lines emanating from the cursor; geometric, hypnotic.

- **id**: `ironfilings` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: lines, geometry, flow, cursor, overlay, canvas2d · **vibe**: geometric, hypnotic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: ironfilings — Iron Filings (canvas) · license MIT -->
<canvas id="fx-ironfilings" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function ironfilings(ctx,w,h,t,mx,my){ ctx.fillStyle='#0c0c0e';ctx.fillRect(0,0,w,h);const cx=mx>=0?mx:w/2+Math.cos(t)*w*0.2,cy=my>=0?my:h/2;ctx.strokeStyle='rgba(200,210,230,0.6)';ctx.lineWidth=1.2;const S=16;for(let y=S/2;y<h;y+=S)for(let x=S/2;x<w;x+=S){const a=Math.atan2(y-cy,x-cx)+Math.PI/2;ctx.beginPath();ctx.moveTo(x-Math.cos(a)*6,y-Math.sin(a)*6);ctx.lineTo(x+Math.cos(a)*6,y+Math.sin(a)*6);ctx.stroke();} };
const cv = document.getElementById('fx-ironfilings');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Vortex (canvas)

> Colourful particles spiral into the cursor in an accelerating vortex; hypnotic, energetic overlay.

- **id**: `vortex` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: particles, spiral, orbit, cursor, overlay, canvas2d · **vibe**: hypnotic, energetic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: vortex — Vortex (canvas) · license MIT -->
<canvas id="fx-vortex" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function vortex(ctx,w,h,t,mx,my,s){ if(!s.p){s.p=[];for(let i=0;i<140;i++)s.p.push({x:Math.random()*w,y:Math.random()*h});}ctx.fillStyle='rgba(8,6,14,0.2)';ctx.fillRect(0,0,w,h);const cx=mx>=0?mx:w/2,cy=my>=0?my:h/2;for(const p of s.p){const dx=p.x-cx,dy=p.y-cy,d=Math.hypot(dx,dy)||1,a=Math.atan2(dy,dx)+0.1;p.x=cx+Math.cos(a)*(d-0.6);p.y=cy+Math.sin(a)*(d-0.6);if(d<6){p.x=Math.random()*w;p.y=Math.random()*h;}ctx.fillStyle='hsla('+((d+t*40)%360)+',90%,65%,0.9)';ctx.fillRect(p.x,p.y,2,2);} };
const cv = document.getElementById('fx-vortex');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Particle positions in s.p accumulate motion each frame; canvas fades partially (alpha 0.2 fill) Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Particle positions in s.p accumulate motion each frame; canvas fades partially (alpha 0.2 fill); remount to reset.


---

# Confetti (canvas)

> Colourful confetti flakes drift down with gentle sine sway; celebratory, playful overlay.

- **id**: `confetti` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: confetti, particles, trail, canvas2d, overlay · **vibe**: playful, energetic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: confetti — Confetti (canvas) · license MIT -->
<canvas id="fx-confetti" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function confetti(ctx,w,h,t,mx,my,s){ if(!s.p)s.p=[];if(s.p.length<120&&Math.random()<0.6){const cols=['#ff5a8a','#ffd23f','#34d1c4','#7b6cf6','#ff8f3f'];s.p.push({x:Math.random()*w,y:-10,vy:1+Math.random()*2,vx:(Math.random()-.5)*2,r:2+Math.random()*5,c:cols[Math.floor(Math.random()*5)],rot:Math.random()*6,vr:(Math.random()-.5)*0.3});}ctx.fillStyle='#0a0a12';ctx.fillRect(0,0,w,h);s.p=s.p.filter(p=>p.y<h+10);for(const p of s.p){p.y+=p.vy;p.x+=p.vx+Math.sin(t+p.y*0.05);p.rot+=p.vr;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.rot);ctx.fillStyle=p.c;ctx.fillRect(-p.r/2,-p.r/4,p.r,p.r/2);ctx.restore();} };
const cv = document.getElementById('fx-confetti');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Particle array s.p grows each frame up to cap; particles removed when off-screen Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Particle array s.p grows each frame up to cap; particles removed when off-screen; remount to reset.


---

# Fireworks (canvas)

> Glittering firework bursts erupt automatically across a dark sky with gravity fade; dramatic.

- **id**: `fireworks` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: particles, stars, fire, canvas2d, overlay · **vibe**: energetic, dramatic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: fireworks — Fireworks (canvas) · license MIT -->
<canvas id="fx-fireworks" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function fireworks(ctx,w,h,t,mx,my,s){ if(!s.p){s.p=[];s.acc=0;}s.acc++;if(s.acc%40===0){const ox=mx>=0?mx:Math.random()*w,oy=my>=0?my:Math.random()*h*0.6,hue=Math.random()*360;for(let i=0;i<50;i++){const a=Math.random()*6.28,sp=Math.random()*3+1;s.p.push({x:ox,y:oy,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp,life:1,hue});}}ctx.fillStyle='rgba(6,6,14,0.22)';ctx.fillRect(0,0,w,h);s.p=s.p.filter(p=>p.life>0);for(const p of s.p){p.x+=p.vx;p.y+=p.vy;p.vy+=0.04;p.life-=0.012;ctx.fillStyle='hsla('+p.hue+',90%,65%,'+p.life.toFixed(2)+')';ctx.fillRect(p.x,p.y,2.4,2.4);} };
const cv = document.getElementById('fx-fireworks');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Particle array s.p and frame counter s.acc persist; bursts fire automatically every 40 frames; canvas fades partially each frame Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Particle array s.p and frame counter s.acc persist; bursts fire automatically every 40 frames; canvas fades partially each frame; remount to reset.


---

# Bokeh (canvas)

> Soft luminous circles drift upward like out-of-focus lights; calm, elegant background.

- **id**: `bokeh` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: dots, glow, particles, canvas2d, background · **vibe**: calm, elegant
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: bokeh — Bokeh (canvas) · license MIT -->
<canvas id="fx-bokeh" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function bokeh(ctx,w,h,t,mx,my,s){ if(!s.c){s.c=[];for(let i=0;i<24;i++)s.c.push({x:Math.random()*w,y:Math.random()*h,r:10+Math.random()*40,hue:Math.random()*60+180,sp:0.2+Math.random()*0.5,ph:Math.random()*6});}ctx.fillStyle='#06080f';ctx.fillRect(0,0,w,h);ctx.globalCompositeOperation='lighter';for(const c of s.c){const y=(c.y+t*c.sp*20)%(h+80)-40,g=ctx.createRadialGradient(c.x,y,0,c.x,y,c.r),al=0.12+0.08*Math.sin(t+c.ph);g.addColorStop(0,'hsla('+c.hue+',80%,70%,'+al.toFixed(2)+')');g.addColorStop(1,'hsla('+c.hue+',80%,70%,0)');ctx.fillStyle=g;ctx.beginPath();ctx.arc(c.x,y,c.r,0,7);ctx.fill();}ctx.globalCompositeOperation='source-over'; };
const cv = document.getElementById('fx-bokeh');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# Nebula (canvas)

> Drifting cloud wisps and twinkling stars form a deep-space nebula; ambient, meditative background.

- **id**: `nebula` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: nebula, stars, starfield, glow, canvas2d, background · **vibe**: ambient, meditative
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: nebula — Nebula (canvas) · license MIT -->
<canvas id="fx-nebula" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function nebula(ctx,w,h,t,mx,my,s){ if(!s.c){s.c=[];for(let i=0;i<14;i++)s.c.push({x:Math.random()*w,y:Math.random()*h,r:30+Math.random()*60,hue:Math.random()*120+200,ph:Math.random()*6});}ctx.fillStyle='#04040a';ctx.fillRect(0,0,w,h);ctx.globalCompositeOperation='lighter';for(const c of s.c){const x=c.x+Math.sin(t*0.2+c.ph)*20,y=c.y+Math.cos(t*0.15+c.ph)*16,g=ctx.createRadialGradient(x,y,0,x,y,c.r);g.addColorStop(0,'hsla('+c.hue+',80%,60%,0.16)');g.addColorStop(1,'hsla('+c.hue+',80%,60%,0)');ctx.fillStyle=g;ctx.beginPath();ctx.arc(x,y,c.r,0,7);ctx.fill();}ctx.globalCompositeOperation='source-over';for(let i=0;i<40;i++){ctx.fillStyle='rgba(255,255,255,'+(0.2+0.3*Math.sin(t+i)).toFixed(2)+')';ctx.fillRect((i*97)%w,(i*53)%h,1,1);} };
const cv = document.getElementById('fx-nebula');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.


---

# Lightning (canvas)

> Jagged electric bolt crackles from top to cursor with blue glow flicker; dramatic, aggressive overlay.

- **id**: `lightning` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: lightning, lines, glow, canvas2d, overlay · **vibe**: dramatic, aggressive
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: false
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: lightning — Lightning (canvas) · license MIT -->
<canvas id="fx-lightning" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function lightning(ctx,w,h,t,mx,my,s){ ctx.fillStyle='#05060f';ctx.fillRect(0,0,w,h);s.acc=(s.acc||0)+1;if(!s.bolt||s.acc%30===0){s.bolt=[];let x=mx>=0?mx:w/2,y=0;while(y<h){s.bolt.push([x,y]);y+=h/14;x+=(Math.random()-0.5)*40;}}ctx.strokeStyle='rgba(150,190,255,'+(0.5+0.5*Math.sin(s.acc*0.5)).toFixed(2)+')';ctx.lineWidth=2;ctx.shadowBlur=12;ctx.shadowColor='#9bb8ff';ctx.beginPath();s.bolt.forEach((p,i)=>i?ctx.lineTo(p[0],p[1]):ctx.moveTo(p[0],p[1]));ctx.stroke();ctx.shadowBlur=0; };
const cv = document.getElementById('fx-lightning');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Persistent accumulator: Bolt path s.bolt and frame counter s.acc persist across frames Non-deterministic: uses unseeded randomness or wall-clock time, so output differs run to run. Reduced motion: freeze.

## Known limitations

- Non-deterministic (unseeded random / wall-clock): pixels differ run to run.
- Accumulates state across frames — Bolt path s.bolt and frame counter s.acc persist across frames; remount to reset.


---

# Neon Pipes (canvas)

> Six glowing neon sine waves undulate in cyan, magenta, and lime; retro, energetic background.

- **id**: `neonpipes` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: neon, waves, lines, glow, canvas2d, background · **vibe**: retro, energetic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: neonpipes — Neon Pipes (canvas) · license MIT -->
<canvas id="fx-neonpipes" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function neonpipes(ctx,w,h,t){ ctx.fillStyle='#08040f';ctx.fillRect(0,0,w,h);const cols=['#00fff0','#ff00aa','#aaff00','#00aaff'];ctx.lineWidth=3;ctx.lineCap='round';for(let i=0;i<6;i++){ctx.strokeStyle=cols[i%4];ctx.shadowBlur=10;ctx.shadowColor=cols[i%4];ctx.beginPath();for(let x=0;x<=w;x+=8){const y=h*(i+1)/7+Math.sin(x*0.03+t*1.5+i)*18;x?ctx.lineTo(x,y):ctx.moveTo(x,y);}ctx.stroke();}ctx.shadowBlur=0; };
const cv = document.getElementById('fx-neonpipes');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Loaders (canvas)

> Six loading spinner variants — arc, tick, pulse, ring, bar, fade — minimal, technical demo.

- **id**: `spinners` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: loader, dots, geometry, canvas2d · **vibe**: minimal, technical
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: spinners — Loaders (canvas) · license MIT -->
<canvas id="fx-spinners" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function spinners(ctx,w,h,t){ ctx.fillStyle='#0c0d12';ctx.fillRect(0,0,w,h);const pts=[[0.25,0.32],[0.5,0.32],[0.75,0.32],[0.25,0.68],[0.5,0.68],[0.75,0.68]];ctx.lineCap='round';pts.forEach((p,i)=>{const cx=p[0]*w,cy=p[1]*h,R=Math.min(w,h)*0.09;ctx.strokeStyle='#7fd0ff';ctx.lineWidth=3;if(i===0){ctx.beginPath();ctx.arc(cx,cy,R,t*3,t*3+4);ctx.stroke();}else if(i===1){for(let k=0;k<8;k++){ctx.globalAlpha=((k+Math.floor(t*8))%8)/8;ctx.beginPath();ctx.moveTo(cx+Math.cos(k*0.785)*R*0.5,cy+Math.sin(k*0.785)*R*0.5);ctx.lineTo(cx+Math.cos(k*0.785)*R,cy+Math.sin(k*0.785)*R);ctx.stroke();}ctx.globalAlpha=1;}else if(i===2){ctx.fillStyle='#7fd0ff';for(let k=0;k<3;k++){ctx.globalAlpha=0.5+0.5*Math.sin(t*4-k*0.6);ctx.beginPath();ctx.arc(cx+(k-1)*12,cy,4,0,7);ctx.fill();}ctx.globalAlpha=1;}else if(i===3){ctx.strokeStyle='rgba(127,208,255,0.2)';ctx.beginPath();ctx.arc(cx,cy,R,0,6.28);ctx.stroke();ctx.strokeStyle='#7fd0ff';ctx.beginPath();ctx.arc(cx,cy,R,t*3,t*3+1.8);ctx.stroke();}else if(i===4){ctx.save();ctx.translate(cx,cy);ctx.rotate(t*3);ctx.fillStyle='#7fd0ff';ctx.fillRect(-R*0.6,-3,R*1.2,6);ctx.restore();}else{ctx.fillStyle='#7fd0ff';ctx.globalAlpha=Math.abs(Math.sin(t*3));ctx.beginPath();ctx.arc(cx,cy,R*0.7,0,7);ctx.fill();ctx.globalAlpha=1;}}); };
const cv = document.getElementById('fx-spinners');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Wave Grid (canvas)

> Perspective dot grid ripples with sine waves receding into depth; geometric, hypnotic background.

- **id**: `wavegrid` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: grid, dots, waves, geometry, canvas2d, background · **vibe**: geometric, hypnotic
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: wavegrid — Wave Grid (canvas) · license MIT -->
<canvas id="fx-wavegrid" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function wavegrid(ctx,w,h,t){ ctx.fillStyle='#060810';ctx.fillRect(0,0,w,h);const cols=14,rows=10;for(let r=0;r<rows;r++)for(let c=0;c<cols;c++){const px=(c/(cols-1)-0.5),pz=r/(rows-1),sc=0.4+pz*0.9,x=w/2+px*w*sc,y=h*0.35+pz*h*0.5+Math.sin(c*0.6+r*0.4-t*2)*8*pz,sz=1+pz*2.5;ctx.fillStyle='hsl('+((200+pz*120)%360)+',80%,'+(40+pz*30|0)+'%)';ctx.beginPath();ctx.arc(x,y,sz,0,7);ctx.fill();} };
const cv = document.getElementById('fx-wavegrid');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Audio Bars (canvas)

> Simulated spectrum bars pulse in blue-green gradient (no mic); energetic audio-visualiser look.

- **id**: `audiobars` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: oscilloscope, lines, geometry, canvas2d · **vibe**: energetic, technical
- **culture**: —
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: audiobars — Audio Bars (canvas) · license MIT -->
<canvas id="fx-audiobars" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function audiobars(ctx,w,h,t){ ctx.fillStyle='#0a0a0f';ctx.fillRect(0,0,w,h);const n=32,bw=w/n;for(let i=0;i<n;i++){const v=(0.25+0.75*Math.abs(Math.sin(i*0.5+t*4)*Math.sin(i*0.13+t)))*h*0.8;ctx.fillStyle='hsl('+(i/n*120+200|0)+',85%,60%)';ctx.fillRect(i*bw+1,h-v,bw-2,v);} };
const cv = document.getElementById('fx-audiobars');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw(ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Heatmap (canvas)

> Noise-driven heatmap shifts cool-to-hot; cursor adds a warm bloom; technical, hypnotic overlay.

- **id**: `heatmap` · **kind**: canvas · **section**: interaction-and-generative
- **tags**: noise, flow, cursor, overlay, canvas2d · **vibe**: technical, hypnotic
- **culture**: —
- **perf**: gpu low / cpu high / mobileSafe false
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: heatmap — Heatmap (canvas) · license MIT -->
<canvas id="fx-heatmap" style="display:block;width:100%;height:100%;min-height:240px"></canvas>
<script type="module">
const draw = function heatmap(ctx,w,h,t,mx,my){ const S=6;for(let y=0;y<h;y+=S)for(let x=0;x<w;x+=S){let v=this.vnoise(x*0.02,y*0.02+t*0.3);if(mx>=0)v+=Math.max(0,1-Math.hypot(x-mx,y-my)/80)*0.6;v=Math.min(1,v);ctx.fillStyle='hsl('+(240-v*240|0)+',90%,'+(20+v*40|0)+'%)';ctx.fillRect(x,y,S,S);} };
function vhash(x,y){ let n=Math.sin(x*127.1+y*311.7)*43758.5453; return n-Math.floor(n); }
function vnoise(x,y){ const xi=Math.floor(x),yi=Math.floor(y),xf=x-xi,yf=y-yi; const u=xf*xf*(3-2*xf),v=yf*yf*(3-2*yf); const a=this.vhash(xi,yi),b=this.vhash(xi+1,yi),c=this.vhash(xi,yi+1),d=this.vhash(xi+1,yi+1); return a+(b-a)*u+(c-a)*v+(a-b-c+d)*u*v; }
const NOISE = { vhash, vnoise };
const cv = document.getElementById('fx-heatmap');
const ctx = cv.getContext('2d');
const DPR = Math.min(2, window.devicePixelRatio || 1);
const state = {};
let mx = -9999, my = -9999; // -9999 == not hovering (CONTRACT 2)
cv.addEventListener('pointermove', (e) => {
  const r = cv.getBoundingClientRect(); mx = e.clientX - r.left; my = e.clientY - r.top;
});
cv.addEventListener('pointerleave', () => { mx = -9999; my = -9999; });
const t0 = performance.now();
(function frame() {
  const w = Math.max(1, cv.clientWidth || 300), h = Math.max(1, cv.clientHeight || 240);
  if (cv.width !== Math.round(w * DPR) || cv.height !== Math.round(h * DPR)) {
    cv.width = Math.round(w * DPR); cv.height = Math.round(h * DPR);
  }
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // draw in CSS px
  const t = (performance.now() - t0) / 1000;
  draw.call(NOISE, ctx, w, h, t, mx, my, state);
  requestAnimationFrame(frame);
})();
</script>
```

## Runtime notes

Canvas2D: draw(ctx, w, h, t, mx, my, state) runs each frame; w/h and mx/my are CSS px (mx,my = -9999 when not hovering), ctx is pre-scaled by DPR = min(2, devicePixelRatio). Perf budget — gpu: low, cpu: high, mobileSafe: false. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Decode Text (dom)

> 乱码归位

- **id**: `scramble` · **kind**: dom · **section**: interaction
- **tags**: — · **vibe**: —
- **culture**: UI / typography
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: scramble — Decode Text (dom) · license MIT -->
<div id="fx-root-scramble"><p data-scramble style="font-family:ui-monospace,monospace;font-size:2rem;letter-spacing:.1em;color:#CDE85A;margin:0">DECODE</p></div>
<script type="module">
const init = ({ init(root) {
    const el = root.querySelector('[data-scramble]');
    if (!el) return { stop() {} };
    const words = ['CANVAS', 'SHADER', 'EFFECT', 'MOTION'], chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ#%@&/<>*0123456789';
    let wi = 0, scrTimer = 0;
    const setWord = (target) => {
      let frame = 0; const len = target.length; clearInterval(scrTimer);
      scrTimer = setInterval(() => {
        let s = '';
        for (let i = 0; i < len; i++) { s += i < frame / 2.4 ? target[i] : chars[Math.floor(Math.random() * chars.length)]; }
        el.textContent = s; frame++; if (frame / 2.4 > len) clearInterval(scrTimer);
      }, 42);
    };
    setWord(words[0]);
    const scrCycle = setInterval(() => { wi = (wi + 1) % words.length; setWord(words[wi]); }, 2200);
    return { stop() { clearInterval(scrTimer); clearInterval(scrCycle); } };
  } }).init;
const root = document.getElementById('fx-root-scramble');
const inst = init(root) || {};
if (inst.step) {
  const t0 = performance.now();
  (function loop() { inst.step((performance.now() - t0) / 1000); requestAnimationFrame(loop); })();
}
</script>
```

## Runtime notes

DOM: init(root) wires listeners/timers and returns { step?(t), stop() }; stop() releases everything for leak-free remounts. Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Magnetic Cursor (dom)

> 磁吸自定义光标

- **id**: `magnetic` · **kind**: dom · **section**: interaction
- **tags**: — · **vibe**: —
- **culture**: UI / interaction
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: magnetic — Magnetic Cursor (dom) · license MIT -->
<div id="fx-root-magnetic"><div data-magnetic style="position:relative;width:340px;height:200px;background:#0a0b0d;color:#fff;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap"><div data-magcursor style="position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;border:1px solid #CDE85A;pointer-events:none"></div><span data-magchip style="padding:6px 14px;border:1px solid #333;border-radius:999px">Home</span><span data-magchip style="padding:6px 14px;border:1px solid #333;border-radius:999px">Work</span><span data-magchip style="padding:6px 14px;border:1px solid #333;border-radius:999px">About</span></div></div>
<script type="module">
const init = ({ init(root) {
    const tile = root.querySelector('[data-magnetic]');
    if (!tile) return { stop() {} };
    const cursor = tile.querySelector('[data-magcursor]'), chips = [...tile.querySelectorAll('[data-magchip]')];
    let tx = 0, ty = 0, cx = 0, cy = 0, scale = 1;
    const center = () => { const r = tile.getBoundingClientRect(); tx = r.width / 2; ty = r.height / 2; };
    center(); cx = tx; cy = ty;
    const onMove = (e) => { const r = tile.getBoundingClientRect(); tx = e.clientX - r.left; ty = e.clientY - r.top; };
    tile.addEventListener('pointermove', onMove, { passive: true });
    tile.addEventListener('pointerleave', center);
    return {
      step() {
        const r = tile.getBoundingClientRect(); let best = null, bd = 1e9;
        chips.forEach((ch) => { const cr = ch.getBoundingClientRect(); const ccx = cr.left - r.left + cr.width / 2, ccy = cr.top - r.top + cr.height / 2; const d = Math.hypot(tx - ccx, ty - ccy); if (d < bd) { bd = d; best = { x: ccx, y: ccy, el: ch }; } });
        const active = best && bd < 64; let gx = tx, gy = ty, ts = 1; if (active) { gx = best.x; gy = best.y; ts = 2.5; }
        chips.forEach((ch) => { const on = active && ch === best.el; ch.style.color = on ? '#0a0b0d' : ''; ch.style.background = on ? '#CDE85A' : ''; ch.style.borderColor = on ? '#CDE85A' : ''; });
        cx += (gx - cx) * 0.2; cy += (gy - cy) * 0.2; scale += (ts - scale) * 0.2;
        cursor.style.transform = 'translate(' + cx + 'px,' + cy + 'px) translate(-50%,-50%) scale(' + scale.toFixed(3) + ')';
      },
      stop() { tile.removeEventListener('pointermove', onMove); tile.removeEventListener('pointerleave', center); },
    };
  } }).init;
const root = document.getElementById('fx-root-magnetic');
const inst = init(root) || {};
if (inst.step) {
  const t0 = performance.now();
  (function loop() { inst.step((performance.now() - t0) / 1000); requestAnimationFrame(loop); })();
}
</script>
```

## Runtime notes

DOM: init(root) wires listeners/timers and returns { step?(t), stop() }; stop() releases everything for leak-free remounts. Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Kinetic Type (dom)

> 可变字重波动

- **id**: `kinetic` · **kind**: dom · **section**: interaction
- **tags**: — · **vibe**: —
- **culture**: typography / variable font
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: kinetic — Kinetic Type (dom) · license MIT -->
<div id="fx-root-kinetic"><div data-kinetic style="color:#fff;font-family:system-ui,sans-serif"></div></div>
<script type="module">
const init = ({ init(root) {
    const el = root.querySelector('[data-kinetic]');
    if (!el) return { stop() {} };
    const word = 'MOTION'; el.innerHTML = '';
    const spans = [...word].map((ch) => { const s = document.createElement('span'); s.textContent = ch; s.style.cssText = 'display:inline-block;font-weight:400;font-size:clamp(28px,5vw,46px)'; el.appendChild(s); return s; });
    return {
      step(t) {
        spans.forEach((s, i) => { const ph = t * 2 - i * 0.5; s.style.fontWeight = Math.round(400 + 300 * (0.5 + 0.5 * Math.sin(ph))); s.style.transform = 'translateY(' + (Math.sin(ph) * 8).toFixed(1) + 'px)'; });
      },
      stop() { el.innerHTML = ''; },
    };
  } }).init;
const root = document.getElementById('fx-root-kinetic');
const inst = init(root) || {};
if (inst.step) {
  const t0 = performance.now();
  (function loop() { inst.step((performance.now() - t0) / 1000); requestAnimationFrame(loop); })();
}
</script>
```

## Runtime notes

DOM: init(root) wires listeners/timers and returns { step?(t), stop() }; stop() releases everything for leak-free remounts. Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Marquee Ticker (dom)

> 无缝跑马灯

- **id**: `marquee` · **kind**: dom · **section**: interaction
- **tags**: — · **vibe**: —
- **culture**: UI / editorial
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor false, trigger auto
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: marquee — Marquee Ticker (dom) · license MIT -->
<div id="fx-root-marquee"><div style="overflow:hidden;white-space:nowrap;width:320px;color:#fff;font-family:ui-monospace,monospace;padding:.6rem 0"><div data-marquee style="display:inline-block">FX LAB · ZERO-DEP WEB EFFECTS · PASTE ANYWHERE · FX LAB · ZERO-DEP WEB EFFECTS · PASTE ANYWHERE · </div></div></div>
<script type="module">
const init = ({ init(root) {
    const tr = root.querySelector('[data-marquee]');
    if (!tr) return { stop() {} };
    let x = 0;
    return {
      step() { const wdt = tr.scrollWidth / 2 || tr.offsetWidth; x -= 1.3; if (x <= -wdt) x += wdt; tr.style.transform = 'translateX(' + x.toFixed(1) + 'px)'; },
      stop() {},
    };
  } }).init;
const root = document.getElementById('fx-root-marquee');
const inst = init(root) || {};
if (inst.step) {
  const t0 = performance.now();
  (function loop() { inst.step((performance.now() - t0) / 1000); requestAnimationFrame(loop); })();
}
</script>
```

## Runtime notes

DOM: init(root) wires listeners/timers and returns { step?(t), stop() }; stop() releases everything for leak-free remounts. Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# 3D Tilt Card (dom)

> 透视倾斜 · 跟手

- **id**: `tilt` · **kind**: dom · **section**: interaction
- **tags**: — · **vibe**: —
- **culture**: UI / 3D perspective
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: tilt — 3D Tilt Card (dom) · license MIT -->
<div id="fx-root-tilt"><div data-tilt style="width:300px;height:200px;perspective:600px"><div data-tiltcard style="width:100%;height:100%;background:linear-gradient(135deg,#1f6feb,#CDE85A);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#0a0b0d;font-weight:700;font-family:system-ui">Tilt me</div></div></div>
<script type="module">
const init = ({ init(root) {
    const tile = root.querySelector('[data-tilt]');
    if (!tile) return { stop() {} };
    const card = tile.querySelector('[data-tiltcard]');
    const onMove = (e) => { const r = tile.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5, py = (e.clientY - r.top) / r.height - 0.5; card.style.transform = 'perspective(600px) rotateY(' + (px * 24).toFixed(1) + 'deg) rotateX(' + (-py * 24).toFixed(1) + 'deg)'; };
    const onLeave = () => { card.style.transform = 'perspective(600px) rotateY(0deg) rotateX(0deg)'; };
    tile.addEventListener('pointermove', onMove, { passive: true });
    tile.addEventListener('pointerleave', onLeave);
    return { stop() { tile.removeEventListener('pointermove', onMove); tile.removeEventListener('pointerleave', onLeave); } };
  } }).init;
const root = document.getElementById('fx-root-tilt');
const inst = init(root) || {};
if (inst.step) {
  const t0 = performance.now();
  (function loop() { inst.step((performance.now() - t0) / 1000); requestAnimationFrame(loop); })();
}
</script>
```

## Runtime notes

DOM: init(root) wires listeners/timers and returns { step?(t), stop() }; stop() releases everything for leak-free remounts. Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.


---

# Spotlight Mask (dom)

> 光标聚光揭示

- **id**: `spot` · **kind**: dom · **section**: interaction
- **tags**: — · **vibe**: —
- **culture**: UI / reveal
- **perf**: gpu low / cpu low / mobileSafe true
- **interactive**: followsCursor true, trigger hover
- **reducedMotion**: freeze · **deterministic**: true
- **license**: MIT

## Drop-in snippet

```html
<!-- fx-lab effect: spot — Spotlight Mask (dom) · license MIT -->
<div id="fx-root-spot"><div data-spot style="position:relative;width:320px;height:200px;background:#111;color:#fff;overflow:hidden;-webkit-mask-image:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),#000 0,transparent 72%);mask-image:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),#000 0,transparent 72%)"><div style="padding:1.2rem;font-size:1.1rem;line-height:1.5">Move the cursor across this panel to reveal the spotlight mask. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div></div>
<script type="module">
const init = ({ init(root) {
    const tile = root.querySelector('[data-spot]');
    if (!tile) return { stop() {} };
    const set = (x, y) => { tile.style.setProperty('--mx', x + 'px'); tile.style.setProperty('--my', y + 'px'); };
    const onMove = (e) => { const r = tile.getBoundingClientRect(); set(e.clientX - r.left, e.clientY - r.top); };
    const onLeave = () => { const r = tile.getBoundingClientRect(); set(r.width / 2, r.height / 2); };
    tile.addEventListener('pointermove', onMove, { passive: true });
    tile.addEventListener('pointerleave', onLeave);
    const r = tile.getBoundingClientRect(); set(r.width / 2, r.height / 2);
    return { stop() { tile.removeEventListener('pointermove', onMove); tile.removeEventListener('pointerleave', onLeave); } };
  } }).init;
const root = document.getElementById('fx-root-spot');
const inst = init(root) || {};
if (inst.step) {
  const t0 = performance.now();
  (function loop() { inst.step((performance.now() - t0) / 1000); requestAnimationFrame(loop); })();
}
</script>
```

## Runtime notes

DOM: init(root) wires listeners/timers and returns { step?(t), stop() }; stop() releases everything for leak-free remounts. Perf budget — gpu: low, cpu: low, mobileSafe: true. Reduced motion: freeze.

## Known limitations

- None noted.