libra/resources/js/site/balance.js

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();
}