Header menu via header.js

frontend/public/assets/bubbles.js

@@ -0,0 +1,74 @@
+// === SuperSunday moving bubbles (canvas) — robust autoload ===
+(function(){
+  function ensureCanvas(){
+    let layer = document.getElementById('bubble-layer');
+    if (!layer) {
+      layer = document.createElement('canvas');
+      layer.id = 'bubble-layer';
+      document.body.appendChild(layer);
+    }
+    return layer;
+  }
+
+  const c = ensureCanvas();
+  const ctx = c.getContext('2d', { alpha: true });
+
+  function resize(){
+    c.width = window.innerWidth;
+    c.height = window.innerHeight;
+  }
+  resize();
+  window.addEventListener('resize', resize);
+
+  const COLORS = [
+    {from:'#1f2a6d', to:'#5b39a8'},
+    {from:'#1a255d', to:'#3e2a7a'},
+    {from:'#233278', to:'#7a42c4'},
+  ];
+  const BUBBLES = [];
+  const N = Math.min(24, Math.max(12, Math.floor((window.innerWidth*window.innerHeight)/120000)));
+  function rand(a,b){ return a + Math.random()*(b-a); }
+
+  function makeBubble(){
+    const r = rand(30, 120);
+    const x = rand(-0.1*c.width, 1.1*c.width);
+    const y = rand(-0.1*c.height, 1.1*c.height);
+    const vy = rand(0.05, 0.2) * (Math.random()<0.5? 1 : -1);
+    const vx = rand(-0.08, 0.08);
+    const col = COLORS[Math.floor(Math.random()*COLORS.length)];
+    const opacity = rand(0.08, 0.22);
+    return {x,y,r,vx,vy,col,opacity, phase: rand(0, Math.PI*2)};
+  }
+  for(let i=0;i<N;i++) BUBBLES.push(makeBubble());
+
+  function tick(){
+    ctx.clearRect(0,0,c.width,c.height);
+    for(const b of BUBBLES){
+      b.phase += 0.01 + (b.r/1200);
+      const sway = Math.sin(b.phase) * 0.3;
+      b.x += b.vx + sway;
+      b.y += b.vy;
+      if (b.x < -200 || b.x > c.width+200 || b.y < -200 || b.y > c.height+200) {
+        const idx = BUBBLES.indexOf(b);
+        BUBBLES[idx] = makeBubble();
+        continue;
+      }
+      const g = ctx.createRadialGradient(b.x, b.y, b.r*0.1, b.x, b.y, b.r);
+      g.addColorStop(0, hexA(b.col.to, b.opacity*1.0));
+      g.addColorStop(1, hexA(b.col.from, 0));
+      ctx.fillStyle = g;
+      ctx.beginPath();
+      ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
+      ctx.fill();
+    }
+    requestAnimationFrame(tick);
+  }
+  function hexA(hex, a){
+    const h = hex.replace('#','');
+    const r = parseInt(h.substring(0,2),16);
+    const g = parseInt(h.substring(2,4),16);
+    const b = parseInt(h.substring(4,6),16);
+    return `rgba(${r},${g},${b},${a})`;
+  }
+  requestAnimationFrame(tick);
+})();