Particules, Canvas & Atmosphère

<div class="demo-preview">
  <div class="ps-canvas-wrap">
    <canvas class="ps-canvas" id="psStarfield"></canvas>
  </div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 15);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.demo-preview:has(.ps-canvas-wrap) {
  min-height: 280px;
  background: #0a0a0f;
}

.ps-canvas {
  width: 100%;
  height: 280px;
  display: block;
  border-radius: 0;
}

.ps-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}

.ps-canvas-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

(function() {
  /* fx-0485 — Starfield (IIFE scopée) — restauré le 11/08/2026 : le code de cet effet
     gratuit (data-free) avait été retiré par erreur avec le code premium (anti-scalping #13). */
  (function() {
    const canvas = document.getElementById('psStarfield');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;
    const w = canvas.width,
      h = canvas.height;
    const stars = [];
    for (let i = 0; i < 200; i++) {
      stars.push({
        x: Math.random() * w - w / 2,
        y: Math.random() * h - h / 2,
        z: Math.random() * w
      });
    }

    function draw() {
      ctx.fillStyle = 'rgba(10,10,15,0.2)';
      ctx.fillRect(0, 0, w, h);
      stars.forEach(s => {
        s.z -= 2;
        if (s.z <= 0) {
          s.z = w;
          s.x = Math.random() * w - w / 2;
          s.y = Math.random() * h - h / 2;
        }
        const sx = (s.x / s.z) * w / 2 + w / 2;
        const sy = (s.y / s.z) * h / 2 + h / 2;
        const r = Math.max(0.5, (1 - s.z / w) * 2.5);
        const a = 1 - s.z / w;
        ctx.beginPath();
        ctx.arc(sx, sy, r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255,255,255,${a})`;
        ctx.fill();
      });
      requestAnimationFrame(draw);
    }
    draw();
  })();
})();

<div class="demo-preview">

  <div class="cxp-scene" id="cxpScene"
       role="img"
       aria-label="Confetti Explosion — explosion radiale de confettis métallisés depuis le bouton"
       data-colors="#FF4D9E,#FFD700,#00E5FF,#8AFF59,#F0F4F8,#FF8040,#E040FB,#FDFFB6">
    <canvas class="cxp-canvas" aria-hidden="true"></canvas>
    <div class="cxp-label" aria-hidden="true">Cliquez n'importe où · ou</div>
    <button class="cxp-btn" aria-label="Lancer une explosion de confettis">🎉 Celebrate!</button>
  </div>

</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.cxp-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
  contain: layout style paint;
  background: #0a0a0f;
}

.cxp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.cxp-btn {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f1f5f9;
  padding: 10px 26px;
  border-radius: 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, transform 0.10s;
  outline: 2px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;

  animation: cxp-idle-pulse 3.4s ease-in-out infinite;
}

.cxp-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.cxp-btn:active {
  transform: translate(-50%, 50%) scale(0.95);
}

.cxp-btn:focus-visible {
  outline-color: #fbbf24;
  outline-offset: 3px;
}

.cxp-label {
  position: absolute;
  bottom: 10px;
  left: 14px;
  pointer-events: none;
  z-index: 1;
  color: rgba(148, 163, 184, 0.28);
  font-size: clamp(9px, 1.2vw, 11px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}

.cxp-btn.cxp-punch {
  animation: cxp-btn-punch 0.30s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .cxp-btn {
    animation: none;
    transition: none;
  }

  .cxp-btn.cxp-punch {
    animation: none;
  }

  .cxp-btn:active {
    transform: translate(-50%, 50%);
  }
}

@media (max-width: 480px) {
  .cxp-btn {
    font-size: 13px;
    padding: 8px 18px;
  }
}

@keyframes cxp-idle-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
  }

  50% {
    box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.18);
  }
}

@keyframes cxp-btn-punch {
  0% {
    transform: translate(-50%, 50%) scale(0.92);
  }

  55% {
    transform: translate(-50%, 50%) scale(1.05);
  }

  100% {
    transform: translate(-50%, 50%) scale(1.00);
  }
}

(function() {
  /* fx-0505 */
  (function() {
    'use strict';

    var REDUCE = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var PI2 = Math.PI * 2;
    var PI = Math.PI;

    /* ── Physique (valeurs Owen) ──────────────────────────────────────────── */
    var G = 0.06; /* gravité px/frame² @ 60fps → terminal ≈ 1,44 px/frame */
    var DRAG = 0.96; /* traînée ×0,96/frame (Owen : 0,955–0,965) */
    var WOB = 0.32; /* flottement feuille-morte */

    /* Δt normalisé (60fps=1,0 ; 120fps=0,5) — recalculé dans tick() */
    var _tickDt = 1.0;
    var _lastTickTs = 0;

    /* ── Vitesses initiales absolues par couche (px/frame @ 60fps) ──────── */
    /* rayon max ≈ 40 % de la largeur (Owen) : 8/0,04 ≈ 200 px ≈ 42 % de 480 */
    var SPEED = [{
        spMin: 2,
        spMax: 5,
        alpha: 0.70
      }, /* 0 = lointain */
      {
        spMin: 4,
        spMax: 8,
        alpha: 1.00
      } /* 1 = proche   */
    ];

    /* ── Biais vers le haut (px/frame soustrait à vy) ────────────────────── */
    var BIAS_UP = 0; /* annulé : décalait toutes les particules vers le haut, sortie par le top */

    /* ── Tailles (px, non scalées) ───────────────────────────────────────── */
    var SZ_NEAR = {
      rw: [8, 14],
      rh: [3.5, 6.5],
      c: [4, 10],
      s: [6, 13]
    };
    var SZ_FAR = {
      rw: [4, 7],
      rh: [1.8, 3.2],
      c: [2, 5],
      s: [3, 7]
    };

    /* ── Palette candy saturée ────────────────────────────────────────────── */
    var PALETTES = {
      candy: ['#FF1A8C', '#FFD700', '#00EEFF', '#77FF00', '#FFFFFF', '#FF6600', '#CC00FF', '#FFE500'],
      gold: ['#FFD700', '#FFF0A0', '#F0E0A0', '#C8A840', '#FFFBE0', '#E8C840', '#FFE880', '#FFF8D0'],
      pastel: ['#FFB3D9', '#FFE4B3', '#B3F0FF', '#C8FFB3', '#F0E8FF', '#FFD0C8', '#E8C8FF', '#FFF8E0'],
      rainbow: ['#FF0000', '#FF8800', '#FFFF00', '#00FF00', '#0055FF', '#AA00FF', '#FF0099', '#FFFFFF']
    };
    var COLORS_DEFAULT = PALETTES.candy;

    var MAX_PARTS = 550;

    /* ── Utilitaires ─────────────────────────────────────────────────────── */
    function rnd(a, b) {
      return a + Math.random() * (b - a);
    }

    function pick(arr) {
      return arr[(Math.random() * arr.length) | 0];
    }

    function clamp(v, a, b) {
      return v < a ? a : v > b ? b : v;
    }

    function sgn() {
      return Math.random() < 0.5 ? 1 : -1;
    }

    /* ── Couleur sombre (dos) ───────────────────────────────────────────── */
    function darken(hex, f) {
      var r = parseInt(hex.slice(1, 3), 16);
      var g = parseInt(hex.slice(3, 5), 16);
      var b = parseInt(hex.slice(5, 7), 16);
      return 'rgb(' + Math.round(r * f) + ',' + Math.round(g * f) + ',' + Math.round(b * f) + ')';
    }

    /* ── Types de formes ─────────────────────────────────────────────────── */
    var SHAPES = ['rect', 'rect', 'rect', 'rect', 'circle', 'ribbon', 'ribbon', 'star', 'star'];

    /* ── Alpha de vie : fondu UNIQUEMENT sur le dernier 25 % ────────────── */
    function lifeAlpha(p) {
      var t = p.life / p.lifeMax;
      var fi = p.life < 8 ? p.life / 8 : 1;
      var fo = t > 0.75 ? 1 - (t - 0.75) / 0.25 : 1;
      return p.alpha * fi * fo;
    }

    /* ── Instance par scène ──────────────────────────────────────────────── */
    function createInstance(scene) {
      var canvas = scene.querySelector('.cxp-canvas');
      if (!canvas) return null;
      var ctx = canvas.getContext('2d');
      var dpr = window.devicePixelRatio || 1;
      var W = 0,
        H = 0;
      var raf = null;
      var running = false;
      var lastBurst = 0;
      var AUTO_INTERVAL = 7000;

      /* ── Pool LOCAL ─────────────────────────────────────────────────────── */
      var pool = [];
      var active = [];
      var floaters = [];

      function mkP() {
        return {
          alive: false,
          x: 0,
          y: 0,
          vx: 0,
          vy: 0,
          w: 0,
          h: 0,
          shape: 'rect',
          color: '#fff',
          colorDark: '#888',
          rotX: 0,
          rotY: 0,
          rotVX: 0,
          rotVY: 0,
          wobPhase: 0,
          wobSpeed: 0,
          layer: 0,
          alpha: 1,
          life: 0,
          lifeMax: 1,
          seg: null,
          segLen: 0,
          glintT: 0,
          glintDur: 0
        };
      }

      function getP() {
        for (var i = 0; i < pool.length; i++) {
          if (!pool[i].alive) return pool[i];
        }
        if (pool.length >= MAX_PARTS) return null;
        var p = mkP();
        pool.push(p);
        return p;
      }

      /* ── Configuration d'une particule d'explosion ───────────────────────── */
      function setupP(p, x, y, angle, spd, layerIdx, colors, isFloater) {
        var S = SPEED[layerIdx];
        var sz = layerIdx === 1 ? SZ_NEAR : SZ_FAR;
        p.alive = true;
        p.x = x;
        p.y = y;
        p.vx = Math.cos(angle) * spd;
        p.vy = Math.sin(angle) * spd - (isFloater ? 0 : BIAS_UP);
        p.layer = layerIdx;
        p.alpha = S.alpha;
        p.shape = SHAPES[(Math.random() * SHAPES.length) | 0];
        p.color = pick(colors);
        p.colorDark = darken(p.color, 0.30);
        if (p.shape === 'rect' || p.shape === 'ribbon') {
          p.w = rnd(sz.rw[0], sz.rw[1]);
          p.h = rnd(sz.rh[0], sz.rh[1]);
        } else if (p.shape === 'circle') {
          p.w = rnd(sz.c[0], sz.c[1]);
          p.h = p.w;
        } else {
          p.w = rnd(sz.s[0], sz.s[1]);
          p.h = p.w;
        }
        p.rotX = rnd(0, PI2);
        p.rotY = rnd(0, PI2);
        p.rotVX = rnd(0.04, 0.14) * sgn();
        p.rotVY = rnd(0.03, 0.11) * sgn();
        p.wobPhase = rnd(0, PI2);
        p.wobSpeed = rnd(0.032, 0.090);
        /* Vie 2,4–3,4 s @ 60fps → 144–204 frames ; fondu dernier 25 % */
        p.lifeMax = isFloater ? 99999 : rnd(144, 204);
        p.life = 0;
        p.glintT = 0;
        p.glintDur = rnd(10, 30);
        if (p.shape === 'ribbon') {
          p.segLen = 9;
          p.seg = [];
          for (var s = 0; s < p.segLen; s++) p.seg.push({
            x: p.x,
            y: p.y
          });
        } else {
          p.seg = null;
        }
      }

      /* ── Émission d'un lot ───────────────────────────────────────────────── */
      function emitBatch(cx, cy, count, colors, power) {
        var emitR = rnd(0, 8),
          emitA = rnd(0, PI2);
        for (var i = 0; i < count; i++) {
          var p = getP();
          if (!p) break;
          var ea = rnd(0, PI2);
          var ox = cx + Math.cos(ea) * rnd(0, 8);
          var oy = cy + Math.sin(ea) * rnd(0, 8);
          var angle = rnd(-PI, PI);
          var layerIdx = Math.random() < 0.38 ? 0 : 1;
          var S = SPEED[layerIdx];
          var spd = rnd(S.spMin, S.spMax) * power;
          setupP(p, ox, oy, angle, spd, layerIdx, colors, false);
          active.push(p);
        }
      }

      /* ── Émission étalée sur 4 vagues (120–180 ms) ──────────────────────── */
      var WAVE_DELAYS = [0, 42, 90, 148]; /* ms */
      var WAVE_FRAC = [0.30, 0.28, 0.25]; /* 3 premières vagues, la 4e = reste */

      function burstStaggered(cx, cy, total, colors, power) {
        if (!running) start();
        colors = colors || getColors();
        power = power || (REDUCE ? 0.50 : 1.0);
        WAVE_DELAYS.forEach(function(ms, idx) {
          var cnt;
          if (idx < 3) {
            cnt = Math.floor(total * WAVE_FRAC[idx]);
          } else {
            cnt = total - Math.floor(total * (WAVE_FRAC[0] + WAVE_FRAC[1] + WAVE_FRAC[2]));
          }
          setTimeout(function() {
            emitBatch(cx, cy, cnt, colors, power);
          }, ms);
        });
        lastBurst = performance.now();
      }

      /* ── Confettis flotteurs permanents ─────────────────────────────────── */
      function initFloaters(colors) {
        floaters = [];
        if (REDUCE) return;
        for (var i = 0; i < 12; i++) {
          var p = mkP();
          var lIdx = Math.random() < 0.5 ? 0 : 1;
          var S = SPEED[lIdx];
          p.alive = true;
          p.x = rnd(0.06, 0.94) * W;
          p.y = rnd(-0.10, 0.90) * H;
          p.vx = rnd(-0.3, 0.3);
          p.vy = rnd(0.15, 0.50);
          p.layer = lIdx;
          p.alpha = rnd(0.50, 0.80);
          p.shape = SHAPES[(Math.random() * SHAPES.length) | 0];
          p.color = pick(colors);
          p.colorDark = darken(p.color, 0.30);
          var sz = lIdx === 1 ? SZ_NEAR : SZ_FAR;
          if (p.shape === 'rect' || p.shape === 'ribbon') {
            p.w = rnd(sz.rw[0], sz.rw[1]);
            p.h = rnd(sz.rh[0], sz.rh[1]);
          } else if (p.shape === 'circle') {
            p.w = rnd(sz.c[0], sz.c[1]);
            p.h = p.w;
          } else {
            p.w = rnd(sz.s[0], sz.s[1]);
            p.h = p.w;
          }
          p.rotX = rnd(0, PI2);
          p.rotY = rnd(0, PI2);
          p.rotVX = rnd(0.006, 0.022) * sgn();
          p.rotVY = rnd(0.005, 0.018) * sgn();
          p.wobPhase = rnd(0, PI2);
          p.wobSpeed = rnd(0.015, 0.045);
          p.lifeMax = 99999;
          p.life = 30; /* dépasse le fade-in */
          if (p.shape === 'ribbon') {
            p.segLen = 9;
            p.seg = [];
            for (var s = 0; s < p.segLen; s++) p.seg.push({
              x: p.x,
              y: p.y
            });
          }
          floaters.push(p);
        }
      }

      function updateFloater(p) {
        p.wobPhase += p.wobSpeed;
        p.vx += Math.sin(p.wobPhase) * 0.018;
        p.vy += 0.014; /* gravité douce */
        p.vx *= 0.992;
        p.vy *= 0.992;
        p.x += p.vx;
        p.y += p.vy;
        p.rotX += p.rotVX;
        p.rotY += p.rotVY;
        if (p.shape === 'ribbon' && p.seg) {
          for (var s = p.segLen - 1; s > 0; s--) {
            p.seg[s].x = p.seg[s - 1].x;
            p.seg[s].y = p.seg[s - 1].y;
          }
          p.seg[0].x = p.x;
          p.seg[0].y = p.y;
        }
        if (p.y > H + 60) {
          p.x = rnd(0.06, 0.94) * W;
          p.y = -rnd(15, 70);
          p.vx = rnd(-0.2, 0.2);
          p.vy = rnd(0.15, 0.45);
        }
      }

      /* ── Dessin particules ────────────────────────────────────────────────── */
      function drawRect(p) {
        var cosX = Math.cos(p.rotX),
          cosY = Math.cos(p.rotY);
        var nz = cosX * cosY;
        var aw = Math.abs(cosY) * p.w,
          ah = Math.abs(cosX) * p.h;
        if (aw < 0.6 || ah < 0.4) return;
        var a = lifeAlpha(p);
        if (a <= 0.004) return;
        var glint = 0;
        if (p.glintT < p.glintDur) {
          glint = Math.sin(p.glintT / p.glintDur * PI) * 0.92;
          p.glintT++;
        }
        ctx.save();
        ctx.globalAlpha = a;
        ctx.translate(p.x, p.y);
        ctx.rotate(p.rotX * 0.45);
        if (p.layer === 1) {
          ctx.shadowColor = p.color;
          ctx.shadowBlur = Math.abs(p.vx + p.vy) * 0.28;
        }
        if (glint > 0.20) ctx.fillStyle = glint > 0.58 ? '#ffffff' : p.color;
        else if (nz < 0) ctx.fillStyle = p.colorDark;
        else ctx.fillStyle = p.color;
        ctx.fillRect(-aw / 2, -ah / 2, aw, ah);
        ctx.shadowBlur = 0;
        ctx.restore();
      }

      function drawCircle(p) {
        var r = Math.abs(Math.cos(p.rotX)) * p.w * 0.5;
        if (r < 0.4) return;
        var a = lifeAlpha(p);
        if (a <= 0.004) return;
        ctx.save();
        ctx.globalAlpha = a;
        ctx.beginPath();
        ctx.arc(p.x, p.y, r, 0, PI2);
        ctx.fillStyle = Math.cos(p.rotY) < 0 ? p.colorDark : p.color;
        ctx.fill();
        ctx.restore();
      }

      function drawRibbon(p) {
        if (!p.seg || p.seg.length < 2) return;
        var a = lifeAlpha(p);
        if (a <= 0.004) return;
        ctx.save();
        ctx.globalAlpha = a;
        ctx.lineWidth = Math.max(1.2, p.h * 0.88);
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.strokeStyle = Math.cos(p.rotY) >= 0 ? p.color : p.colorDark;
        ctx.beginPath();
        ctx.moveTo(p.seg[0].x, p.seg[0].y);
        for (var s = 1; s < p.seg.length; s++) {
          var mx = (p.seg[s - 1].x + p.seg[s].x) * 0.5,
            my = (p.seg[s - 1].y + p.seg[s].y) * 0.5;
          ctx.quadraticCurveTo(p.seg[s - 1].x, p.seg[s - 1].y, mx, my);
        }
        ctx.stroke();
        ctx.restore();
      }

      function drawStar(p) {
        var r = Math.abs(Math.cos(p.rotX)) * p.w * 0.52;
        if (r < 0.7) return;
        var a = lifeAlpha(p);
        if (a <= 0.004) return;
        ctx.save();
        ctx.globalAlpha = a;
        ctx.translate(p.x, p.y);
        ctx.rotate(p.rotY);
        ctx.beginPath();
        for (var i = 0; i < 10; i++) {
          var ang = (i * PI) / 5 - PI / 2;
          var rad = (i % 2 === 0) ? r : r * 0.40;
          if (i === 0) ctx.moveTo(Math.cos(ang) * rad, Math.sin(ang) * rad);
          else ctx.lineTo(Math.cos(ang) * rad, Math.sin(ang) * rad);
        }
        ctx.closePath();
        ctx.fillStyle = Math.cos(p.rotY) >= 0 ? p.color : p.colorDark;
        ctx.fill();
        ctx.restore();
      }

      function drawP(p) {
        if (p.shape === 'rect') drawRect(p);
        else if (p.shape === 'circle') drawCircle(p);
        else if (p.shape === 'ribbon') drawRibbon(p);
        else if (p.shape === 'star') drawStar(p);
      }

      /* ── Physique particule (explosion) ─────────────────────────────────── */
      function updateP(p) {
        var dt = _tickDt;
        p.life += dt;
        /* Physique Δt-correcte : DRAG^dt compense les fps > 60 */
        var drag = Math.pow(DRAG, dt);
        p.vy += G * dt;
        p.vx *= drag;
        p.vy *= drag;
        p.wobPhase += p.wobSpeed * dt;
        p.vx += Math.sin(p.wobPhase) * WOB * (0.20 + 0.80 * Math.random()) * 0.04 * dt;
        p.x += p.vx * dt;
        p.y += p.vy * dt; /* ×dt : pixels/s indépendants du fps */
        /* Clamp X avec rebond mou (Owen) */
        if (p.x < -10) {
          p.x = -10;
          if (p.vx < 0) p.vx *= -0.35;
        }
        if (p.x > W + 10) {
          p.x = W + 10;
          if (p.vx > 0) p.vx *= -0.35;
        }
        var spinDecay = Math.max(0.07, 1 - p.life / (p.lifeMax * 1.8));
        p.rotX += p.rotVX * spinDecay * dt;
        p.rotY += p.rotVY * spinDecay * dt;
        if (p.shape === 'ribbon' && p.seg) {
          for (var s = p.segLen - 1; s > 0; s--) {
            p.seg[s].x = p.seg[s - 1].x;
            p.seg[s].y = p.seg[s - 1].y;
          }
          p.seg[0].x = p.x;
          p.seg[0].y = p.y;
        }
      }

      /* ── Sparkles ambiants ─────────────────────────────────────────────── */
      var sparkles = [];

      function initSparkles(colors) {
        sparkles = [];
        if (REDUCE) return;
        for (var i = 0; i < 14; i++) sparkles.push({
          x: rnd(0.06, 0.94),
          y: rnd(0.06, 0.94),
          r: rnd(0.8, 2.0),
          phase: rnd(0, PI2),
          speed: rnd(0.022, 0.058),
          color: pick(colors),
          base: rnd(0.07, 0.20)
        });
      }

      function drawSparkles(colors) {
        for (var i = 0; i < sparkles.length; i++) {
          var sp = sparkles[i];
          sp.phase += sp.speed;
          var a = sp.base * (0.3 + 0.7 * Math.abs(Math.sin(sp.phase)));
          if (Math.random() < 0.002) sp.color = pick(colors);
          ctx.save();
          ctx.globalAlpha = a;
          ctx.fillStyle = sp.color;
          ctx.beginPath();
          ctx.arc(sp.x * W, sp.y * H, sp.r, 0, PI2);
          ctx.fill();
          ctx.restore();
        }
      }

      /* ── Lecture palette ───────────────────────────────────────────────── */
      function getColors() {
        var attr = scene.dataset.colors;
        return attr ? attr.split(',').map(function(s) {
          return s.trim();
        }) : COLORS_DEFAULT;
      }

      /* ── Redimensionnement ─────────────────────────────────────────────── */
      function resize() {
        var rect = scene.getBoundingClientRect();
        W = rect.width;
        H = rect.height;
        canvas.width = Math.round(W * dpr);
        canvas.height = Math.round(H * dpr);
        canvas.style.width = W + 'px';
        canvas.style.height = H + 'px';
        ctx.scale(dpr, dpr);
      }

      /* ── API burst ─────────────────────────────────────────────────────── */
      function burst(x, y, count, colors, power) {
        if (!running) start();
        burstStaggered(x, y, count || (REDUCE ? 20 : 260), colors, power);
      }

      function burstFromBtn(count) {
        var btn = scene.querySelector('.cxp-btn');
        if (btn) {
          var sr = scene.getBoundingClientRect();
          var br = btn.getBoundingClientRect();
          burst(br.left + br.width / 2 - sr.left, br.top + br.height / 2 - sr.top, count || 260);
        } else {
          burst(W / 2, H / 2, count || 260);
        }
      }

      /* ── Boucle de rendu ───────────────────────────────────────────────── */
      function tick(ts) {
        if (!running) return;
        raf = requestAnimationFrame(tick);
        /* Δt normalisé : 60fps→1,0 ; 120fps→0,5 ; cap 3× pour éviter spirale */
        _tickDt = _lastTickTs > 0 ? Math.min((ts - _lastTickTs) / 16.667, 3.0) : 1.0;
        _lastTickTs = ts;
        /* Auto-explosion toutes les 7 s si scène vide */
        if (!REDUCE && active.length === 0 && ts - lastBurst >= AUTO_INTERVAL) {
          burstFromBtn();
          return;
        }

        ctx.clearRect(0, 0, W, H);
        drawSparkles(getColors());

        /* Flotteurs */
        for (var i = 0; i < floaters.length; i++) {
          updateFloater(floaters[i]);
          drawP(floaters[i]);
        }

        /* Particules explosion (lointain d'abord) */
        active.sort(function(a, b) {
          return a.layer - b.layer;
        });
        for (var j = active.length - 1; j >= 0; j--) {
          var p = active[j];
          updateP(p);
          /* Sortie : sol uniquement (Owen : X clampé, pas de sortie latérale) */
          if (p.life >= p.lifeMax || p.y > H + 50) {
            p.alive = false;
            active.splice(j, 1);
            continue;
          }
          drawP(p);
        }

      }

      function start() {
        if (running) return;
        running = true;
        resize();
        var cols = getColors();
        initSparkles(cols);
        initFloaters(cols);
        raf = requestAnimationFrame(tick);
      }

      function stop() {
        running = false;
        if (raf) {
          cancelAnimationFrame(raf);
          raf = null;
        }
        for (var i = 0; i < active.length; i++) active[i].alive = false;
        active.length = 0;
        if (ctx) ctx.clearRect(0, 0, W, H);
      }

      /* ── Événements (hiérarchie clic sécurisée) ──────────────────────── */
      var btn = scene.querySelector('.cxp-btn');

      if (btn) {
        btn.addEventListener('click', function(e) {
          e.stopPropagation();
          burstFromBtn(260);
          if (!REDUCE) {
            btn.classList.add('cxp-punch');
            setTimeout(function() {
              btn.classList.remove('cxp-punch');
            }, 320);
          }
        });
      }

      scene.addEventListener('click', function(e) {
        if (btn && (e.target === btn || btn.contains(e.target))) return;
        var rect = scene.getBoundingClientRect();
        burst(e.clientX - rect.left, e.clientY - rect.top, 160);
      });

      /* IntersectionObserver */
      if (typeof IntersectionObserver !== 'undefined') {
        new IntersectionObserver(function(entries) {
          entries.forEach(function(entry) {
            if (entry.isIntersecting) {
              start();
              if (lastBurst === 0) {
                setTimeout(function() {
                  if (REDUCE) burstStaggered(W / 2, H / 2, 20, null, 0.50);
                  else burstFromBtn(260);
                }, 180);
              }
            } else {
              stop();
            }
          });
        }, {
          threshold: 0.15
        }).observe(scene);
      } else {
        start();
        setTimeout(function() {
          burstFromBtn(260);
        }, 180);
      }

      if (typeof ResizeObserver !== 'undefined') {
        new ResizeObserver(resize).observe(scene);
      } else {
        window.addEventListener('resize', resize);
      }

      return {
        burst: burst,
        burstFromBtn: burstFromBtn,
        stop: stop,
        start: start
      };
    }

    /* ── Initialisation ───────────────────────────────────────────────────── */
    function init() {
      var scenes = document.querySelectorAll('.cxp-scene');
      var instances = [];
      scenes.forEach(function(scene) {
        var inst = createInstance(scene);
        if (inst) instances.push({
          scene: scene,
          inst: inst
        });
      });
      window.ConfettiExplosion = {
        burst: function(opts) {
          opts = opts || {};
          instances.forEach(function(item) {
            var r = item.scene.getBoundingClientRect();
            item.inst.burst(
              opts.x != null ? opts.x : r.width / 2,
              opts.y != null ? opts.y : r.height / 2,
              opts.count, opts.colors, opts.power
            );
          });
        }
      };
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
    } else {
      init();
    }

  })();
})();

<div class="demo-preview">
  <div class="frequency-bars" id="frequencyBars"></div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.frequency-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 120px;
}

.frequency-bars .bar {
  width: 8px;
  background: linear-gradient(to top, #6366f1, #d946ef);
  border-radius: 4px 4px 0 0;
  transition: height 0.05s ease;
}

(function() {
  /* fx-0515 — Frequency Bars (gratuit, autonome — restauré 22/08/2026) */
  (function() {
    const frequencyBars = document.getElementById('frequencyBars');
    if (!frequencyBars) return;
    const barCount = 20;
    for (let i = 0; i < barCount; i++) {
      const bar = document.createElement('div');
      bar.className = 'bar';
      bar.style.height = '10px';
      frequencyBars.appendChild(bar);
    }
    // Audio simulé (pas de micro ni de fichier) : superposition de sinus + bruit
    function getSimulatedAudio(count, time, baseFreq = 1) {
      const values = [];
      for (let i = 0; i < count; i++) {
        const freq = baseFreq + i * 0.5;
        const value = Math.abs(
          Math.sin(time * freq * 0.002) * 0.5 +
          Math.sin(time * freq * 0.003 + i) * 0.3 +
          Math.random() * 0.2
        );
        values.push(Math.min(1, value));
      }
      return values;
    }
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function animate(time) {
      const bars = frequencyBars.querySelectorAll('.bar');
      const data = getSimulatedAudio(barCount, time);
      bars.forEach((bar, i) => {
        bar.style.height = (10 + data[i] * 100) + 'px';
      });
      if (!reduceMotion) requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
  })();
})();

<div class="demo-preview" style="display: flex; align-items: center; justify-content: center;">
  <button class="snd-click-btn" id="sndClickBtn">
    <span class="snd-wave">&#128266;</span> Click Me
  </button>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.snd-click-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.snd-click-btn:active {
  transform: scale(0.95);
}

.snd-click-btn:hover {
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.snd-click-btn .snd-wave {
  display: inline-block;
  transition: transform 0.2s;
}

(function() {
  (function() {
    var btn = document.getElementById('sndClickBtn');
    if (!btn) return;
    var ctx = null;
    // Le contexte audio ne peut naitre que sur un geste : on le cree au 1er clic.
    function audio() {
      return ctx || (ctx = new(window.AudioContext || window.webkitAudioContext)());
    }
    btn.addEventListener('click', function() {
      var a = audio(),
        t = a.currentTime;
      var o = a.createOscillator(),
        g = a.createGain();
      o.type = 'triangle';
      o.frequency.setValueAtTime(880, t);
      o.frequency.exponentialRampToValueAtTime(320, t + 0.05);
      g.gain.setValueAtTime(0.14, t);
      g.gain.exponentialRampToValueAtTime(0.0001, t + 0.09);
      o.connect(g).connect(a.destination);
      o.start(t);
      o.stop(t + 0.1);
    });
  })();
})();

<div class="demo-preview" style="display: flex; align-items: center; justify-content: center;">
  <div class="snd-hover-card" id="sndHoverCard">
    <div class="snd-hover-icon">&#127925;</div>
    <div class="snd-hover-label">Survolez-moi</div>
  </div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
  --text-secondary: #a1a1aa;
}

.snd-hover-card {
  width: 180px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.snd-hover-card:hover {
  transform: translateY(-4px);
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.2);
}

.snd-hover-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.snd-hover-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

(function() {
  (function() {
    var carte = document.getElementById('sndHoverCard');
    if (!carte) return;
    var ctx = null,
      dernier = 0;

    function audio() {
      return ctx || (ctx = new(window.AudioContext || window.webkitAudioContext)());
    }
    carte.addEventListener('mouseenter', function() {
      if (Date.now() - dernier < 250) return; // pas de mitraillage au survol
      dernier = Date.now();
      var a = audio(),
        t = a.currentTime;
      var o = a.createOscillator(),
        g = a.createGain();
      o.type = 'sine';
      o.frequency.setValueAtTime(523.25, t); // do5
      o.frequency.linearRampToValueAtTime(659.25, t + 0.12);
      g.gain.setValueAtTime(0.0001, t);
      g.gain.exponentialRampToValueAtTime(0.1, t + 0.02);
      g.gain.exponentialRampToValueAtTime(0.0001, t + 0.22);
      o.connect(g).connect(a.destination);
      o.start(t);
      o.stop(t + 0.24);
    });
  })();
})();

<div class="demo-preview" style="display: flex; align-items: center; justify-content: center;">
  <div class="snd-notif-container">
    <button class="snd-notif-trigger" id="sndNotifBtn">&#128276; Notification</button>
    <div class="snd-notif-toast" id="sndNotifToast">&#9989; Nouveau message recu !</div>
  </div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.snd-notif-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.snd-notif-trigger {
  padding: 10px 20px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  cursor: pointer;
  font-size: 0.85rem;
}

.snd-notif-toast {
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.snd-notif-toast.show {
  opacity: 1;
  transform: translateY(0);
}

(function() {
  (function() {
    var btn = document.getElementById('sndNotifBtn'),
      toast = document.getElementById('sndNotifToast');
    if (!btn || !toast) return;
    var ctx = null,
      minuteur = null;

    function audio() {
      return ctx || (ctx = new(window.AudioContext || window.webkitAudioContext)());
    }

    function note(a, freq, depart, duree, vol) {
      var o = a.createOscillator(),
        g = a.createGain();
      o.type = 'sine';
      o.frequency.setValueAtTime(freq, depart);
      g.gain.setValueAtTime(0.0001, depart);
      g.gain.exponentialRampToValueAtTime(vol, depart + 0.015);
      g.gain.exponentialRampToValueAtTime(0.0001, depart + duree);
      o.connect(g).connect(a.destination);
      o.start(depart);
      o.stop(depart + duree + 0.02);
    }
    btn.addEventListener('click', function() {
      var a = audio(),
        t = a.currentTime;
      note(a, 880, t, 0.18, 0.12); // la5
      note(a, 1318.5, t + 0.1, 0.35, 0.1); // mi6 — carillon a deux notes
      toast.classList.add('show');
      clearTimeout(minuteur);
      minuteur = setTimeout(function() {
        toast.classList.remove('show');
      }, 2600);
    });
  })();
})();

<div class="demo-preview" style="display: flex; align-items: center; justify-content: center;">
  <div class="snd-toggle-container">
    <div class="snd-toggle" id="sndToggle">
      <div class="snd-toggle-knob"></div>
    </div>
    <div class="snd-toggle-label" id="sndToggleLabel">OFF</div>
  </div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
  --text-secondary: #a1a1aa;
}

.snd-toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.snd-toggle {
  width: 60px;
  height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.snd-toggle.on {
  background: #6366f1;
}

.snd-toggle-knob {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snd-toggle.on .snd-toggle-knob {
  transform: translateX(28px);
}

.snd-toggle-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

(function() {
  (function() {
    var inter = document.getElementById('sndToggle'),
      label = document.getElementById('sndToggleLabel');
    if (!inter) return;
    var ctx = null;

    function audio() {
      return ctx || (ctx = new(window.AudioContext || window.webkitAudioContext)());
    }
    inter.addEventListener('click', function() {
      var allume = inter.classList.toggle('on');
      if (label) label.textContent = allume ? 'ON' : 'OFF';
      var a = audio(),
        t = a.currentTime;
      var o = a.createOscillator(),
        g = a.createGain();
      o.type = 'square';
      // montee a l'allumage, descente a l'extinction : le son dit l'etat
      o.frequency.setValueAtTime(allume ? 420 : 760, t);
      o.frequency.exponentialRampToValueAtTime(allume ? 760 : 420, t + 0.07);
      g.gain.setValueAtTime(0.07, t);
      g.gain.exponentialRampToValueAtTime(0.0001, t + 0.11);
      o.connect(g).connect(a.destination);
      o.start(t);
      o.stop(t + 0.12);
    });
  })();
})();

<div class="demo-preview" style="display: flex; align-items: center; justify-content: center;">
  <div class="snd-tones">
    <button class="snd-tone-btn snd-tone-success" id="sndSuccess">&#9989; Succes</button>
    <button class="snd-tone-btn snd-tone-error" id="sndError">&#10060; Erreur</button>
  </div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 26);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.snd-tones {
  display: flex;
  gap: 16px;
}

.snd-tone-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s;
}

.snd-tone-btn:active {
  transform: scale(0.95);
}

.snd-tone-success {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.snd-tone-error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

(function() {
  (function() {
    var ok = document.getElementById('sndSuccess'),
      ko = document.getElementById('sndError');
    if (!ok && !ko) return;
    var ctx = null;

    function audio() {
      return ctx || (ctx = new(window.AudioContext || window.webkitAudioContext)());
    }

    function jouer(freqs, type, pas, duree, vol) {
      var a = audio(),
        t = a.currentTime;
      freqs.forEach(function(f, i) {
        var o = a.createOscillator(),
          g = a.createGain(),
          d = t + i * pas;
        o.type = type;
        o.frequency.setValueAtTime(f, d);
        g.gain.setValueAtTime(0.0001, d);
        g.gain.exponentialRampToValueAtTime(vol, d + 0.015);
        g.gain.exponentialRampToValueAtTime(0.0001, d + duree);
        o.connect(g).connect(a.destination);
        o.start(d);
        o.stop(d + duree + 0.02);
      });
    }
    // arpege majeur qui monte = reussite ; deux notes basses qui descendent = erreur
    if (ok) ok.addEventListener('click', function() {
      jouer([523.25, 659.25, 783.99], 'sine', 0.09, 0.22, 0.1);
    });
    if (ko) ko.addEventListener('click', function() {
      jouer([311.13, 233.08], 'sawtooth', 0.13, 0.3, 0.07);
    });
  })();
})();

<div class="ps-canvas-wrap">
  <canvas class="ps-canvas" id="psLiquidMetal"></canvas>
</div>

.demo-preview:has(.ps-canvas-wrap)  {
   min-height: 280px;
   background: rgb(10, 10, 15);
   }

.ps-canvas  {
   width: 100%;
   height: 280px;
   display: block;
   border-radius: 0px;
   }

.ps-canvas-wrap  {
   position: relative;
   width: 100%;
   height: 280px;
   }

.ps-canvas-wrap canvas  {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   }

(function() {
  var settings = { color: 'silver', speed: 1.0, distortion: 0.6, lightAngle: 45 };
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function initMetal(canvas) {
  // Reduced motion : fallback CSS gradient déjà en place via @media
  if (reduceMotion) return;

  const gl = canvas.getContext('webgl', { antialias: false, alpha: false }) ||
             canvas.getContext('experimental-webgl');

  // WebGL not supported → CSS gradient fallback (handled in CSS @media query)
  if (!gl) {
    canvas.style.display = 'none';
    return;
  }

  // === Vertex shader : fullscreen quad ===
  const VS = `
    attribute vec2 a_pos;
    void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }
  `;

  // === Fragment shader : liquid metal via Perlin noise + raymarching simplifié ===
  const FS = `
    precision highp float;
    uniform vec2  u_res;
    uniform float u_time;
    uniform float u_speed;
    uniform float u_distortion;
    uniform float u_light_angle;
    uniform vec3  u_color_a;
    uniform vec3  u_color_b;
    uniform vec3  u_color_c;

    // Classic 2D simplex noise (Ashima Arts, MIT)
    vec3 mod289(vec3 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
    vec2 mod289(vec2 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
    vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }

    float snoise(vec2 v){
      const vec4 C = vec4(0.211324865405187, 0.366025403784439,
                         -0.577350269189626, 0.024390243902439);
      vec2 i  = floor(v + dot(v, C.yy));
      vec2 x0 = v - i + dot(i, C.xx);
      vec2 i1 = (x0.x > x0.y) ? vec2(1.0,0.0) : vec2(0.0,1.0);
      vec4 x12 = x0.xyxy + C.xxzz;
      x12.xy -= i1;
      i = mod289(i);
      vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
                              + i.x + vec3(0.0, i1.x, 1.0));
      vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
      m = m*m; m = m*m;
      vec3 x = 2.0 * fract(p * C.www) - 1.0;
      vec3 h = abs(x) - 0.5;
      vec3 ox = floor(x + 0.5);
      vec3 a0 = x - ox;
      m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
      vec3 g;
      g.x  = a0.x  * x0.x  + h.x  * x0.y;
      g.yz = a0.yz * x12.xz + h.yz * x12.yw;
      return 130.0 * dot(m, g);
    }

    // Octave fbm for richer surface
    float fbm(vec2 p) {
      float v = 0.0;
      float a = 0.5;
      for (int i = 0; i < 4; i++) {
        v += a * snoise(p);
        p *= 2.0;
        a *= 0.5;
      }
      return v;
    }

    void main() {
      vec2 uv = (gl_FragCoord.xy - 0.5 * u_res) / min(u_res.x, u_res.y);
      float t = u_time * u_speed * 0.3;

      // Surface height via fbm
      float h = fbm(uv * 2.0 + vec2(t, t * 0.7)) * u_distortion;

      // Surface normal via gradient (finite differences)
      float eps = 0.01;
      float hx = fbm((uv + vec2(eps,0.0)) * 2.0 + vec2(t, t*0.7)) * u_distortion;
      float hy = fbm((uv + vec2(0.0,eps)) * 2.0 + vec2(t, t*0.7)) * u_distortion;
      vec3 normal = normalize(vec3((h - hx)/eps, (h - hy)/eps, 1.0));

      // Light direction
      float angle = radians(u_light_angle);
      vec3 lightDir = normalize(vec3(cos(angle), sin(angle), 0.6));

      // Specular metal reflection
      float diffuse = max(dot(normal, lightDir), 0.0);
      vec3 viewDir = vec3(0.0, 0.0, 1.0);
      vec3 reflectDir = reflect(-lightDir, normal);
      float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);

      // Iridescence factor (used by gold/iridescent presets)
      float irid = 0.5 + 0.5 * sin(h * 8.0 + t * 2.0);

      // Mix three colour stops based on diffuse + iridescence
      vec3 base = mix(u_color_a, u_color_b, diffuse);
      base = mix(base, u_color_c, irid * 0.5);

      // Metal gloss : add specular highlight
      vec3 finalColor = base + vec3(spec * 1.2);

      // Vignette subtle
      float vig = 1.0 - 0.4 * length(uv);
      finalColor *= vig;

      gl_FragColor = vec4(finalColor, 1.0);
    }
  `;

  // === Compile + link program ===
  function compile(type, src) {
    const sh = gl.createShader(type);
    gl.shaderSource(sh, src);
    gl.compileShader(sh);
    if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
      console.error('Shader compile error:', gl.getShaderInfoLog(sh));
      gl.deleteShader(sh);
      return null;
    }
    return sh;
  }

  const vs = compile(gl.VERTEX_SHADER, VS);
  const fs = compile(gl.FRAGMENT_SHADER, FS);
  if (!vs || !fs) return;

  const prog = gl.createProgram();
  gl.attachShader(prog, vs);
  gl.attachShader(prog, fs);
  gl.linkProgram(prog);
  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
    console.error('Program link error:', gl.getProgramInfoLog(prog));
    return;
  }
  gl.useProgram(prog);

  // === Fullscreen quad ===
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
  const aPos = gl.getAttribLocation(prog, 'a_pos');
  gl.enableVertexAttribArray(aPos);
  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

  // === Uniforms ===
  const uRes = gl.getUniformLocation(prog, 'u_res');
  const uTime = gl.getUniformLocation(prog, 'u_time');
  const uSpeed = gl.getUniformLocation(prog, 'u_speed');
  const uDist = gl.getUniformLocation(prog, 'u_distortion');
  const uLight = gl.getUniformLocation(prog, 'u_light_angle');
  const uColA = gl.getUniformLocation(prog, 'u_color_a');
  const uColB = gl.getUniformLocation(prog, 'u_color_b');
  const uColC = gl.getUniformLocation(prog, 'u_color_c');

  // === Color presets ===
  const PALETTES = {
    silver:     { a: [0.10, 0.11, 0.13], b: [0.85, 0.88, 0.92], c: [0.55, 0.60, 0.70] },
    gold:       { a: [0.20, 0.13, 0.05], b: [0.95, 0.78, 0.30], c: [0.70, 0.45, 0.15] },
    iridescent: { a: [0.10, 0.05, 0.20], b: [0.30, 0.85, 0.95], c: [0.95, 0.40, 0.85] }
  };

  function syncCanvasSize() {
    const rect = canvas.parentElement.getBoundingClientRect();
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = Math.round(rect.width * dpr);
    canvas.height = Math.round(rect.height * dpr);
    canvas.style.width = rect.width + 'px';
    canvas.style.height = rect.height + 'px';
    gl.viewport(0, 0, canvas.width, canvas.height);
  }
  syncCanvasSize();
  window.addEventListener('resize', syncCanvasSize);

  // === Pause when offscreen (perf) ===
  let visible = true;
  if ('IntersectionObserver' in window) {
    new IntersectionObserver((entries) => {
      entries.forEach(e => visible = e.isIntersecting);
    }, { threshold: 0.01 }).observe(canvas);
  }

  // === Render loop ===
  const start = performance.now();
  function render() {
    if (visible) {
      const t = (performance.now() - start) / 1000;
      const pal = PALETTES[settings.color] || PALETTES.silver;
      gl.uniform2f(uRes, canvas.width, canvas.height);
      gl.uniform1f(uTime, t);
      gl.uniform1f(uSpeed, settings.speed);
      gl.uniform1f(uDist, settings.distortion);
      gl.uniform1f(uLight, settings.lightAngle);
      gl.uniform3fv(uColA, pal.a);
      gl.uniform3fv(uColB, pal.b);
      gl.uniform3fv(uColC, pal.c);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }
    requestAnimationFrame(render);
  }
  render();
  } // fin initMetal

  var el = document.getElementById('psLiquidMetal');
  if (el) initMetal(el);
})();