/* The punch card The loyalty card of a small coffee roaster, on cream paper. Every cup bought, the card is punched: the punch bites the next printed coffee bean out of the card. The card dips under the press, towards the bean, and springs back a pixel past rest; the little paper bean is pushed out of the back of the card, so you see it through its own hole, in the card's shadow, falling away from the page and tumbling out from under the card's edge, turning over as it goes. Through every hole you see the page with the card's own shadow in it: the paper is cut by an SVG mask and its shadow is a drop-shadow of the cut paper, so the shadow falls into the holes by itself and grows when the card lifts under the pointer. Undo brings the bean back up from under the card and fits it into its hole. When the card is full it is redeemed with a stamp in the accent ink, and a fresh card is dealt in its place. The card's press and lift are two springs worked out on GSAP's ticker; the beans are bodies with gravity and spin, on the same ticker, which lets go when nothing moves. */ /* ---- valori da cambiare ---- */ const CUPS = 10; /* how many cups fill the card, in two rows (from 6 to 12) */ const PUNCHED = 6; /* how many cups are already punched when the card opens */ const PRESS = 5; /* how far the card dips under the punch, in degrees */ const SPRING = [260, 0.36]; /* the card's spring: how stiff, and how much it is held back (1 = no bounce) */ const GRAVITY = 1600; /* how fast a punched bean falls, in pixels per second squared */ const LIFT = 5; /* how far the card lifts off the page under the pointer, in pixels */ const SLANT = -14; /* the angle of the beans printed on the card, in degrees */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; const root = document.querySelector('[data-loyalty]'); const deal = root.querySelector('[data-deal]'); const tilt = root.querySelector('[data-tilt]'); const card = root.querySelector('[data-card]'); const paper = root.querySelector('[data-paper]'); const holesEl = root.querySelector('[data-holes]'); const beansEl = root.querySelector('[data-beans]'); const stamp = root.querySelector('[data-stamp]'); const stampDate = root.querySelector('[data-stamp-date]'); const chadsEl = root.querySelector('[data-chads]'); const headline = root.querySelector('[data-headline]'); const numEl = root.querySelector('[data-num]'); const restEl = root.querySelector('[data-rest]'); const labelEl = root.querySelector('[data-label]'); const undoBtn = root.querySelector('[data-undo]'); const hint = root.querySelector('[data-hint]'); const live = root.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 rand = (a, b) => a + Math.random() * (b - a); /* ---------------------------------------------------------------- the values, made safe */ const cups = Math.round(clamp(num(CUPS, 10), 6, 12)); const press = clamp(num(PRESS, 5), 0, 14); const stiff = clamp(num(SPRING[0], 260), 40, 900); const damp = clamp(num(SPRING[1], 0.36), 0.12, 1.5); const gravity = clamp(num(GRAVITY, 1600), 200, 6000); const lift = clamp(num(LIFT, 5), 0, 16); const slant = clamp(num(SLANT, -14), -60, 60); const WORDS = ['No', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']; const NTH = ['', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth', 'eleventh', 'twelfth', 'thirteenth']; headline.textContent = `${WORDS[cups]} cups, the ${NTH[cups + 1]} is on us.`; /* ---------------------------------------------------------------- the printed beans, in the card's 320 x 420 */ const cols = Math.ceil(cups / 2); const pitch = Math.min(56, 272 / cols); const k = Math.min(1, pitch / 54); const rows = [283, 347]; const RX = 12.4 * k; const RY = 17.2 * k; const OVAL = `M0 ${-RY}A${RX} ${RY} 0 1 1 0 ${RY}A${RX} ${RY} 0 1 1 0 ${-RY}Z`; const CREASE = `M${-1.2 * k} ${-13.6 * k}C${-7 * k} ${-4.5 * k} ${7 * k} ${4.5 * k} ${1.2 * k} ${13.6 * k}`; const spots = []; for (let i = 0; i < cups; i++) { const r = i < cols ? 0 : 1; const c = r ? i - cols : i; const inRow = r ? cups - cols : cols; spots.push({ x: 160 + (c - (inRow - 1) / 2) * pitch, y: rows[r] }); } const beans = spots.map((p, i) => { const g = document.createElementNS(NS, 'g'); g.setAttribute('class', `bean${i === cups - 1 ? ' is-gift' : ''}`); g.setAttribute('transform', `translate(${p.x.toFixed(2)} ${p.y}) rotate(${slant})`); g.innerHTML = ``; beansEl.appendChild(g); return g; }); const holes = spots.map((p) => { const h = document.createElementNS(NS, 'path'); h.setAttribute('d', OVAL); h.setAttribute('fill', '#000'); h.setAttribute('transform', `translate(${p.x.toFixed(2)} ${p.y}) rotate(${slant})`); h.style.fillOpacity = '0'; holesEl.appendChild(h); return h; }); gsap.set(stamp, { x: 160, y: 315, rotation: -7, transformOrigin: '50% 50%', scale: 1 }); try { stampDate.textContent = new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }); } catch (e) { /* the date printed in the HTML stays */ } /* ---------------------------------------------------------------- the state */ let count = Math.round(clamp(num(PUNCHED, 6), 0, cups)); let state = count >= cups ? 'full' : 'punching'; /* punching, full, redeemed */ const punched = spots.map((_, i) => i < count); punched.forEach((on, i) => { holes[i].style.fillOpacity = on ? '1' : '0'; }); /* ---------------------------------------------------------------- the card's two springs: the press and the lift */ const P = { x: 0, v: 0, t: 0 }; const L = { x: 0, v: 0, t: 0 }; const aim = { x: 0, y: 0 }; let S = 1; /* pixels per unit of the card's 320 x 420 */ let cardH = 420; function measure() { S = card.clientWidth / 320; cardH = card.clientHeight; } function aimAt(i) { const p = spots[clamp(i, 0, cups - 1)]; aim.x = (p.x - 160) / 160; aim.y = (p.y - 210) / 210; } function aimCentre() { aim.x = 0; aim.y = 0.5; } function paint() { const p = P.x; const l = L.x; tilt.style.transform = `translate3d(0, ${(-lift * l).toFixed(2)}px, ${(-7 * p).toFixed(2)}px) rotateX(${(-aim.y * press * p).toFixed(3)}deg) rotateY(${(aim.x * press * p).toFixed(3)}deg)`; const oy = clamp(4 + 0.9 * lift * l - 3 * p, 0.5, 30); const blur = clamp(6 + 1.6 * lift * l - 4 * p, 1, 40); /* a tight shadow that draws the edge of every hole, and a soft one that says how high the card is */ const near = clamp(1.4 + 0.25 * lift * l - 1 * p, 0.4, 6); paper.style.filter = `drop-shadow(0 ${near.toFixed(2)}px ${(near * 0.8).toFixed(2)}px rgba(52, 36, 18, 0.26)) drop-shadow(0 ${oy.toFixed(2)}px ${blur.toFixed(2)}px rgba(52, 36, 18, ${(0.13 + 0.03 * l).toFixed(3)}))`; } /* ---------------------------------------------------------------- the beans that fall out of the back */ const chads = []; function makeChad(i) { const svg = document.createElementNS(NS, 'svg'); svg.setAttribute('class', 'chad is-under'); svg.setAttribute('viewBox', '-22 -22 44 44'); svg.innerHTML = ``; chadsEl.appendChild(svg); const c = { i, el: svg, x: spots[i].x * S, y: spots[i].y * S, vx: 0, vy: 0, rot: 0, vr: 0, flip: 0, vf: 0, depth: 1, alpha: 1, mode: 'fall', t: 0 }; chads.push(c); return c; } function dropChad(c) { c.el.remove(); const j = chads.indexOf(c); if (j >= 0) chads.splice(j, 1); } function drawChad(c) { const size = 44 * S; const cos = Math.cos(c.flip); c.el.style.width = `${size}px`; c.el.style.height = `${size}px`; c.el.style.opacity = clamp(c.alpha, 0, 1).toFixed(3); c.el.style.transform = `translate(${(c.x - size / 2).toFixed(2)}px, ${(c.y - size / 2).toFixed(2)}px) rotate(${c.rot.toFixed(2)}deg) scale(${c.depth.toFixed(4)}, ${(c.depth * (Math.abs(cos) < 0.06 ? 0.06 * Math.sign(cos || 1) : cos)).toFixed(4)})`; c.el.classList.toggle('is-back', cos < 0); /* while it is behind the card it is in the card's shadow */ c.el.classList.toggle('is-under', c.y - 4 * S < cardH); } /* ---------------------------------------------------------------- the ticker: springs and beans */ let running = false; function step(time, deltaMs) { const dt = Math.min((deltaMs || 16.7) / 1000, 1 / 30); const n = 4; const h = dt / n; const c2 = 2 * Math.sqrt(stiff) * damp; const kl = stiff * 0.55; const cl = 2 * Math.sqrt(kl) * 0.72; for (let s = 0; s < n; s++) { P.v += (stiff * (P.t - P.x) - c2 * P.v) * h; P.x += P.v * h; L.v += (kl * (L.t - L.x) - cl * L.v) * h; L.x += L.v * h; } for (let j = chads.length - 1; j >= 0; j--) { const c = chads[j]; if (c.mode === 'fall') { c.t += dt; c.vy += gravity * S * dt; c.vx *= 1 - 0.6 * dt; c.x += c.vx * dt; c.y += c.vy * dt; c.rot += c.vr * dt; c.flip += c.vf * dt; /* it moves away from the card as it falls behind it */ c.depth = 1 - 0.08 * clamp(c.t / 0.18, 0, 1); const below = c.y - cardH; if (below > 0) c.alpha = 1 - below / (30 * S); if (c.alpha <= 0) { dropChad(c); continue; } } drawChad(c); } paint(); const still = Math.abs(P.t - P.x) < 0.001 && Math.abs(P.v) < 0.005 && Math.abs(L.t - L.x) < 0.001 && Math.abs(L.v) < 0.005; if (still && !chads.length) { P.x = P.t; P.v = 0; L.x = L.t; L.v = 0; paint(); gsap.ticker.remove(step); running = false; } } function wake() { if (REDUCED || running) return; running = true; gsap.ticker.add(step); } /* ---------------------------------------------------------------- the words */ const word = { w: 640 }; const paintWord = () => { numEl.style.fontVariationSettings = `'wght' ${word.w.toFixed(1)}, 'wdth' 92`; }; function words() { if (state === 'punching') { const left = cups - count; return { num: WORDS[left], rest: left === 1 ? ' cup to go' : ' cups to go', label: 'Punch a cup', hint: 'Press the card to punch a cup', say: `${WORDS[left]} ${left === 1 ? 'cup' : 'cups'} to go` }; } if (state === 'full') return { num: 'This one', rest: ' is on us', label: 'Redeem the free coffee', hint: 'Press the card to redeem it', say: 'The card is full. This coffee is on us' }; return { num: 'Enjoy it.', rest: ' Thank you', label: 'Start a new card', hint: 'Press the card for a new one', say: 'Redeemed. Enjoy it' }; } function writeWords(animate) { const w = words(); labelEl.textContent = w.label; hint.textContent = w.hint; undoBtn.hidden = !(count > 0 && state !== 'redeemed'); const same = numEl.textContent === w.num && restEl.textContent === w.rest; if (same) return; gsap.killTweensOf([numEl, restEl, word]); if (!animate) { numEl.textContent = w.num; restEl.textContent = w.rest; gsap.set([numEl, restEl], { clearProps: 'opacity,transform' }); word.w = 640; paintWord(); return; } if (REDUCED) { gsap.to(numEl, { opacity: 0, duration: 0.12, onComplete: () => { numEl.textContent = w.num; restEl.textContent = w.rest; gsap.to(numEl, { opacity: 1, duration: 0.25 }); } }); return; } const tl = gsap.timeline(); tl.to(numEl, { yPercent: -60, opacity: 0, duration: 0.16, ease: 'power2.in' }); tl.call(() => { numEl.textContent = w.num; restEl.textContent = w.rest; }); tl.fromTo(numEl, { yPercent: 70, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.5, ease: 'back.out(2.4)' }); tl.fromTo(word, { w: 800 }, { w: 640, duration: 0.7, ease: 'power3.out', onUpdate: paintWord }, '<'); } /* ---------------------------------------------------------------- the actions */ let held = false; function kick(amount) { if (REDUCED) return; P.t = 0; P.v += amount; wake(); } function punchNext() { const i = count; if (i >= cups) return; count += 1; punched[i] = true; aimAt(i); beans[i].classList.remove('is-next'); if (REDUCED) { gsap.to(holes[i].style, { fillOpacity: 1, duration: 0.3, ease: 'power1.out' }); } else { gsap.killTweensOf(holes[i].style); holes[i].style.fillOpacity = '1'; const c = makeChad(i); c.vx = rand(-34, 34) * S; c.vy = rand(30, 80) * S; c.vr = rand(-260, 260); c.vf = rand(9, 15) * (Math.random() < 0.5 ? -1 : 1); drawChad(c); wake(); } if (count >= cups) state = 'full'; markNext(); writeWords(true); live.textContent = words().say; } function undo() { if (count <= 0 || state === 'redeemed') return; const i = count - 1; count = i; punched[i] = false; state = 'punching'; markNext(); writeWords(true); live.textContent = `Undone. ${words().say}`; if (REDUCED) { gsap.to(holes[i].style, { fillOpacity: 0, duration: 0.3, ease: 'power1.out' }); return; } /* the bean comes back up from under the card (from where it is, if it is still falling) and fits into its hole */ let c = chads.find((d) => d.i === i); if (!c) { c = makeChad(i); c.x = spots[i].x * S + rand(-26, 26) * S; c.y = cardH + 24 * S; c.alpha = 0; c.flip = Math.PI * 3; c.rot = rand(-120, 120); c.depth = 0.92; } c.mode = 'back'; gsap.killTweensOf(c); const tl = gsap.timeline({ onComplete: () => { holes[i].style.fillOpacity = '0'; dropChad(c); aimAt(i); kick(-5); } }); tl.to(c, { alpha: 1, duration: 0.15, ease: 'none' }, 0); tl.to(c, { x: spots[i].x * S, duration: 0.55, ease: 'power2.out' }, 0); tl.to(c, { y: spots[i].y * S, duration: 0.55, ease: 'power3.out' }, 0); tl.to(c, { flip: 0, rot: 0, duration: 0.55, ease: 'power2.out' }, 0); tl.to(c, { depth: 1, duration: 0.2, ease: 'power2.in' }, 0.35); wake(); } function redeem() { state = 'redeemed'; writeWords(true); live.textContent = words().say; aimCentre(); if (REDUCED) { gsap.to(stamp, { opacity: 0.92, duration: 0.3 }); return; } gsap.killTweensOf(stamp); const tl = gsap.timeline(); tl.fromTo(stamp, { opacity: 0, scale: 1.45, rotation: -13 }, { opacity: 0.93, scale: 1, rotation: -7, duration: 0.26, ease: 'power4.in' }); tl.call(() => kick(12)); tl.to(stamp, { scale: 1.015, duration: 0.08, ease: 'power1.out' }); tl.to(stamp, { scale: 1, duration: 0.4, ease: 'elastic.out(1, 0.5)' }); } function reset() { chads.slice().forEach(dropChad); count = 0; state = 'punching'; punched.fill(false); holes.forEach((h) => { gsap.killTweensOf(h.style); h.style.fillOpacity = '0'; }); gsap.set(stamp, { opacity: 0 }); markNext(); } let dealing = null; function newCard() { if (dealing) return; if (REDUCED) { dealing = gsap.timeline({ onComplete: () => { dealing = null; } }); dealing.to(deal, { opacity: 0, duration: 0.2 }); dealing.call(() => { reset(); writeWords(false); live.textContent = `A new card. ${words().say}`; }); dealing.to(deal, { opacity: 1, duration: 0.3 }); return; } dealing = gsap.timeline({ onComplete: () => { dealing = null; } }); dealing.to(deal, { y: 26 * S, rotation: 3, opacity: 0, duration: 0.34, ease: 'power2.in' }); dealing.call(() => { reset(); writeWords(false); live.textContent = `A new card. ${words().say}`; }); dealing.fromTo(deal, { y: -18 * S, rotation: -2, opacity: 0 }, { y: 0, rotation: 0, opacity: 1, duration: 0.7, ease: 'back.out(1.6)', clearProps: 'transform,opacity' }); } function act() { if (dealing) return; if (state === 'punching') punchNext(); else if (state === 'full') redeem(); else newCard(); } /* ---------------------------------------------------------------- aiming: the next bean shows itself */ function markNext() { beans.forEach((b, i) => { b.classList.toggle('is-next', state === 'punching' && i === count); b.style.visibility = punched[i] ? 'hidden' : ''; }); } const aims = new Set(); function aiming(src, on) { if (on) aims.add(src); else aims.delete(src); const now = aims.size > 0; card.classList.toggle('is-aiming', now); L.t = now ? 1 : 0; wake(); } /* ---------------------------------------------------------------- input */ card.addEventListener('click', () => { const wasHeld = held; held = false; if (state === 'punching') aimAt(count); else aimCentre(); if (wasHeld) { /* the card was already down under the finger: it comes back up past rest */ P.t = 0; wake(); act(); } else { /* a key or a script: the press and the release in one */ kick(16); if (REDUCED) act(); else gsap.delayedCall(0.07, act); } }); card.addEventListener('pointerdown', (e) => { if (e.button !== 0 || dealing) return; held = true; if (state === 'punching') aimAt(count); else aimCentre(); if (e.pointerType !== 'mouse') aiming('touch', true); if (!REDUCED) { P.t = 0.75; wake(); } }); const letGo = (e) => { if (!held) return; if (e.type !== 'pointerup') held = false; P.t = 0; wake(); if (e.pointerType && e.pointerType !== 'mouse') gsap.delayedCall(0.6, () => aiming('touch', false)); }; card.addEventListener('pointerup', letGo); card.addEventListener('pointercancel', letGo); card.addEventListener('pointerleave', (e) => { if (held) letGo(e); held = false; }); card.addEventListener('pointerenter', (e) => { if (e.pointerType === 'mouse') aiming('mouse', true); }); card.addEventListener('pointerleave', (e) => { if (e.pointerType === 'mouse') aiming('mouse', false); }); card.addEventListener('focus', () => { if (card.matches(':focus-visible')) aiming('focus', true); }); card.addEventListener('blur', () => aiming('focus', false)); undoBtn.addEventListener('click', (e) => { e.stopPropagation(); undo(); if (undoBtn.hidden) card.focus(); }); root.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); undo(); } }); /* ---------------------------------------------------------------- sizes */ function refit() { const old = S; measure(); if (old !== S) chads.forEach((c) => { c.x *= S / old; c.y *= S / old; c.vx *= S / old; c.vy *= S / old; drawChad(c); }); } new ResizeObserver(refit).observe(card); addEventListener('resize', refit); /* ---------------------------------------------------------------- the start: the card is dealt onto the page */ measure(); markNext(); writeWords(false); paint(); if (!REDUCED) { gsap.from(deal, { y: 22, rotation: 2, opacity: 0, duration: 0.9, ease: 'back.out(1.5)', clearProps: 'transform,opacity' }); gsap.from(hint, { opacity: 0, y: 6, duration: 0.6, delay: 0.45, ease: 'power3.out', clearProps: 'transform,opacity' }); gsap.fromTo(numEl, { yPercent: 70, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.6, delay: 0.5, ease: 'back.out(2.4)' }); } })();