/* ---- valori da cambiare ---- */ const SPEED = 950; /* how fast the wave of characters runs out of the button, in pixels per second */ const SCRAMBLE = 0.24; /* the seconds a character flickers before it settles */ const TALL = 7; /* how many lines of characters a big word is tall, at most */ const WEIGHT = 800; /* the weight of the letters the big words are cut from (100 to 800) */ const LENS = 64; /* the radius of the field of characters the pointer stirs, in pixels */ const GLITTER = 0.45; /* how many empty places flicker as the wave goes by (0 none, 1 all) */ /* The ASCII menu The full-screen menu of a small studio that makes tools for developers, set in characters. At rest only a Menu button. Pressed, it glides to its corner, its word rolls to Close through random characters, and a wave of characters runs out of it across the screen: every place flickers for a moment and settles, and where the wave has passed the links are left written in big letters made of small ones, each with a short note beside it. The big letters are cut from the typeface on a hidden canvas and every place of the grid is matched to the character whose shape is closest: the coverage of six little zones of the place (two across, three down) is compared with the same six zones of each character, measured once at the start. So the slashes follow the diagonals, the bars the straight strokes, the dense characters fill the inside. Under the pointer a field of characters stirs; the link pointed at flickers from the pointer outwards and the others dim; the page you are on is orange; the focus from the keyboard is marked with crop marks drawn in characters. Choosing a link inverts it, and the wave runs back into the button. Esc, the button or a link close it; the arrows go from link to link, Tab stays in the menu. */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const frame = document.querySelector('[data-frame]'); const canvas = frame.querySelector('[data-screen]'); const ctx = canvas.getContext('2d'); const menu = frame.querySelector('[data-menu]'); const links = [...menu.querySelectorAll('[data-word]')]; const toggle = frame.querySelector('[data-toggle]'); const keyWord = toggle.querySelector('[data-key-word]'); const toggleName = toggle.querySelector('[data-toggle-name]'); const keyLines = [...toggle.querySelectorAll('[data-key-line]')]; const n = links.length; if (!n) return; const clamp = (v, a, b) => (v < a ? a : v > b ? b : v); const FAMILY = "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace"; const FS = 9.5; /* the size of the small characters */ const CH = 10; /* the height of a line of characters */ let CW = 6.6; /* the width of a character: measured */ /* the characters the big letters are made of, and those that flicker */ const SHAPES = " .,:;'`-_~^\"=+*|/\\()<>[]#"; const NOISE = '.:-=+*#%@'; const FLICKER = '!#$%&*+-/<=>?@[]^{}~|01'; let css = {}; function readColours() { const s = getComputedStyle(document.documentElement); const get = (k) => s.getPropertyValue(k).trim(); css = { ink: get('--ink'), dim: get('--dim'), mark: get('--mark'), accent: get('--accent'), page: get('--page') }; } /* ---------------------------------------------------------------- the shape of every character */ /* six zones per character: two across, three down; the coverage of each, from 0 to 1 */ let shapes = []; let densest = 1; function measureShapes() { const S = 4; const w = Math.round(CW * S); const h = CH * S; const c = document.createElement('canvas'); c.width = w; c.height = h; const g = c.getContext('2d', { willReadFrequently: true }); g.font = `500 ${FS * S}px ${FAMILY}`; g.textBaseline = 'middle'; g.fillStyle = '#fff'; shapes = []; densest = 0; for (const ch of SHAPES) { g.clearRect(0, 0, w, h); g.fillText(ch, 0, h / 2); const d = zones(g.getImageData(0, 0, w, h).data, w, 0, 0, w, h); shapes.push({ ch, d }); for (const v of d) densest = Math.max(densest, v); } } /* the coverage of the six zones of a box of an image */ function zones(data, stride, x0, y0, w, h) { const out = new Float32Array(6); for (let zy = 0; zy < 3; zy++) { for (let zx = 0; zx < 2; zx++) { const ax = Math.floor(x0 + (zx * w) / 2); const bx = Math.floor(x0 + ((zx + 1) * w) / 2); const ay = Math.floor(y0 + (zy * h) / 3); const by = Math.floor(y0 + ((zy + 1) * h) / 3); let sum = 0; let cnt = 0; for (let y = ay; y < by; y++) { for (let x = ax; x < bx; x++) { sum += data[(y * stride + x) * 4 + 3]; cnt++; } } out[zy * 2 + zx] = cnt ? sum / cnt / 255 : 0; } } return out; } /* the character whose six zones are closest to these */ function match(z) { let best = ' '; let bestD = Infinity; for (const s of shapes) { let d = 0; for (let k = 0; k < 6; k++) { const t = Math.min(1, z[k]) * densest; const e = t - s.d[k]; d += e * e; } if (d < bestD) { bestD = d; best = s.ch; } } return best; } /* ---------------------------------------------------------------- the grid */ let W = 0; let H = 0; let dpr = 1; let cols = 0; let rows = 0; let gx = 0; let gy = 0; let cell = []; /* the final character of each place, or '' */ let kind = null; /* 0 empty, 1 big word, 2 note, 3 mark of the grid */ let owner = null; /* the link a place belongs to, or -1 */ let dist = null; /* how far each place is from the button, open */ let jitter = null; let words = []; /* for each link: its box in places */ let origin = { x: 0, y: 0 }; let farthest = 1; function keyBoxOpen() { const m = W < 420 ? 12 : 18; return { x: W - toggle.offsetWidth - m, y: m, w: toggle.offsetWidth, h: toggle.offsetHeight }; } function layout() { W = frame.clientWidth; H = frame.clientHeight; dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); ctx.font = `500 ${FS}px ${FAMILY}`; CW = ctx.measureText('M').width || 6.6; cols = Math.floor((W - 8) / CW); rows = Math.floor((H - 8) / CH); gx = (W - cols * CW) / 2; gy = (H - rows * CH) / 2; const N = cols * rows; cell = new Array(N).fill(''); kind = new Uint8Array(N); owner = new Int8Array(N).fill(-1); dist = new Float32Array(N); jitter = new Float32Array(N); /* how tall the big words can be: they must fit the height and the longest must fit the width */ const top = W < 420 ? 8 : 7; const left = W < 420 ? 2 : 3; const avail = rows - top - 2; let tall = clamp(Math.min(Math.round(TALL), Math.floor((avail + 1) / n) - 1), 2, 9); const probe = document.createElement('canvas').getContext('2d'); const bigFont = (t) => (t * CH) / 0.73; const widest = () => { probe.font = `${clamp(WEIGHT, 100, 800)} ${bigFont(tall)}px ${FAMILY}`; return Math.max(...links.map((a) => probe.measureText(a.textContent.trim().toUpperCase()).width)); }; while (tall > 2 && widest() > (cols - left - 1) * CW) tall--; const pitch = tall + 1; const used = n * pitch - 1; const first = top + Math.max(0, Math.floor((avail - used) / 2)); /* the big words, drawn on a hidden canvas four times finer than the grid, and read place by place */ const S = 3; const pw = Math.ceil(cols * CW * S); const ph = rows * CH * S; const hid = document.createElement('canvas'); hid.width = pw; hid.height = ph; const g = hid.getContext('2d', { willReadFrequently: true }); g.fillStyle = '#fff'; g.textBaseline = 'alphabetic'; g.font = `${clamp(WEIGHT, 100, 800)} ${bigFont(tall) * S}px ${FAMILY}`; words = links.map((a, k) => { const text = a.textContent.trim().toUpperCase(); const r0 = first + k * pitch; const width = Math.ceil(g.measureText(text).width / S / CW); /* the baseline sits on the bottom of the word's last line */ g.fillText(text, left * CW * S, (r0 + tall) * CH * S - CH * S * 0.08); return { r0, r1: r0 + tall - 1, c0: left, c1: left + width - 1, text }; }); const data = g.getImageData(0, 0, pw, ph).data; for (let r = 0; r < rows; r++) { if (!words.some((w) => r >= w.r0 && r <= w.r1)) continue; for (let c = 0; c < cols; c++) { const z = zones(data, pw, c * CW * S, r * CH * S, CW * S, CH * S); if (z.every((v) => v < 0.03)) continue; const ch = match(z); if (ch === ' ') continue; const i = r * cols + c; cell[i] = ch; kind[i] = 1; const k = words.findIndex((w) => r >= w.r0 && r <= w.r1); owner[i] = k; } } /* the notes beside the words, where there is room */ words.forEach((w, k) => { const note = (links[k].dataset.note || '').toLowerCase(); const at = w.c1 + 3; if (!note || at + note.length > cols - 1) return; for (let j = 0; j < note.length; j++) { const i = w.r0 * cols + at + j; if (note[j] === ' ') continue; cell[i] = note[j]; kind[i] = 2; owner[i] = k; } }); /* the faint marks of the grid, where nothing else is */ for (let r = 1; r < rows - 1; r += 6) { for (let c = 1; c < cols - 1; c += 12) { const i = r * cols + c; if (!cell[i] && !near(r, c)) { cell[i] = '+'; kind[i] = 3; } } } for (const [r, c] of [[0, 0], [0, cols - 1], [rows - 1, 0], [rows - 1, cols - 1]]) { const i = r * cols + c; if (!cell[i]) { cell[i] = '+'; kind[i] = 3; } } /* the wave starts from the button, in its corner */ const kb = keyBoxOpen(); origin = { x: kb.x + kb.w / 2, y: kb.y + kb.h / 2 }; farthest = 1; let seed = 11; const rnd = () => ((seed = (seed * 16807) % 2147483647) / 2147483647); for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const i = r * cols + c; dist[i] = Math.hypot(gx + (c + 0.5) * CW - origin.x, gy + (r + 0.5) * CH - origin.y); jitter[i] = rnd(); farthest = Math.max(farthest, dist[i]); } } /* the links over their words */ words.forEach((w, k) => { const a = links[k]; a.style.left = `${gx + w.c0 * CW - 6}px`; a.style.top = `${gy + w.r0 * CH - 3}px`; a.style.width = `${(w.c1 - w.c0 + 1) * CW + 12}px`; a.style.height = `${(w.r1 - w.r0 + 1) * CH + 6}px`; }); } function near(r, c) { return words.some((w) => r >= w.r0 - 1 && r <= w.r1 + 1 && c >= w.c0 - 2 && c <= w.c1 + 24); } /* ---------------------------------------------------------------- the clock and the drawing */ let phase = 'closed'; /* closed, opening, open, closing */ let t0 = 0; /* when the wave started */ let running = false; let current = Math.max(0, links.findIndex((a) => a.getAttribute('aria-current') === 'page')); let hover = -1; let focusK = -1; let flash = -1; let flashAt = 0; const scrambleAt = new Map(); /* word -> { at, col } : the word flickering from where the pointer came in */ const lens = { x: -999, y: -999, amp: 0, at: 0 }; let alpha = 1; const now = () => performance.now() / 1000; const hash = (i, f) => { let h = (i * 374761393 + f * 668265263) | 0; h = (h ^ (h >>> 13)) * 1274126177; return ((h ^ (h >>> 16)) >>> 0) / 4294967295; }; function wake() { if (running) return; running = true; requestAnimationFrame(frameLoop); } function frameLoop() { const busy = draw(); if (busy) requestAnimationFrame(frameLoop); else running = false; } const scr = () => Math.max(0.02, SCRAMBLE); const waveTime = () => farthest / Math.max(100, SPEED) + 0.12 + scr(); /* draws the screen; says whether something is still moving */ function draw() { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); if (phase === 'closed') return false; const t = now() - t0; const tick = Math.floor(now() * 24); const speed = Math.max(100, SPEED); let busy = false; ctx.globalAlpha = alpha; ctx.font = `500 ${FS}px ${FAMILY}`; ctx.textBaseline = 'middle'; /* the inverted word, when a link is chosen */ if (flash >= 0) { const w = words[flash]; const on = now() - flashAt < 0.5; if (on) { ctx.fillStyle = css.accent; ctx.fillRect(gx + w.c0 * CW - 4, gy + w.r0 * CH - 2, (w.c1 - w.c0 + 1) * CW + 8, (w.r1 - w.r0 + 1) * CH + 4); } } const glitter = clamp(GLITTER, 0, 1); const fallbackInk = (i) => { if (kind[i] === 3) return css.mark; if (kind[i] === 2) return owner[i] === hover || owner[i] === focusK ? css.ink : css.dim; const k = owner[i]; if (k === flash && now() - flashAt < 0.5) return css.page; if (k === current) return css.accent; if ((hover >= 0 && k !== hover) || (focusK >= 0 && k !== focusK && hover < 0)) return css.dim; return css.ink; }; let lastStyle = ''; const put = (ch, x, y, style) => { if (style !== lastStyle) { ctx.fillStyle = style; lastStyle = style; } ctx.fillText(ch, x, y); }; const N = cols * rows; for (let i = 0; i < N; i++) { const r = (i / cols) | 0; const c = i - r * cols; const x = gx + c * CW; const y = gy + r * CH + CH / 2; let start; let end; if (phase === 'opening' || phase === 'open') { start = REDUCED ? 0 : dist[i] / speed + jitter[i] * 0.12; end = Infinity; } else { start = -Infinity; end = REDUCED ? 0 : (farthest - dist[i]) / speed * 0.85 + jitter[i] * 0.1; } const final = cell[i]; /* not reached yet, or already gone */ if (t < start || t > end + scr()) { if (t < start) busy = true; continue; } const flickerIn = !REDUCED && t < start + scr(); const flickerOut = !REDUCED && t > end; if (flickerIn || flickerOut) { busy = true; if (!final && jitter[i] > glitter) continue; const ch = FLICKER[(hash(i, tick) * FLICKER.length) | 0]; const front = flickerIn ? 1 - (t - start) / scr() : (t - end) / scr(); put(ch, x, y, front > 0.6 ? css.ink : css.dim); continue; } if (!final) continue; /* a word flickering from where the pointer came in */ const sa = owner[i] >= 0 ? scrambleAt.get(owner[i]) : null; if (sa && kind[i] === 1 && !REDUCED) { const until = sa.at + 0.08 + Math.abs(c - sa.col) * 0.012; if (now() < until) { busy = true; put(FLICKER[(hash(i, tick) * FLICKER.length) | 0], x, y, css.accent); continue; } } put(final, x, y, fallbackInk(i)); } /* the field the pointer stirs, in the empty places */ if (!REDUCED && phase === 'open' && lens.amp > 0.01) { const age = now() - lens.at; lens.amp = Math.max(0, 1 - age / 0.9); const R = Math.max(10, LENS); const c0 = Math.max(0, Math.floor((lens.x - R - gx) / CW)); const c1 = Math.min(cols - 1, Math.ceil((lens.x + R - gx) / CW)); const r0 = Math.max(0, Math.floor((lens.y - R - gy) / CH)); const r1 = Math.min(rows - 1, Math.ceil((lens.y + R - gy) / CH)); for (let r = r0; r <= r1; r++) { for (let c = c0; c <= c1; c++) { const i = r * cols + c; if (cell[i]) continue; const d = Math.hypot(gx + (c + 0.5) * CW - lens.x, gy + (r + 0.5) * CH - lens.y); if (d > R) continue; const f = (1 - d / R) * lens.amp; const v = hash(i, Math.floor(now() * 9)) * f; const k = Math.floor(v * NOISE.length * 1.3); if (k <= 0) continue; put(NOISE[Math.min(NOISE.length - 1, k - 1)], gx + c * CW, gy + r * CH + CH / 2, css.dim); } } if (lens.amp > 0.01) busy = true; } /* the crop marks round the link the keyboard is on */ if (focusK >= 0 && phase === 'open') { const w = words[focusK]; const L = w.c0 - 2; const R = Math.min(cols - 1, w.c1 + 2); const T = w.r0 - 1; const B = w.r1 + 1; for (const [rr, cc, ch] of [[T, L, '+'], [T, L + 1, '-'], [T + 1, L, '|'], [T, R, '+'], [T, R - 1, '-'], [T + 1, R, '|'], [B, L, '+'], [B, L + 1, '-'], [B - 1, L, '|'], [B, R, '+'], [B, R - 1, '-'], [B - 1, R, '|']]) { if (rr < 0 || rr >= rows || cc < 0) continue; put(ch, gx + cc * CW, gy + rr * CH + CH / 2, css.accent); } } ctx.globalAlpha = 1; if (flash >= 0 && now() - flashAt < 0.6) busy = true; if (phase === 'opening' && t > waveTime()) phase = 'open'; if (phase === 'opening') busy = true; if (phase === 'closing') { if (t > farthest / speed * 0.85 + 0.1 + scr() + 0.02) { phase = 'closed'; ctx.clearRect(0, 0, W, H); return false; } busy = true; } return busy; } /* ---------------------------------------------------------------- the button */ let restXY = { x: 0, y: 0 }; function placeButton() { restXY = { x: W / 2 - toggle.offsetWidth / 2, y: H / 2 - toggle.offsetHeight / 2 }; } /* the word of the button rolls to another through random characters, left to right */ let wordTween = null; function rollWord(to) { if (wordTween) wordTween.kill(); const from = keyWord.textContent; const len = Math.max(from.length, to.length); if (REDUCED) { keyWord.textContent = to; return; } const p = { v: 0 }; wordTween = gsap.to(p, { v: 1, duration: 0.42, ease: 'none', onUpdate() { let s = ''; for (let k = 0; k < len; k++) { const done = p.v * (len + 2) - k; if (done >= 1) s += to[k] || ' '; else if (done > -1.5) s += FLICKER[(Math.random() * FLICKER.length) | 0]; else s += from[k] || ' '; } keyWord.textContent = s; }, onComplete() { keyWord.textContent = to; }, }); } /* ---------------------------------------------------------------- opening and closing */ let busyTl = null; let demo = null; function openMenu(opts = {}) { if (phase === 'opening' || phase === 'open') return; if (busyTl) busyTl.kill(); if (demo) demo.kill(); flash = -1; hover = -1; focusK = -1; scrambleAt.clear(); menu.inert = false; menu.classList.add('is-open'); toggle.setAttribute('aria-expanded', 'true'); toggleName.textContent = 'Close the menu'; rollWord('Close'); const kb = keyBoxOpen(); if (REDUCED) { gsap.set(toggle, { x: kb.x, y: kb.y }); phase = 'open'; t0 = now(); busyTl = gsap.timeline().fromTo({ a: 0 }, { a: 0 }, { a: 1, duration: 0.35, ease: 'power1.out', onUpdate() { alpha = this.targets()[0].a; draw(); } }); if (opts.focus) links[0].focus(); return; } alpha = 1; busyTl = gsap.timeline(); busyTl.to(toggle, { x: kb.x, y: kb.y, duration: 0.5, ease: 'expo.inOut' }, 0) .to(keyLines, { scaleX: (k) => [1, 0.55, 0.8][k], transformOrigin: '100% 50%', duration: 0.4, ease: 'back.out(2)', stagger: 0.05 }, 0.1) .call(() => { phase = 'opening'; t0 = now(); wake(); }, null, 0.28); if (opts.focus) busyTl.call(() => { if (phase !== 'closed' && phase !== 'closing') links[0].focus(); }, null, 0.9); /* opened by the preview: after the wave, the pointer seems to rest on a link */ if (opts.demo) { demo = gsap.timeline() .call(() => setHover(2, words[2] ? words[2].c0 : 0), null, 1.5) .call(() => setHover(-1), null, 2.35); } } function closeMenu(opts = {}) { if (phase === 'closed' || phase === 'closing') return; if (busyTl) busyTl.kill(); if (demo) demo.kill(); const hadFocus = menu.contains(document.activeElement); hover = -1; focusK = -1; toggle.setAttribute('aria-expanded', 'false'); toggleName.textContent = 'Open the menu'; rollWord('Menu'); if (hadFocus || opts.focus) toggle.focus({ preventScroll: true }); const done = () => { menu.classList.remove('is-open'); menu.inert = true; }; if (REDUCED) { busyTl = gsap.timeline({ onComplete: () => { phase = 'closed'; done(); draw(); gsap.set(toggle, { x: restXY.x, y: restXY.y }); } }) .to({ a: 1 }, { a: 0, duration: 0.3, ease: 'power1.in', onUpdate() { alpha = this.targets()[0].a; draw(); } }); return; } phase = 'closing'; t0 = now(); wake(); const back = farthest / Math.max(100, SPEED) * 0.85; busyTl = gsap.timeline({ onComplete: done }); busyTl.to(keyLines, { scaleX: 1, duration: 0.4, ease: 'back.out(2)', stagger: 0.05 }, 0) .to(toggle, { x: restXY.x, y: restXY.y, duration: 0.55, ease: 'expo.inOut' }, back + 0.1) .to({}, { duration: 0.1 }); } function choose(k, keys) { if (phase !== 'open' && phase !== 'opening') return; links.forEach((a) => a.removeAttribute('aria-current')); links[k].setAttribute('aria-current', 'page'); current = k; flash = k; flashAt = now(); wake(); gsap.delayedCall(REDUCED ? 0.15 : 0.45, () => closeMenu({ focus: keys })); } function setHover(k, col) { if (hover === k) return; hover = k; if (k >= 0 && !REDUCED) scrambleAt.set(k, { at: now(), col: col == null ? words[k].c0 : col }); wake(); } /* ---------------------------------------------------------------- events */ let keyed = false; toggle.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') keyed = true; }); toggle.addEventListener('click', (e) => { const keys = keyed; keyed = false; if (phase === 'open' || phase === 'opening') closeMenu({ focus: keys }); else openMenu({ focus: keys, demo: e.detail === 0 && !keys }); }); const colAt = (clientX) => { const r = frame.getBoundingClientRect(); return Math.floor((clientX - r.left - gx) / CW); }; links.forEach((a, k) => { a.addEventListener('pointerenter', (e) => { if (e.pointerType === 'mouse') setHover(k, colAt(e.clientX)); }); a.addEventListener('pointerleave', (e) => { if (e.pointerType === 'mouse' && hover === k) setHover(-1); }); a.addEventListener('focus', () => { if (!a.matches(':focus-visible')) return; focusK = k; if (!REDUCED) scrambleAt.set(k, { at: now(), col: words[k].c0 }); wake(); }); a.addEventListener('blur', () => { if (focusK === k) { focusK = -1; wake(); } }); a.addEventListener('click', (e) => { e.preventDefault(); choose(k, e.detail === 0); }); a.addEventListener('keydown', (e) => { let to = -1; if (e.key === 'ArrowDown') to = (k + 1) % n; else if (e.key === 'ArrowUp') to = (k - 1 + n) % n; else if (e.key === 'Home') to = 0; else if (e.key === 'End') to = n - 1; if (to >= 0) { e.preventDefault(); links[to].focus(); } }); }); frame.addEventListener('pointermove', (e) => { if (phase !== 'open' || REDUCED) return; const r = frame.getBoundingClientRect(); lens.x = e.clientX - r.left; lens.y = e.clientY - r.top; lens.amp = 1; lens.at = now(); wake(); }); document.addEventListener('keydown', (e) => { if (phase !== 'open' && phase !== 'opening') return; if (e.key === 'Escape') { closeMenu({ focus: true }); return; } /* Tab goes round the button and the links while the menu is open */ if (e.key === 'Tab') { const ring = [toggle, ...links]; const at = ring.indexOf(document.activeElement); if (at < 0) return; if ((e.shiftKey && at === 0) || (!e.shiftKey && at === ring.length - 1)) { e.preventDefault(); ring[e.shiftKey ? ring.length - 1 : 0].focus(); } } }); /* ---------------------------------------------------------------- sizes */ let started = false; new ResizeObserver(() => { if (!started) return; layout(); placeButton(); if (phase === 'closed') gsap.set(toggle, { x: restXY.x, y: restXY.y }); else if (!(busyTl && busyTl.isActive())) { const kb = keyBoxOpen(); gsap.set(toggle, { x: kb.x, y: kb.y }); } draw(); }).observe(frame); function start() { started = true; readColours(); ctx.font = `500 ${FS}px ${FAMILY}`; CW = ctx.measureText('M').width || 7.5; measureShapes(); layout(); placeButton(); gsap.set(toggle, { x: restXY.x, y: restXY.y }); if (REDUCED) { gsap.from(toggle, { opacity: 0, duration: 0.6, ease: 'none' }); return; } /* the button arrives: its word is typed in and its three lines are drawn */ keyWord.textContent = ''; gsap.timeline() .from(toggle, { opacity: 0, y: restXY.y + 10, duration: 0.7, ease: 'expo.out' }, 0.1) .call(() => rollWord('Menu'), null, 0.25) .from(keyLines, { scaleX: 0, transformOrigin: '0% 50%', duration: 0.5, ease: 'expo.out', stagger: 0.06 }, 0.35); } const fontReady = document.fonts && document.fonts.load ? Promise.all([ document.fonts.load(`500 ${FS}px 'JetBrains Mono Variable'`, 'Menu+-/'), document.fonts.load(`${clamp(WEIGHT, 100, 800)} 90px 'JetBrains Mono Variable'`, 'WORK'), ]).catch(() => {}) : Promise.resolve(); fontReady.then(start); })();