/* The mat card A minimal component: the card of a print for sale in a small gallery. On a pale wall the print hangs framed and drawn to scale, a white mat around it and a thin black frame around the mat; two hairline dimension lines give the overall size of the frame, and a vermilion one in the mat gives the width of the mat. With the pointer over the card the mat widens on a spring, as when a framer lays a wider mat on the print to try it, overshoots by a pixel and settles, and its dimension counts the centimetres; the title, the artist and the price take weight one after the other. Choosing another format (a click on the print, or the three little sheets below) the print and its frame grow or shrink to the new size, the mat gives a little under the push and opens again, the frame lifts off the wall while it moves, and the overall size counts along its lines; the price counts to the new one. Everything is measured in centimetres: the frame, the mat and the print are three springs in cm, integrated on the GSAP ticker with the step capped at 1/30 s, and each frame of the springs is laid out at the scale of the wall (pixels per cm, from the largest frame that has to fit). All the sizes hang from the same centre, as prints in a gallery hang at the same height. When nothing moves the ticker lets go. */ /* ---- valori da cambiare ---- */ const FORMATS = [ /* the formats on sale: the name, the size of the print in cm and the price */ { name: 'A4', width: 21, height: 29.7, price: 140 }, { name: 'A3', width: 29.7, height: 42, price: 190 }, { name: 'A2', width: 42, height: 59.4, price: 280 }, ]; const START = 'A3'; /* the format shown first */ const MAT = [5, 8]; /* the width of the mat at rest and under the pointer, in cm */ const MOULDING = 1.6; /* the width of the black frame, in cm */ const STIFFNESS = 150; /* how quickly the frame changes (the stiffness of its springs) */ const DAMPING = 0.72; /* the damping of the springs: 1 lands without overshoot, lower overshoots more */ const GIVE = 0.7; /* how much the mat gives when the print grows or shrinks, in cm */ const WEIGHT = [340, 580]; /* the weight of the title and the price, at rest and under the pointer */ const CURRENCY = '€'; /* the sign before the price */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const card = document.querySelector('[data-print]'); const wall = card.querySelector('[data-wall]'); const frameEl = card.querySelector('[data-frame]'); const windowEl = card.querySelector('[data-window]'); const quotes = card.querySelector('[data-quotes]'); const sizeLines = card.querySelector('[data-size-lines]'); const sizeTicks = card.querySelector('[data-size-ticks]'); const sizeW = card.querySelector('[data-size-w]'); const sizeH = card.querySelector('[data-size-h]'); const matLine = card.querySelector('[data-mat-line]'); const matLabel = card.querySelector('[data-mat-label]'); const wallLabel = card.querySelector('[data-wall-label]'); const titleEl = card.querySelector('[data-title]'); const artistEl = card.querySelector('[data-artist]'); const priceEl = card.querySelector('[data-price]'); const formatsEl = card.querySelector('[data-formats]'); const live = card.querySelector('[data-live]'); const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const num = (v, d) => (Number.isFinite(Number(v)) ? Number(v) : d); const lerp = (a, b, t) => a + (b - a) * t; /* ---------------------------------------------------------------- the values, made safe */ const list = (Array.isArray(FORMATS) ? FORMATS : []).filter((f) => f && typeof f === 'object').slice(0, 5) .map((f, i) => ({ name: String(f.name || `Size ${i + 1}`).slice(0, 8), w: clamp(num(f.width, 21), 5, 200), h: clamp(num(f.height, 29.7), 5, 200), price: Math.max(0, Math.round(num(f.price, 100))), })); if (!list.length) list.push({ name: 'A3', w: 29.7, h: 42, price: 190 }); const matRest = clamp(num(MAT[0], 5), 0, 20); const matOver = clamp(num(MAT[1], 8), 0, 20); const mould = clamp(num(MOULDING, 1.6), 0.3, 6); const stiff = clamp(num(STIFFNESS, 150), 20, 800); const damp = clamp(num(DAMPING, 0.72), 0.2, 2); const give = clamp(num(GIVE, 0.7), 0, 4); const light = clamp(num(WEIGHT[0], 340), 100, 900); const heavy = clamp(num(WEIGHT[1], 580), 100, 900); const sign = String(CURRENCY ?? '').slice(0, 4); let current = Math.max(0, list.findIndex((f) => f.name === String(START))); /* ---------------------------------------------------------------- the three springs, in centimetres */ const spring = (x) => ({ x, v: 0, t: x }); const pw = spring(list[current].w); /* the print */ const ph = spring(list[current].h); const mat = spring(REDUCED ? matRest : 0); /* the mat: at the start the print comes in tight in its frame */ mat.t = REDUCED ? matRest : 0; let running = false; /* the scale of the wall: pixels per cm, from the largest frame that ever has to fit, with room for the lines */ let W = 0; let H = 0; let S = 1; function measure() { W = wall.clientWidth; H = wall.clientHeight; const most = Math.max(matRest, matOver) + give + 0.6; const fw = Math.max(...list.map((f) => f.w)) + 2 * most + 2 * mould; const fh = Math.max(...list.map((f) => f.h)) + 2 * most + 2 * mould; S = Math.max(0.1, Math.min((W - 2 * 34) / fw, (H - 2 * 34) / fh)); quotes.setAttribute('viewBox', `0 0 ${W} ${H}`); } /* ---------------------------------------------------------------- drawing one frame */ const reveal = { r: REDUCED ? 1 : 0 }; /* the dimension lines grow out from their middle at the start */ const shown = { mat: matRest }; /* the number written in the mat: whole centimetres, counted */ const r1 = (v) => Math.round(v); const cm = (v) => `${(Math.round(v * 10) / 10).toFixed(1)} cm`; function draw() { const m = Math.max(0, mat.x) * S; const aw = Math.max(1, pw.x * S); const ah = Math.max(1, ph.x * S); const mo = Math.max(2.5, mould * S); const fw = aw + 2 * m + 2 * mo; const fh = ah + 2 * m + 2 * mo; const cx = W / 2; const cy = H / 2 - 5; const fx = cx - fw / 2; const fy = cy - fh / 2; frameEl.style.borderWidth = `${mo.toFixed(2)}px`; frameEl.style.width = `${fw.toFixed(2)}px`; frameEl.style.height = `${fh.toFixed(2)}px`; frameEl.style.transform = `translate(${fx.toFixed(2)}px, ${fy.toFixed(2)}px)`; windowEl.style.width = `${aw.toFixed(2)}px`; windowEl.style.height = `${ah.toFixed(2)}px`; windowEl.style.transform = `translate(${m.toFixed(2)}px, ${m.toFixed(2)}px)`; const speed = Math.abs(pw.v) + Math.abs(ph.v); frameEl.style.setProperty('--lift', clamp(speed / 40, 0, 1).toFixed(3)); /* the overall size: a line under the frame and one beside it, with extension lines and slashes at the ends, broken in the middle for the number */ const r = reveal.r; const e = 1 - Math.pow(1 - r, 3); const outW = pw.x + 2 * Math.max(0, mat.x) + 2 * mould; const outH = ph.x + 2 * Math.max(0, mat.x) + 2 * mould; sizeW.textContent = cm(outW); sizeH.textContent = cm(outH); const lw = 4.9 * sizeW.textContent.length; /* the breaks in the lines for the numbers */ const lh = 4.9 * sizeH.textContent.length; const gap = 12; const yb = r1(fy + fh + gap) + 0.5; const xr = r1(fx + fw + gap) + 0.5; const hw = (fw / 2) * e; const hh = (fh / 2) * e; let d = ''; /* under the frame */ if (hw > lw / 2) d += `M${cx - hw} ${yb}H${cx - lw / 2}M${cx + lw / 2} ${yb}H${cx + hw}`; /* beside the frame */ if (hh > lh / 2 + 2) d += `M${xr} ${cy - hh}V${cy - lh / 2 - 2}M${xr} ${cy + lh / 2 + 2}V${cy + hh}`; let t = ''; const k = clamp((r - 0.6) / 0.4, 0, 1); if (k > 0) { const L = r1(fx) + 0.5; const R = r1(fx + fw) - 0.5; const T = r1(fy) + 0.5; const B = r1(fy + fh) - 0.5; /* extension lines from the frame, a few pixels off it and a few past the line, and the slashes */ const eb = (yb + 4 - (B + 3)) * k; const er = (xr + 4 - (R + 3)) * k; t += `M${L} ${B + 3}v${eb}M${R} ${B + 3}v${eb}`; t += `M${R + 3} ${T}h${er}M${R + 3} ${B}h${er}`; const s = 2.5; t += `M${L - s} ${yb + s}L${L + s} ${yb - s}M${R - s} ${yb + s}L${R + s} ${yb - s}`; t += `M${xr - s} ${T + s}L${xr + s} ${T - s}M${xr - s} ${B + s}L${xr + s} ${B - s}`; } sizeTicks.setAttribute('d', t); sizeTicks.style.opacity = k.toFixed(3); sizeLines.setAttribute('d', d); sizeW.setAttribute('x', cx.toFixed(2)); sizeW.setAttribute('y', yb.toFixed(2)); sizeH.setAttribute('transform', `translate(${xr.toFixed(2)} ${cy.toFixed(2)}) rotate(-90)`); sizeW.style.opacity = sizeH.style.opacity = clamp((r - 0.35) / 0.4, 0, 1).toFixed(3); /* the width of the mat, in the mat under the print: a vermilion line from the print to the frame */ const xq = r1(fx + mo + m + Math.min(12, aw * 0.12)) + 0.5; const y1 = fy + mo + m + ah + 1.5; const y2 = fy + fh - mo - 1; const mh = Math.max(0, y2 - y1); const mr = clamp((r - 0.4) / 0.4, 0, 1); let q = ''; if (mh > 3 && mr > 0) { const mid = (y1 + y2) / 2; const half = (mh / 2) * mr; q = `M${xq} ${mid - half}V${mid + half}M${xq - 2.5} ${mid - half}H${xq + 2.5}M${xq - 2.5} ${mid + half}H${xq + 2.5}`; } matLine.setAttribute('d', q); matLabel.setAttribute('x', (xq + 6).toFixed(2)); matLabel.setAttribute('y', ((y1 + y2) / 2 + 0.3).toFixed(2)); matLabel.textContent = `Mat ${Math.round(shown.mat)} cm`; matLabel.style.opacity = (mh > 9 ? clamp((r - 0.45) / 0.4, 0, 1) : 0).toFixed(3); } /* ---------------------------------------------------------------- the springs on the ticker */ function step(time, deltaMs) { const dt = Math.min((deltaMs || 16.7) / 1000, 1 / 30); const n = 4; const h = dt / n; const k = stiff; const c = 2 * Math.sqrt(k) * damp; const km = stiff * 1.35; /* the mat is a little quicker than the print, so it breathes */ const cmat = 2 * Math.sqrt(km) * clamp(damp * 0.92, 0.15, 3); for (let s = 0; s < n; s++) { pw.v += (k * (pw.t - pw.x) - c * pw.v) * h; ph.v += (k * (ph.t - ph.x) - c * ph.v) * h; mat.v += (km * (mat.t - mat.x) - cmat * mat.v) * h; pw.x += pw.v * h; ph.x += ph.v * h; mat.x += mat.v * h; } draw(); const still = [pw, ph, mat].every((p) => Math.abs(p.t - p.x) < 0.004 && Math.abs(p.v) < 0.01); if (still) { [pw, ph, mat].forEach((p) => { p.x = p.t; p.v = 0; }); draw(); gsap.ticker.remove(step); running = false; } } function wake() { if (running) return; running = true; gsap.ticker.add(step); } /* ---------------------------------------------------------------- the words take weight */ const words = [ { el: titleEl, w: 0, paint: (t) => `'wght' ${lerp(light, heavy, t).toFixed(1)}, 'opsz' 28, 'SOFT' ${lerp(50, 0, clamp(t, 0, 1)).toFixed(1)}, 'WONK' 0` }, { el: artistEl, w: 0, paint: (t) => `'wght' ${lerp(420, 540, t).toFixed(1)}, 'wdth' ${lerp(96, 100, clamp(t, 0, 1)).toFixed(2)}` }, { el: priceEl, w: 0, paint: (t) => `'wght' ${lerp(light, heavy, t).toFixed(1)}, 'opsz' 24, 'SOFT' ${lerp(50, 0, clamp(t, 0, 1)).toFixed(1)}, 'WONK' 0` }, ]; const paintWord = (o) => { o.el.style.fontVariationSettings = o.paint(o.w); }; words.forEach(paintWord); function weigh(on) { words.forEach((o, i) => { gsap.killTweensOf(o); if (REDUCED) { o.w = on ? 1 : 0; paintWord(o); return; } gsap.to(o, { w: on ? 1 : 0, duration: on ? 0.55 : 0.45, delay: (on ? i : words.length - 1 - i) * 0.06, ease: on ? 'back.out(2.2)' : 'power2.out', onUpdate: () => paintWord(o) }); }); } /* ---------------------------------------------------------------- the pointer over the card (hover, focus, touch, the preview's tour): any of them widens the mat */ const holds = new Set(); let over = false; function hold(src, on) { if (on) holds.add(src); else holds.delete(src); const now = holds.size > 0; if (now === over) return; over = now; mat.t = over ? matOver : matRest; gsap.killTweensOf(shown); if (REDUCED) { mat.x = mat.t; mat.v = 0; shown.mat = mat.t; gsap.fromTo(frameEl, { opacity: 0.55 }, { opacity: 1, duration: 0.35, ease: 'power1.out', overwrite: true }); draw(); } else { gsap.to(shown, { mat: mat.t, duration: 0.5, ease: 'power2.out', onUpdate: draw }); wake(); } weigh(over); } /* ---------------------------------------------------------------- the formats */ const chips = list.map((f, i) => { const b = document.createElement('button'); b.type = 'button'; b.className = 'format'; b.setAttribute('role', 'radio'); b.setAttribute('aria-label', `${f.name}, ${f.w} by ${f.h} cm, ${sign}${f.price}`); /* a little sheet to scale: the largest is 26 px tall */ const big = Math.max(...list.map((g) => Math.max(g.w, g.h))); const sw = Math.max(5, Math.round((f.w / big) * 26)); const sh = Math.max(5, Math.round((f.h / big) * 26)); const ins = Math.max(1.5, Math.min(sw, sh) * 0.2); b.innerHTML = `` + ``; b.querySelector('.format__name').textContent = f.name; formatsEl.appendChild(b); return b; }); const inners = chips.map((b) => b.querySelector('.format__mat')); function markChips(animate) { chips.forEach((b, i) => { const on = i === current; b.setAttribute('aria-checked', String(on)); b.tabIndex = on ? 0 : -1; gsap.killTweensOf(inners[i]); if (!animate || REDUCED) gsap.set(inners[i], { scale: on ? 1 : 0.4, opacity: on ? 1 : 0 }); else if (on) gsap.fromTo(inners[i], { scale: 0.4, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.6, delay: 0.08, ease: 'back.out(2.6)' }); else gsap.to(inners[i], { scale: 0.4, opacity: 0, duration: 0.25, ease: 'power2.in' }); }); const next = list[(current + 1) % list.length]; wallLabel.textContent = `${titleEl.textContent.trim()}, framed, in ${list[current].name}. Show ${next.name}`; } const price = { v: list[current].price }; const paintPrice = () => { priceEl.textContent = `${sign}${Math.round(price.v)}`; }; paintPrice(); function choose(i) { i = ((i % list.length) + list.length) % list.length; if (i === current) return; const grow = Math.sign((list[i].w * list[i].h) - (list[current].w * list[current].h)); current = i; pw.t = list[i].w; ph.t = list[i].h; markChips(true); live.textContent = `${list[i].name}, ${list[i].w} by ${list[i].h} cm, ${sign}${list[i].price}`; gsap.killTweensOf(price); if (REDUCED) { pw.x = pw.t; ph.x = ph.t; pw.v = ph.v = 0; price.v = list[i].price; paintPrice(); gsap.fromTo([frameEl, quotes], { opacity: 0.2 }, { opacity: 1, duration: 0.4, ease: 'power1.out', overwrite: true }); draw(); return; } /* the print pushes the mat as it grows (pulls it as it shrinks): the mat gives and opens again */ mat.v -= grow * give * Math.sqrt(stiff) * 0.9; gsap.to(price, { v: list[i].price, duration: 0.7, ease: 'power3.out', onUpdate: paintPrice }); wake(); } /* ---------------------------------------------------------------- input */ let keyed = false; let touring = null; wall.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') keyed = true; }); wall.addEventListener('click', (e) => { /* the library's preview clicks from a script (detail 0, not a key): a round of all the states */ if (e.detail === 0 && !keyed && !e.isTrusted) { if (!touring) tour(); return; } keyed = false; if (touring) stopTour(); choose(current + 1); }); chips.forEach((b, i) => { b.addEventListener('click', () => { if (touring) stopTour(); choose(i); }); b.addEventListener('keydown', (e) => { const to = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: list.length - 1 }[e.key]; if (to === undefined) return; e.preventDefault(); const j = ((to % list.length) + list.length) % list.length; chips[j].focus(); if (touring) stopTour(); choose(j); }); }); card.addEventListener('pointerenter', (e) => { if (e.pointerType === 'mouse') hold('mouse', true); }); card.addEventListener('pointerleave', (e) => { if (e.pointerType === 'mouse') hold('mouse', false); }); let letGo = null; card.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; if (letGo) letGo.kill(); hold('touch', true); }); const lift = (e) => { if (e.pointerType === 'mouse' || !holds.has('touch')) return; if (letGo) letGo.kill(); /* on a phone the wider mat stays a moment after the finger, so the change can be seen */ letGo = gsap.delayedCall(1.4, () => hold('touch', false)); }; addEventListener('pointerup', lift); addEventListener('pointercancel', lift); card.addEventListener('focusin', (e) => { if (e.target.matches(':focus-visible')) hold('focus', true); }); card.addEventListener('focusout', (e) => { if (!card.contains(e.relatedTarget)) hold('focus', false); }); /* the tour of the preview: the mat widens, the format goes up, down to the smallest, back to the first, and the mat closes: the card ends as it began */ function stopTour() { if (touring) touring.kill(); touring = null; hold('tour', false); } function tour() { const start = current; const order = []; for (let k = 1; k <= list.length; k++) order.push((start + k) % list.length); const tl = gsap.timeline({ onComplete: () => { touring = null; } }); touring = tl; tl.call(() => hold('tour', true)); tl.to({}, { duration: 1.5 }); order.forEach((i) => { tl.call(() => choose(i)); tl.to({}, { duration: 2.1 }); }); tl.call(() => hold('tour', false)); tl.to({}, { duration: 1.2 }); } /* ---------------------------------------------------------------- sizes */ function refit() { measure(); draw(); } new ResizeObserver(refit).observe(wall); addEventListener('resize', refit); document.fonts?.ready.then(refit); /* ---------------------------------------------------------------- the start: the print comes in tight in its frame, the mat opens around it, the dimensions grow out of their middle, the words come up */ markChips(false); refit(); if (!REDUCED) { gsap.from(frameEl, { opacity: 0, duration: 0.45, ease: 'power1.out' }); gsap.delayedCall(0.3, () => { mat.t = over ? matOver : matRest; wake(); }); gsap.to(reveal, { r: 1, duration: 0.9, delay: 0.75, ease: 'power2.inOut', onUpdate: draw }); const rows = [...card.querySelectorAll('.kind, .head, .artist, .foot')]; gsap.from(rows, { opacity: 0, y: 8, duration: 0.7, ease: 'power3.out', stagger: 0.07, delay: 0.35, clearProps: 'transform' }); gsap.fromTo(words[0], { w: -0.6 }, { w: 0, duration: 1.1, delay: 0.45, ease: 'power3.out', onUpdate: () => paintWord(words[0]) }); wake(); } })();