feat(effects): polish 8 effects and add 7 new engines with parallax

Synthwave, fireflies, snow, sakura, nebula: CSS/SVG. Matrix and
constellation: canvas. Existing engines gain depth, color, glow, and
parallax (mouse and device tilt, opt-in on iOS)

src/utils/canvasEffects.js

@@ -0,0 +1,131 @@
+import {LOGO_COLORS} from '../components/Logo.jsx';
+
+// The drawers of the canvas page and banner backgrounds (components/EffectCanvas.jsx). Plain objects with no canvas
+// or DOM, so the logic is testable; sizes are css px. `create` fills the first frame, which is also the static picture.
+
+/** mulberry32: the same seed gives the same sequence, so the static picture is the same on every visit. */
+export const seededRandom = (seed) => () => {
+    seed = (seed + 0x6D2B79F5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+/** Colors of the element's own skin and accent (a public profile sets them on a wrapper), logo hex as fallback. */
+export function readPalette(element) {
+    const style = getComputedStyle(element);
+    const read = (name, fallback) => style.getPropertyValue(name).trim() || fallback;
+    return {
+        primary: read('--primary', LOGO_COLORS[0][1]),
+        foreground: read('--foreground', '#fafafa'),
+        logo: LOGO_COLORS.map(([name, hex]) => read(name, hex)),
+    };
+}
+
+// Half-width katakana and digits.
+const GLYPHS = Array.from({length: 56}, (_, i) => (i < 46 ? String.fromCharCode(0xFF66 + i) : String(i - 46)));
+const TRAIL = 14;
+const glyph = (random) => GLYPHS[Math.floor(random() * GLYPHS.length)];
+
+const matrix = {
+    fps: 20,
+    create(width, height, random) {
+        const gap = height < 360 ? 12 : 16;
+        const rows = Math.ceil(height / gap);
+        const columns = Array.from({length: Math.floor(width / gap)}, () => ({
+            head: random() * (rows + TRAIL),
+            speed: 6 + random() * 8,
+            glyphs: Array.from({length: rows}, () => glyph(random)),
+        }));
+        return {gap, rows, columns};
+    },
+    step(state, seconds, random) {
+        for (const column of state.columns) {
+            column.head += column.speed * seconds;
+            if (column.head - TRAIL > state.rows) column.head = -random() * 8;
+            for (let n = 0; n < 2 + Math.floor(random() * 2); n++) {
+                column.glyphs[Math.floor(random() * state.rows)] = glyph(random);
+            }
+        }
+    },
+    draw(context, state, palette) {
+        const {gap, rows, columns} = state;
+        context.clearRect(0, 0, columns.length * gap + gap, rows * gap + gap);
+        context.font = `${gap}px ui-monospace, monospace`;
+        context.textBaseline = 'top';
+        columns.forEach((column, index) => {
+            const head = Math.floor(column.head);
+            const trail = index % 6 === 5 ? palette.logo[2] : palette.primary;
+            for (let k = 0; k < TRAIL; k++) {
+                const row = head - k;
+                if (row < 0 || row >= rows) continue;
+                context.globalAlpha = k === 0 ? 0.9 : (1 - k / TRAIL) * 0.55;
+                context.fillStyle = k === 0 ? palette.foreground : trail;
+                context.fillText(column.glyphs[row], index * gap, row * gap);
+            }
+        });
+        context.globalAlpha = 1;
+    },
+};
+
+const LINK = 110;
+const TIERS = [{r: 1, speed: 6, alpha: 0.35}, {r: 1.6, speed: 12, alpha: 0.6}, {r: 2.4, speed: 20, alpha: 0.9}];
+
+const constellation = {
+    fps: 30,
+    create(width, height, random) {
+        const count = Math.min(80, Math.max(18, Math.round((width * height) / 16000)));
+        const points = Array.from({length: count}, (_, i) => {
+            const tier = TIERS[i % 3];
+            const angle = random() * Math.PI * 2;
+            return {
+                x: random() * width, y: random() * height,
+                vx: Math.cos(angle) * tier.speed, vy: Math.sin(angle) * tier.speed,
+                tier, color: i % 4, twinkle: i % 5 === 4, phase: random() * Math.PI * 2,
+            };
+        });
+        return {width, height, points, t: 0};
+    },
+    step(state, seconds) {
+        state.t += seconds;
+        for (const p of state.points) {
+            p.x = (p.x + p.vx * seconds + state.width) % state.width;
+            p.y = (p.y + p.vy * seconds + state.height) % state.height;
+        }
+    },
+    draw(context, state, palette) {
+        const {points, width, height, t} = state;
+        context.clearRect(0, 0, width, height);
+        context.strokeStyle = palette.primary;
+        context.lineWidth = 1;
+        for (let i = 0; i < points.length; i++) {
+            for (let j = i + 1; j < points.length; j++) {
+                const d = Math.hypot(points[i].x - points[j].x, points[i].y - points[j].y);
+                if (d >= LINK) continue;
+                context.globalAlpha = (1 - d / LINK) * 0.35;
+                context.beginPath();
+                context.moveTo(points[i].x, points[i].y);
+                context.lineTo(points[j].x, points[j].y);
+                context.stroke();
+            }
+        }
+        const colors = [palette.logo[0], palette.logo[1], palette.logo[2], palette.primary];
+        for (const p of points) {
+            const alpha = p.tier.alpha * (p.twinkle ? 0.6 + 0.4 * Math.sin(t * 2 + p.phase) : 1);
+            context.fillStyle = colors[p.color];
+            if (p.tier.r > 2) {
+                context.globalAlpha = 0.15;
+                context.beginPath();
+                context.arc(p.x, p.y, p.tier.r * 3, 0, Math.PI * 2);
+                context.fill();
+            }
+            context.globalAlpha = alpha;
+            context.beginPath();
+            context.arc(p.x, p.y, p.tier.r, 0, Math.PI * 2);
+            context.fill();
+        }
+        context.globalAlpha = 1;
+    },
+};
+
+export const CANVAS_EFFECTS = {matrix, constellation};