--

public/assets/js/script-extra.js

@@ -3,42 +3,32 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    const LAYERS = 8;
+    const STRIPS = 24;
     const MAX_BLUR = 16;
-    const configs = Array.from({ length: LAYERS }, (_, i) => {
-        const t = i / (LAYERS - 1);
-        const blur = MAX_BLUR * Math.pow(t, 2);
-        const from = (i / LAYERS) * 100;
-        const to   = ((i + 1) / LAYERS) * 100;
-        const mid  = (from + to) / 2;
-        return { blur, from, to, mid };
-    });
 
-    const root = document.createElement('div');
-    root.className = 'header-blur';
-    root.setAttribute('aria-hidden', 'true');
+    const container = document.createElement('div');
+    container.className = 'header-blur';
+    container.setAttribute('aria-hidden', 'true');
 
-    for (const cfg of configs) {
-        const layer = document.createElement('div');
-        layer.className = 'blur-layer';
-        layer.style.setProperty('--blur', cfg.blur.toFixed(2) + 'px');
-        const fadeHalf = (cfg.to - cfg.from);
-        const a = Math.max(0, cfg.from - fadeHalf);
-        const b = cfg.from;
-        const c = cfg.to;
-        const d = Math.min(100, cfg.to + fadeHalf);
-        layer.style.setProperty(
-            '--mask',
-            `linear-gradient(to top,
-                transparent ${a}%,
-                black ${b}%,
-                black ${c}%,
-                transparent ${d}%)`
-        );
-        root.appendChild(layer);
+    for (let i = 0; i < STRIPS; i++) {
+        const strength = 1 - i / (STRIPS - 1);
+        const blur = MAX_BLUR * Math.pow(strength, 1.6);
+        const strip = document.createElement('div');
+        strip.className = 'blur-strip';
+        strip.style.setProperty('--blur', blur.toFixed(2) + 'px');
+        strip.style.top = (i * 100 / STRIPS) + '%';
+        strip.style.height = (100 / STRIPS) + '%';
+        container.appendChild(strip);
     }
 
-    header.prepend(root);
+    header.parentNode.insertBefore(container, header);
+
+    const sync = () => {
+        container.style.height = header.getBoundingClientRect().height + 'px';
+    };
+    sync();
+    if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
+    else window.addEventListener('resize', sync);
 })();
 
 /* View Transition */