24-3: signature balance component — implemented, QA Review

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-31 18:44:10 +02:00
parent 8b2c35f76f
commit d8b27a15e8
8 changed files with 224 additions and 3 deletions
@@ -1,7 +1,8 @@
 import * as reveal from './site/reveal.js';
 import * as progress from './site/progress.js';
+import * as balance from './site/balance.js';

-const modules = [reveal, progress];
+const modules = [reveal, progress, balance];

 document.addEventListener('livewire:navigated', () => {
    document.body.classList.add('js');
@@ -0,0 +1,153 @@
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+
+let uid = 0;
+let cleanups = [];
+let frames = new Set();
+
+function build(svg) {
+    const i = ++uid;
+    svg.innerHTML = `<defs>
+    <linearGradient id="gd${i}" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F6EAD0"/><stop offset=".42" stop-color="#C9AD84"/><stop offset=".72" stop-color="#A68966"/><stop offset="1" stop-color="#6A5640"/></linearGradient>
+    <linearGradient id="gc${i}" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#6A5640"/><stop offset=".32" stop-color="#EBD9B4"/><stop offset=".55" stop-color="#B89A72"/><stop offset="1" stop-color="#5E4C37"/></linearGradient>
+    <linearGradient id="gb${i}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#F6EAD0"/><stop offset=".35" stop-color="#C4A882"/><stop offset="1" stop-color="#5E4C37"/></linearGradient>
+    <radialGradient id="gh${i}" cx=".35" cy=".3" r=".8"><stop offset="0" stop-color="#FFF6E2"/><stop offset=".5" stop-color="#C4A882"/><stop offset="1" stop-color="#6A5640"/></radialGradient>
+    <filter id="sh${i}" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="8" stdDeviation="7" flood-color="#0d1009" flood-opacity=".45"/></filter>
+    <filter id="bl${i}"><feGaussianBlur stdDeviation="6"/></filter>
+  </defs>
+  <ellipse cx="200" cy="358" rx="120" ry="9" fill="#0d1009" opacity=".55" filter="url(#bl${i})"/>
+  <g filter="url(#sh${i})">
+    <path d="M104 356 H296 L282 336 H118 Z" fill="url(#gc${i})"/><path d="M104 356 H296" stroke="#F6EAD0" stroke-opacity=".5"/>
+    <path d="M138 336 H262 L252 320 H148 Z" fill="url(#gc${i})"/>
+    <rect x="182" y="300" width="36" height="20" rx="4" fill="url(#gc${i})"/>
+    <rect x="191" y="118" width="18" height="184" fill="url(#gc${i})"/>
+    <path d="M196 124 V298" stroke="#FFF6E2" stroke-opacity=".55" stroke-width="1.4"/>
+    <rect x="184" y="128" width="32" height="9" rx="3" fill="url(#gc${i})"/>
+    <path d="M200 92 C186 80 184 64 194 52 C202 64 204 78 200 92Z M200 92 C214 80 216 64 206 52 C198 64 196 78 200 92Z" fill="url(#gd${i})"/>
+    <path d="M200 92 V60" stroke="#6A5640" stroke-width="1.2"/>
+    <g class="beam"><path d="M58 104 Q200 92 342 104 L342 114 Q200 104 58 114 Z" fill="url(#gb${i})"/>
+      <circle cx="58" cy="109" r="7" fill="url(#gh${i})"/><circle cx="342" cy="109" r="7" fill="url(#gh${i})"/></g>
+    <circle cx="200" cy="110" r="16" fill="url(#gh${i})"/><circle cx="200" cy="110" r="6" fill="#5E4C37"/><circle cx="198" cy="108" r="2" fill="#FFF6E2" opacity=".8"/>
+    ${[0,1].map(k=>`<g class="pan pan${k}">
+      <path d="M0 0 L-54 118 M0 0 L54 118 M0 0 L0 120" stroke="#C4A882" stroke-width="1.5" stroke-linecap="round"/>
+      <circle cx="0" cy="0" r="4.5" fill="url(#gh${i})"/>
+      <path d="M-66 118 Q0 182 66 118 Z" fill="url(#gd${i})"/>
+      <path d="M-56 132 Q0 166 40 140" stroke="#FFF6E2" stroke-opacity=".45" stroke-width="2" fill="none" stroke-linecap="round"/>
+      <ellipse cx="0" cy="118" rx="66" ry="7" fill="#EBD9B4" stroke="#8A7555" stroke-width="1"/></g>`).join('')}
+  </g>`;
+    const beam = svg.querySelector('.beam');
+    const pans = svg.querySelectorAll('.pan');
+
+    return function tilt(deg) {
+        const r = deg * Math.PI / 180;
+        const c = Math.cos(r) * 142;
+        const s = Math.sin(r) * 142;
+        beam.setAttribute('transform', `rotate(${deg} 200 110)`);
+        pans[0].setAttribute('transform', `translate(${200 - c} ${110 - s})`);
+        pans[1].setAttribute('transform', `translate(${200 + c} ${110 + s})`);
+    };
+}
+
+/* a damped spring, so the beam swings and settles like real brass */
+function spring(tilt, start) {
+    const st = { a: start, v: 0, target: 0 };
+    let raf = 0;
+
+    const step = () => {
+        frames.delete(raf);
+        st.v += (st.target - st.a) * 0.028;
+        st.v *= 0.935;
+        st.a += st.v;
+        tilt(st.a);
+        if (Math.abs(st.v) > 0.002 || Math.abs(st.target - st.a) > 0.01) {
+            raf = requestAnimationFrame(step);
+            frames.add(raf);
+        } else {
+            raf = 0;
+        }
+    };
+
+    return {
+        set(target) {
+            st.target = target;
+            if (!raf) {
+                raf = requestAnimationFrame(step);
+                frames.add(raf);
+            }
+        },
+    };
+}
+
+function on(target, type, handler, options) {
+    target.addEventListener(type, handler, options);
+    cleanups.push(() => target.removeEventListener(type, handler, options));
+}
+
+function hero(svg, tilt) {
+    tilt(14);
+    const sp = spring(tilt, 14);
+    const timer = setTimeout(() => sp.set(0), 450);
+    cleanups.push(() => clearTimeout(timer));
+
+    const frame = svg.closest('.frame');
+    if (!frame || !matchMedia('(pointer:fine)').matches) return;
+
+    const glow = frame.querySelector('.glow');
+    const img = frame.querySelector('img');
+
+    on(frame, 'pointermove', (e) => {
+        const fr = frame.getBoundingClientRect();
+        const x = (e.clientX - fr.left) / fr.width;
+        sp.set(clamp((x - 0.5) * 2.4, -1, 1) * 9);
+        if (glow) {
+            glow.style.left = (e.clientX - fr.left) + 'px';
+            glow.style.top = (e.clientY - fr.top) + 'px';
+        }
+        if (img) {
+            img.style.transform = `scale(1.08) translate(${(e.clientX - fr.left - fr.width / 2) / -40}px, ${(e.clientY - fr.top - fr.height / 2) / -40}px)`;
+        }
+    });
+
+    on(frame, 'pointerleave', () => {
+        sp.set(0);
+        if (img) img.style.transform = '';
+    });
+}
+
+function finale(tilt) {
+    tilt(-12);
+    const sp = spring(tilt, -12);
+
+    const onScroll = () => {
+        const max = document.documentElement.scrollHeight - window.innerHeight;
+        const p = max > 0 ? window.scrollY / max : 1;
+        const q = clamp((p - 0.7) / 0.25, 0, 1);
+        sp.set(-12 * (1 - q));
+    };
+
+    on(window, 'scroll', onScroll, { passive: true });
+    onScroll();
+}
+
+export function init() {
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    document.querySelectorAll('svg[data-balance]').forEach((svg) => {
+        const tilt = build(svg);
+        const mode = svg.dataset.balance;
+
+        if (reduced || mode === 'static') {
+            tilt(0);
+        } else if (mode === 'hero') {
+            hero(svg, tilt);
+        } else if (mode === 'finale') {
+            finale(tilt);
+        }
+    });
+}
+
+export function destroy() {
+    cleanups.forEach((fn) => fn());
+    cleanups = [];
+    frames.forEach((id) => cancelAnimationFrame(id));
+    frames.clear();
+}