/* Weigh your words A two-pan balance drawn in hairlines, and six short words set in six weights of one variable typeface: the blacker a word, the more it weighs (its weight is its font-weight). Click a word and it flies onto the lighter pan, drag it onto either one, click it again to send it back. The beam is a real damped pendulum: it leans as far as the difference asks, swings and settles with a small overshoot, and each pan hangs from the beam as a pendulum of its own. When the two sides are even the needle stops on zero and lights up. */ /* ---- valori da cambiare ---- */ const WORDS = ['lead', 'stone', 'paper', 'silk', 'bread', 'salt']; /* the words on the tray (up to 8) */ const WEIGHTS = [900, 700, 300, 200, 500, 400]; /* the type weight of each word, 100 to 900: it is also what it weighs */ const SWING = 1.3; /* seconds for one swing of the empty beam: loaded, it swings slower, like a real one */ const SETTLE = 0.6; /* how soon a swing dies down: 0.2 swings for long, 1 settles with no overshoot at all */ const TILT = 2.6; /* degrees the beam leans for every 100 of difference between the two sides */ const STOP = 15; /* degrees at which the beam rests on its stop */ const FLIGHT = 0.72; /* seconds a word takes to fly onto a pan */ const KNOCK = 1; /* how hard a landing word knocks its pan down (0 = it is laid down gently) */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const HOVER = matchMedia('(hover: hover)').matches; const stage = document.querySelector('[data-stage]'); const tray = document.querySelector('[data-tray]'); const hintEl = document.querySelector('[data-hint]'); const readLabel = document.querySelector('[data-read-label]'); const readEl = document.querySelector('[data-read]'); const el = (s) => document.querySelector(s); const svg = { guide: el('[data-guide]'), base: el('[data-base]'), post: el('[data-post]'), ticks: el('[data-ticks]'), zero: el('[data-zero]'), needle: el('[data-needle]'), knife: el('[data-knife]'), beam: el('[data-beam]'), strings: [el('[data-strings-l]'), el('[data-strings-r]')], pans: [el('[data-pan-l]'), el('[data-pan-r]')], }; const totalEls = [el('[data-total-l]'), el('[data-total-r]')]; if (!HOVER) hintEl.textContent = 'Tap a word to weigh it, or drag it onto a pan.'; const PI = Math.PI; const STEP = 1 / 240; /* the physics step, in seconds */ const GRAVITY = 2600; /* pixels per second squared, for the pans swinging on their strings */ const PILE = 4; /* words a pan can hold */ const I0 = 30; /* the inertia of the empty beam and pans, in hundreds of weight */ const SENS = 1 / Math.tan((Math.max(0.3, TILT) * PI) / 180); const OMEGA = (2 * PI) / Math.max(0.4, SWING); const K = (OMEGA * OMEGA * I0) / SENS; const MAXT = (Math.max(3, Math.min(40, STOP)) * PI) / 180; const clampN = (v, a, b) => Math.max(a, Math.min(b, v)); const fmt = (n) => String(Math.round(n)); /* ------------------------------------------------------------------ the pieces */ const L = { W: 0, H: 0, px: 0, py: 0, a: 0, l: 0, pw: 0, d: 0, by: 0, bw: 0, ln: 0, fs: 28, rowH: 0 }; const beam = { th: -0.11, w: 0, held: true, sleep: true, acc: 0 }; const pans = [0, 1].map((i) => ({ i, sign: i ? 1 : -1, psi: 0, w: 0, pile: [], m: 0, sum: 0, flex: 0, hi: 0, shown: 0, ex: 0, ey: 0, vx: 0, vy: 0, init: false, qx: 0, qy: 0, ang: 0 })); const rv = REDUCED ? { base: 1, post: 1, knife: 1, beam: 1, guide: 1, ticks: 1, needle: 1, strings: 1, pans: 1, all: 0 } : { base: 0, post: 0, knife: 0, beam: 0, guide: 0, ticks: 0, needle: 0, strings: 0, pans: 0, all: 1 }; const ev = { v: 0, on: false }; let colors = { ink: '#141414', accent: '#e5391c' }; let drag = null; let down = null; let dragEnded = -1; let ready = false; const list = WORDS.slice(0, 8).map((t, k) => ({ text: String(t || '').trim().slice(0, 14) || 'word', wt: clampN(Math.round(+WEIGHTS[k] || 400), 100, 900) })); const words = list.map((d, k) => { const b = document.createElement('button'); b.type = 'button'; b.className = 'word'; b.setAttribute('data-autoclic', ''); b.style.fontWeight = d.wt; b.setAttribute('aria-label', `${d.text}, weight ${d.wt}. Put it on the scale.`); const ink = document.createElement('span'); ink.className = 'word__ink'; ink.textContent = d.text; b.appendChild(ink); tray.appendChild(b); const slot = document.createElement('span'); slot.className = 'slot'; slot.textContent = d.wt; slot.setAttribute('aria-hidden', 'true'); tray.appendChild(slot); return { k, text: d.text, wt: d.wt, m: d.wt / 100, el: b, ink, slot, state: 'tray', side: -1, landed: false, x: 0, y: 0, rot: 0, sy: 0, syT: 0, hgt: 0, w: 0, base: 0, asc: 0, desc: 0, inkW: 0, slotX: 0, slotY: 0, lift: 0, enter: REDUCED ? 1 : 0, fly: null, dvx: 0, dvy: 0, }; }); /* ------------------------------------------------------------------ measures */ function layout() { const W = innerWidth; const H = innerHeight; const phone = W < 560; L.W = W; L.H = H; L.px = W / 2; L.py = H * 0.34; L.a = Math.min(W * 0.36, 300, H * 0.38, (W / 2 - 18) / 1.52); L.l = H * (phone ? 0.22 : 0.26); L.pw = Math.min(L.a * 0.52, 112); L.d = Math.max(4, L.pw * 0.05); L.by = H * 0.68; L.bw = L.a * 0.32; L.ln = Math.min(H * 0.13, 108); L.fs = phone ? 20 : clampN(W * 0.024, 22, 34); measure(); const widest = Math.max(...words.map((w) => w.inkW)); if (widest > L.pw * 1.6) { L.fs = Math.max(12, (L.fs * L.pw * 1.6) / widest); measure(); } layoutTray(); pans.forEach(restack); pans.forEach((p) => p.pile.forEach((w) => { if (w.landed) w.sy = w.syT; })); } function measure() { stage.style.setProperty('--size', L.fs + 'px'); const cv = document.createElement('canvas').getContext('2d'); words.forEach((w) => { w.w = w.el.offsetWidth; w.inkW = w.ink.offsetWidth; const probe = document.createElement('i'); probe.style.cssText = 'display:inline-block;width:0;height:0;vertical-align:baseline'; w.el.appendChild(probe); w.base = probe.offsetTop; probe.remove(); cv.font = `${w.wt} ${L.fs}px "Roboto Flex Variable", system-ui, sans-serif`; const mt = cv.measureText(w.text); w.asc = mt.actualBoundingBoxAscent || L.fs * 0.72; w.desc = mt.actualBoundingBoxDescent || 0; w.hgt = w.asc + w.desc + L.fs * 0.07; w.el.style.transformOrigin = `${w.w / 2}px ${w.base}px`; }); } function layoutTray() { const gap = L.fs * 0.95; const max = L.W - (L.W < 560 ? 32 : 120); const rows = []; let row = []; let rw = 0; words.forEach((w) => { if (row.length && rw + gap + w.inkW > max) { rows.push(row); row = []; rw = 0; } rw += (row.length ? gap : 0) + w.inkW; row.push(w); }); if (row.length) rows.push(row); L.rowH = L.fs * 2.15; const y0 = Math.min(L.H * 0.835, L.H - 70 - (rows.length - 1) * L.rowH); rows.forEach((r, ri) => { const total = r.reduce((s, w) => s + w.inkW, 0) + gap * (r.length - 1); let x = L.W / 2 - total / 2; r.forEach((w) => { w.slotX = x + w.inkW / 2; w.slotY = y0 + ri * L.rowH; x += w.inkW + gap; const sw = w.slot.offsetWidth; w.slot.style.transform = `translate(${w.slotX - sw / 2}px, ${w.slotY + L.fs * 0.3 + 9}px)`; }); }); } /* ------------------------------------------------------------------ geometry */ function frame(p) { const c = Math.cos(beam.th); const s = Math.sin(beam.th); const ex = L.px + p.sign * L.a * c; const ey = L.py + p.sign * L.a * s; p.qx = ex - L.l * Math.sin(p.psi); p.qy = ey + L.l * Math.cos(p.psi); p.ang = p.psi; return [ex, ey]; } /* a point in the frame of a pan (origin at the bottom of the pan, y up), in the page */ function onPan(p, ux, up) { const c = Math.cos(p.ang); const s = Math.sin(p.ang); return [p.qx + ux * c + up * s, p.qy + ux * s - up * c]; } function panTarget(w, p) { return onPan(p, 0, w.syT + w.desc + 1 - p.flex - w.lift); } /* ------------------------------------------------------------------ the pans: what they hold */ function restack(p, delay) { let acc = 0; p.pile.forEach((w) => { const before = w.syT; w.syT = acc; acc += w.hgt; if (w.landed && w.state === 'pan' && Math.abs(before - w.syT) > 0.5 && ready && !REDUCED) { /* the words above one taken away drop onto the one below, and settle */ gsap.killTweensOf(w, 'sy'); gsap.timeline({ delay: delay || 0 }) .to(w, { sy: w.syT, duration: 0.24, ease: 'power2.in' }) .add(() => squash(w, 0.5)); } else if (w.state === 'pan') { w.sy = w.syT; } }); } function recount(p) { const landed = p.pile.filter((w) => w.landed); p.m = landed.reduce((s, w) => s + w.m, 0); p.sum = landed.reduce((s, w) => s + w.wt, 0); gsap.to(p, { shown: p.sum, duration: REDUCED ? 0 : 0.6, ease: 'power2.out', overwrite: 'auto', onUpdate: () => { totalEls[p.i].textContent = fmt(p.shown); } }); if (REDUCED) beam.th = equilibrium(); wake(); updateRead(); } function equilibrium() { return clampN(Math.atan((pans[1].m - pans[0].m) / SENS), -MAXT, MAXT); } function wake() { if (!beam.held) beam.sleep = false; } function reserved(p) { return p.pile.reduce((s, w) => s + w.wt, 0); } /* ------------------------------------------------------------------ the physics */ function step(h) { const mL = pans[0].m; const mR = pans[1].m; const I = I0 + mL + mR; const om = Math.sqrt((K * SENS) / I); const acc = (K * ((mR - mL) * Math.cos(beam.th) - SENS * Math.sin(beam.th))) / I - 2 * SETTLE * om * beam.w; beam.w += acc * h; beam.th += beam.w * h; if (beam.th > MAXT || beam.th < -MAXT) { const sg = Math.sign(beam.th); beam.th = sg * MAXT; if (beam.w * sg > 0) beam.w = -beam.w * 0.28; } pans.forEach((p) => { const [ex, ey] = frame(p); if (!p.init) { p.ex = ex; p.ey = ey; p.vx = 0; p.vy = 0; p.init = true; } const vx = (ex - p.ex) / h; const vy = (ey - p.ey) / h; const ax = (vx - p.vx) / h; const ay = (vy - p.vy) / h; p.ex = ex; p.ey = ey; p.vx = vx; p.vy = vy; const omp = Math.sqrt(GRAVITY / L.l); const a = (ax * Math.cos(p.psi) - (GRAVITY - ay) * Math.sin(p.psi)) / L.l - 2 * 0.2 * omp * p.w; p.w += a * h; p.psi = clampN(p.psi + p.w * h, -0.35, 0.35); }); } function settleCheck() { const eq = equilibrium(); const still = Math.abs(beam.th - eq) < 3e-4 && Math.abs(beam.w) < 2e-3 && pans.every((p) => Math.abs(p.psi) < 6e-4 && Math.abs(p.w) < 6e-3); if (!still) return; beam.th = eq; beam.w = 0; pans.forEach((p) => { p.psi = 0; p.w = 0; p.init = false; }); beam.sleep = true; } /* ------------------------------------------------------------------ even: the needle on zero lights up */ function checkEven() { const even = pans[0].sum === pans[1].sum && pans[0].sum > 0 && Math.abs(beam.th) < 0.0035 && Math.abs(beam.w) < 0.012 && !beam.held; if (even === ev.on) return; ev.on = even; gsap.to(ev, { v: even ? 1 : 0, duration: even ? 0.55 : 0.2, ease: even ? 'back.out(2.2)' : 'power2.out', overwrite: true }); updateRead(); } let lastRead = ''; function updateRead() { const d = pans[1].sum - pans[0].sum; let label = 'Scale'; let value = 'Empty'; if (pans[0].sum + pans[1].sum > 0) { if (d === 0) value = 'Even'; else { label = d > 0 ? 'Right' : 'Left'; value = '+' + Math.abs(d); } } const key = label + value + ev.on; if (key === lastRead) return; const changed = readEl.textContent !== value; lastRead = key; readLabel.textContent = label; readEl.textContent = value; readEl.style.color = ev.on ? colors.accent : ''; if (changed && ready && !REDUCED) gsap.fromTo(readEl, { yPercent: 70, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.42, ease: 'back.out(1.7)', overwrite: true }); } /* ------------------------------------------------------------------ the words: squash, fly, land */ function squash(w, amount) { if (REDUCED) return; const a = clampN(amount, 0, 1); gsap.timeline({ defaults: { overwrite: 'auto' } }) .to(w.ink, { scaleY: 1 - 0.16 * a, scaleX: 1 + 0.08 * a, '--wd': 100 + 22 * a, duration: 0.07, ease: 'power2.out' }) .to(w.ink, { scaleY: 1, scaleX: 1, '--wd': 100, duration: 0.7, ease: 'elastic.out(1, 0.42)' }); } function refuse(w) { if (REDUCED) return; gsap.to(w, { keyframes: [{ lift: -5, duration: 0.12, ease: 'power2.out' }, { lift: 0, duration: 0.5, ease: 'elastic.out(1, 0.35)' }] }); } function choosePan() { const a = pans[0]; const b = pans[1]; const ra = reserved(a); const rb = reserved(b); let p = ra <= rb ? a : b; if (p.pile.length >= PILE) p = p === a ? b : a; return p.pile.length >= PILE ? null : p; } function toPan(w, p, quick) { p.pile.push(w); w.side = p.i; w.landed = false; restack(p); w.slot.style.color = ''; w.el.setAttribute('aria-label', `${w.text}, weight ${w.wt}, on the ${p.i ? 'right' : 'left'} pan. Take it off.`); if (REDUCED) return fade(w, () => land(w)); launch(w, 'pan', quick); } function liftOff(w, delay) { const p = pans[w.side]; p.pile = p.pile.filter((o) => o !== w); w.landed = false; recount(p); restack(p, delay); } function toTray(w, quick) { /* a word with others on top slides out sideways first, and the ones above drop into the gap after it */ const covered = w.side >= 0 && pans[w.side].pile.indexOf(w) < pans[w.side].pile.length - 1; if (w.side >= 0) liftOff(w, covered && !REDUCED ? 0.16 : 0); w.covered = covered; w.side = -1; w.el.setAttribute('aria-label', `${w.text}, weight ${w.wt}. Put it on the scale.`); if (REDUCED) return fade(w, () => land(w)); launch(w, 'tray', quick); } /* with reduced motion a word does not travel: it fades out and fades in where it goes */ function fade(w, done) { w.state = 'fly'; gsap.to(w.el, { opacity: 0, duration: 0.22, ease: 'power1.out', onComplete: () => { w.fly = null; done(); gsap.to(w.el, { opacity: 1, duration: 0.3, ease: 'power1.out' }); }, }); } function launch(w, dest, quick) { const dist = Math.hypot((dest === 'pan' ? pans[w.side].qx : w.slotX) - w.x, (dest === 'pan' ? pans[w.side].qy : w.slotY) - w.y); const dur = quick ? FLIGHT * 0.55 : FLIGHT * clampN(0.75 + dist / 1400, 0.8, 1.15); w.state = 'fly'; const dir = Math.sign((dest === 'pan' ? pans[w.side].qx : w.slotX) - w.x) || 1; const slide = w.covered && !quick ? dir * (L.pw + w.inkW / 2) * 1.1 : 0; w.covered = false; w.fly = { p: 0, sx: w.x, sy: w.y, srot: w.rot, dest, slide, lift: quick ? 30 : clampN(L.H * 0.11, 60, 110) + (dest === 'pan' ? pans[w.side].pile.length * L.fs * 0.8 : 0), lx: 0, ly: 0 }; gsap.killTweensOf(w.fly); const wait = quick ? 0 : 0.09; /* a little crouch before it leaves, narrower while it flies */ gsap.timeline({ defaults: { overwrite: 'auto' } }) .to(w.ink, { scaleY: quick ? 1 : 0.9, scaleX: quick ? 1 : 1.05, '--wd': quick ? 100 : 112, duration: wait || 0.01, ease: 'power2.out' }) .to(w.ink, { scaleY: 1.04, scaleX: 0.97, '--wd': 82, duration: dur * 0.45, ease: 'power2.out' }) .to(w.ink, { scaleY: 1, scaleX: 1, '--wd': 96, duration: dur * 0.45, ease: 'power1.inOut' }); gsap.to(w.fly, { p: 1, duration: dur, delay: wait, ease: 'none', onComplete: () => land(w) }); } function land(w) { const fl = w.fly; w.fly = null; const vx = fl ? fl.lx : 0; const vy = fl ? fl.ly : 0; if (w.side >= 0) { const p = pans[w.side]; w.state = 'pan'; w.landed = true; w.sy = w.syT; recount(p); if (!REDUCED) { const I = I0 + pans[0].m + pans[1].m; const hit = clampN(vy / 900, 0.3, 1.6) * KNOCK; beam.w += (p.sign * hit * 0.9 * w.m * Math.cos(beam.th)) / I; p.w -= ((vx / L.l) * 0.35 * w.m) / (p.m + 3); gsap.fromTo(p, { flex: Math.min(5, 1 + w.m * 0.45) * KNOCK }, { flex: 0, duration: 0.8, ease: 'elastic.out(1, 0.38)', overwrite: 'auto' }); squash(w, 0.55 + w.m * 0.05); /* the words below feel the blow, the nearest first */ const below = p.pile.slice(0, p.pile.indexOf(w)).reverse(); below.forEach((o, j) => { gsap.timeline({ delay: 0.03 + j * 0.04 }) .to(o.ink, { scaleY: 0.95, '--wd': 106, duration: 0.06, ease: 'power2.out' }) .to(o.ink, { scaleY: 1, '--wd': 100, duration: 0.55, ease: 'elastic.out(1, 0.45)' }); }); } } else { w.state = 'tray'; w.slot.style.color = ''; squash(w, 0.35); } } /* ------------------------------------------------------------------ clicks and drags */ words.forEach((w) => { w.el.addEventListener('click', () => { if (!ready) return; if (gsap.ticker.time - dragEnded < 0.35) return; if (w.state === 'tray') { const p = choosePan(); if (p) toPan(w, p); else refuse(w); } else if (w.state === 'pan') { toTray(w); } }); w.el.addEventListener('pointerdown', (e) => { if (!ready || e.button > 0 || (w.state !== 'tray' && w.state !== 'pan')) return; down = { w, x: e.clientX, y: e.clientY, ox: w.x - e.clientX, oy: w.y - e.clientY, id: e.pointerId }; try { w.el.setPointerCapture(e.pointerId); } catch (err) { /* nothing */ } }); w.el.addEventListener('pointermove', (e) => { if (!down || down.w !== w) return; if (!drag) { if (Math.hypot(e.clientX - down.x, e.clientY - down.y) < 6) return; if (w.state === 'pan') liftOff(w); w.side = -1; w.state = 'drag'; w.el.classList.add('is-drag'); drag = { w, tx: 0, ty: 0, over: null }; if (!REDUCED) gsap.to(w.ink, { scaleY: 1.04, scaleX: 0.98, '--wd': 92, duration: 0.25, ease: 'power2.out', overwrite: 'auto' }); } drag.tx = e.clientX + down.ox; drag.ty = e.clientY + down.oy; let best = null; let bd = Math.max(L.pw * 1.5, 110); pans.forEach((p) => { const d = Math.hypot(drag.tx - p.qx, drag.ty - (p.qy - 30)); if (d < bd && p.pile.length < PILE) { bd = d; best = p; } }); if (best !== drag.over) { drag.over = best; pans.forEach((p) => gsap.to(p, { hi: p === best ? 1 : 0, duration: 0.25, ease: 'power2.out', overwrite: 'auto' })); } }); const up = () => { if (!down || down.w !== w) return; down = null; if (!drag) return; const over = drag.over; drag = null; dragEnded = gsap.ticker.time; w.el.classList.remove('is-drag'); pans.forEach((p) => gsap.to(p, { hi: 0, duration: 0.3, ease: 'power2.out', overwrite: 'auto' })); if (over) toPan(w, over, true); else toTray(w); }; w.el.addEventListener('pointerup', up); w.el.addEventListener('pointercancel', up); w.el.addEventListener('pointerenter', (e) => { if (!HOVER || e.pointerType !== 'mouse' || REDUCED || drag) return; if (w.state === 'tray' || w.state === 'pan') gsap.to(w, { lift: -4, duration: 0.45, ease: 'back.out(2.4)', overwrite: 'auto' }); gsap.to(w.ink, { '--wd': 108, duration: 0.4, ease: 'power2.out', overwrite: 'auto' }); }); w.el.addEventListener('pointerleave', (e) => { if (!HOVER || e.pointerType !== 'mouse' || REDUCED) return; gsap.to(w, { lift: 0, duration: 0.5, ease: 'elastic.out(1, 0.5)', overwrite: 'auto' }); if (w.state !== 'drag' && w.state !== 'fly') gsap.to(w.ink, { '--wd': 100, duration: 0.45, ease: 'power2.out', overwrite: 'auto' }); }); }); /* ------------------------------------------------------------------ every frame */ function placeWords(dt) { words.forEach((w) => { let x = w.x; let y = w.y; let r = w.rot; if (w.state === 'tray') { x = w.slotX; y = w.slotY + w.lift + (1 - w.enter) * L.fs * 1.1; r = 0; } else if (w.state === 'pan') { const p = pans[w.side]; [x, y] = onPan(p, 0, w.sy + w.desc + 1 - p.flex - w.lift); r = p.ang; } else if (w.state === 'drag' && drag) { const k = 1 - Math.exp(-dt * 26); const nx = w.x + (drag.tx - w.x) * k; const ny = w.y + (drag.ty - w.y) * k; const vx = dt > 0 ? (nx - w.x) / dt : 0; x = nx; y = ny; r = w.rot + (clampN(vx * 0.00022, -0.2, 0.2) - w.rot) * (1 - Math.exp(-dt * 14)); } else if (w.state === 'fly' && w.fly) { const f = w.fly; let tx; let ty; let tr = 0; if (f.dest === 'pan') { const p = pans[w.side]; [tx, ty] = panTarget(w, p); tr = p.ang; } else { tx = w.slotX; ty = w.slotY; } /* a cubic curve: it leaves upwards and comes down onto the pan (or its slot) from straight above */ const top = Math.min(f.sy, ty) - f.lift; const ax = f.slide ? f.sx + f.slide : f.sx + (tx - f.sx) * 0.2; const ay = f.slide ? f.sy - 6 : top; const p = f.p; const q = 1 - p; x = q * q * q * f.sx + 3 * q * q * p * ax + 3 * q * p * p * tx + p * p * p * tx; y = q * q * q * f.sy + 3 * q * q * p * ay + 3 * q * p * p * top + p * p * p * ty; const dx = 3 * q * q * (ax - f.sx) + 6 * q * p * (tx - ax); const dy = 3 * q * q * (ay - f.sy) + 6 * q * p * (top - ay) + 3 * p * p * (ty - top); const span = Math.max(1, Math.hypot(tx - f.sx, ty - f.sy)); const tilt = clampN(dx / span, -1, 1) * 0.12 * Math.sin(PI * p); const e = p * p * (3 - 2 * p); r = f.srot + (tr - f.srot) * e + tilt; if (dt > 0) { f.lx = (x - w.x) / dt; f.ly = (y - w.y) / dt; } if (!(f.lx || f.ly)) { f.lx = dx; f.ly = dy; } } w.x = x; w.y = y; w.rot = r; w.el.style.transform = `translate(${(x - w.w / 2).toFixed(2)}px, ${(y - w.base).toFixed(2)}px) rotate(${r.toFixed(4)}rad)`; if (!REDUCED) w.el.style.opacity = clampN(w.enter, 0, 1).toFixed(3); }); } function draw() { const c = Math.cos(beam.th); const s = Math.sin(beam.th); const { px, py, a, l, pw, d, by, bw, ln } = L; const f2 = (n) => n.toFixed(2); svg.guide.setAttribute('d', `M${f2(px - a)} ${f2(py)}H${f2(px + a)}`); svg.guide.style.opacity = rv.guide; svg.base.setAttribute('d', rv.base > 0 ? `M${f2(px - bw * rv.base)} ${f2(by)}H${f2(px + bw * rv.base)}` : ''); const top = by - (by - (py + 10)) * rv.post; svg.post.setAttribute('d', rv.post > 0 ? `M${f2(px)} ${f2(by)}V${f2(top)}` : ''); const kn = rv.knife; svg.knife.setAttribute('d', kn > 0 ? `M${f2(px - 6 * kn)} ${f2(py + 10 * kn)}L${f2(px)} ${f2(py)}L${f2(px + 6 * kn)} ${f2(py + 10 * kn)}Z` : ''); /* the beam grows from the pivot outwards */ const rb = rv.beam; svg.beam.setAttribute('d', rb > 0 ? `M${f2(px - a * c * rb)} ${f2(py - a * s * rb)}L${f2(px + a * c * rb)} ${f2(py + a * s * rb)}` : ''); /* the scale over the needle: a tick every sixth of the way to the stop, the zero taller */ let t = ''; for (let k = -6; k <= 6; k++) { if (!k || Math.abs(k) / 6 > rv.ticks) continue; const an = (k / 6) * MAXT; const r1 = ln + 8; const r2 = ln + (Math.abs(k) % 3 === 0 ? 17 : 13); t += `M${f2(px + r1 * Math.sin(an))} ${f2(py - r1 * Math.cos(an))}L${f2(px + r2 * Math.sin(an))} ${f2(py - r2 * Math.cos(an))}`; } svg.ticks.setAttribute('d', t); const zr = ln + 21 + (REDUCED ? 0 : ev.v * 6); svg.zero.setAttribute('d', rv.ticks > 0 ? `M${f2(px)} ${f2(py - ln - 6)}V${f2(py - ln - 6 - (zr - ln - 6) * rv.ticks)}` : ''); const nl = (ln + (REDUCED ? 0 : ev.v * 3)) * rv.needle; svg.needle.setAttribute('d', nl > 0 ? `M${f2(px)} ${f2(py)}L${f2(px + nl * s)} ${f2(py - nl * c)}` : ''); const col = gsap.utils.interpolate(colors.ink, colors.accent, clampN(ev.v, 0, 1)); svg.needle.style.stroke = col; svg.zero.style.stroke = col; svg.zero.style.strokeWidth = 1 + ev.v * 0.6; /* the pans, each hanging from its end of the beam */ pans.forEach((p) => { const [ex, ey] = frame(p); const ew = pw * rv.pans; const [ax, ay] = onPan(p, -ew, d); const [bx, by2] = onPan(p, ew, d); const [cx, cy] = onPan(p, 0, -d - 2 * p.flex); const rs = rv.strings; if (rs > 0 && rv.pans > 0) { svg.strings[p.i].setAttribute('d', `M${f2(ax)} ${f2(ay)}L${f2(ex)} ${f2(ey)}L${f2(bx)} ${f2(by2)}`); } else if (rs > 0) { const [qx, qy] = onPan(p, 0, 0); svg.strings[p.i].setAttribute('d', `M${f2(ex)} ${f2(ey)}L${f2(ex + (qx - ex) * rs)} ${f2(ey + (qy - ey) * rs)}`); } else svg.strings[p.i].setAttribute('d', ''); svg.pans[p.i].setAttribute('d', rv.pans > 0 ? `M${f2(ax)} ${f2(ay)}Q${f2(cx)} ${f2(cy)} ${f2(bx)} ${f2(by2)}` : ''); svg.pans[p.i].style.strokeWidth = 1 + p.hi * 0.9; const te = totalEls[p.i]; te.style.transform = `translate(${f2(p.qx)}px, ${f2(p.qy + 14)}px) translateX(-50%)`; }); } let lastT = 0; gsap.ticker.add((time) => { if (!ready) return; const dt = clampN(time - lastT, 0, 1 / 20); lastT = time; if (beam.held) { pans.forEach((p) => { p.init = false; }); } else if (!beam.sleep && !REDUCED) { beam.acc += dt; while (beam.acc >= STEP) { step(STEP); beam.acc -= STEP; } settleCheck(); } else if (REDUCED) { beam.th = equilibrium(); } checkEven(); draw(); placeWords(dt); }); /* ------------------------------------------------------------------ start */ function readColors() { const cs = getComputedStyle(document.documentElement); colors = { ink: cs.getPropertyValue('--ink').trim() || '#141414', accent: cs.getPropertyValue('--accent').trim() || '#e5391c' }; } function intro() { words.forEach((w) => { w.el.style.visibility = 'visible'; w.slot.style.visibility = 'visible'; w.x = w.slotX; w.y = w.slotY; }); totalEls.forEach((t) => { t.style.visibility = 'visible'; }); if (REDUCED) { beam.th = 0; beam.held = false; beam.sleep = true; gsap.from([svg.guide, svg.base, svg.post, svg.ticks, svg.zero, svg.needle, svg.knife, svg.beam, ...svg.strings, ...svg.pans], { opacity: 0, duration: 0.6, ease: 'power1.out' }); gsap.from([...words.map((w) => w.el), ...words.map((w) => w.slot), ...totalEls], { opacity: 0, duration: 0.6, delay: 0.2, ease: 'power1.out' }); return; } const tl = gsap.timeline(); tl.to(rv, { base: 1, duration: 0.5, ease: 'power3.out' }, 0) .to(rv, { post: 1, duration: 0.55, ease: 'power3.inOut' }, 0.1) .to(rv, { knife: 1, duration: 0.45, ease: 'back.out(3)' }, 0.5) .to(rv, { beam: 1, duration: 0.7, ease: 'power3.out' }, 0.55) .to(rv, { guide: 1, duration: 0.6, ease: 'power1.out' }, 0.75) .to(rv, { needle: 1, duration: 0.6, ease: 'back.out(1.6)' }, 0.7) .to(rv, { ticks: 1, duration: 0.6, ease: 'power1.out' }, 0.8) .to(rv, { strings: 1, duration: 0.5, ease: 'power2.out' }, 0.9) .to(rv, { pans: 1, duration: 0.5, ease: 'back.out(2)' }, 1.2) .call(() => { /* let go: the beam was held askew, now it swings back to level and settles */ beam.held = false; beam.sleep = false; beam.w = 0; }, null, 1.4) .to(words, { enter: 1, duration: 0.7, ease: 'back.out(1.5)', stagger: 0.06 }, 1.05) .fromTo(words.map((w) => w.ink), { '--wd': 64 }, { '--wd': 100, duration: 0.8, ease: 'power3.out', stagger: 0.06 }, 1.05) .from(words.map((w) => w.slot), { opacity: 0, duration: 0.5, stagger: 0.06, ease: 'power1.out' }, 1.35) .from(totalEls, { opacity: 0, duration: 0.5, ease: 'power1.out' }, 1.5); } function start() { readColors(); layout(); ready = true; lastT = gsap.ticker.time; updateRead(); intro(); } addEventListener('resize', () => { if (!ready) return; layout(); pans.forEach((p) => { p.init = false; }); wake(); }); const fontReady = document.fonts ? Promise.race([ Promise.all(list.map((d) => document.fonts.load(`${d.wt} 30px "Roboto Flex Variable"`, d.text))).then(() => document.fonts.ready), new Promise((r) => setTimeout(r, 2500)), ]) : Promise.resolve(); fontReady.then(start, start);