/* The card field The card fields of a checkout (number, expiry date, security code, name), with the card they describe drawn above them. Every figure typed is struck into the plastic: it stands up in relief with a little kick of the card, lit by a small lamp that follows the caret, so the relief catches the light from the side the lamp is on. The first figures say the network, and the card takes its material behind a band of light: brushed graphite, ink blue, verdigris or garnet. A full number is read by the light from right to left, the way the Luhn check reads it, with every second figure lifting as it is counted twice: if it adds up a tick draws itself, if not the figures sag and the field says so. The card turns over for the security code (except on the cards that print it on the front), an expired date greys the material, and once paid the figures sink back into the plastic, all but the last four. The relief is an SVG filter: the alpha of the figures is a height map, lit by feDiffuseLighting and feSpecularLighting with a point light that is the lamp, plus a shadow cast away from it. The card and the lamp move on springs worked out by hand on GSAP's ticker. The fields underneath are real inputs, formatted as you type with the caret kept in place. The networks and their marks are invented: put the real ones in a shop. */ /* ---- values to change ---- */ const AMOUNT = '$64.00'; /* what the button charges */ const STRIKE = 3.4; /* how far the card kicks back when a figure is struck near its edge, in degrees */ const FOIL = 0.4; /* the seconds the foil takes to run into a figure just struck */ const LAMP = [70, 0.78]; /* the lamp's spring: how stiff, and how much it is held back (1 = no bounce) */ const TURN = [95, 0.62]; /* the spring that turns the card over for the security code */ const READ = 0.95; /* the seconds the light takes to read the number from right to left (the Luhn check) */ const WAIT = 1.5; /* the seconds the bank takes to answer, in the demo */ const HOLD = 3.4; /* the seconds the paid card stays before the form empties again */ const SAMPLE = '4242 4242 4242 4242'; /* the test number the library's preview types by itself */ const HOLDER = 'Ines Okafor'; /* the name the preview types */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; const W = 428; /* the card, in the units of its drawing (85.6 by 54 millimetres, times five) */ const H = 270; const form = document.querySelector('[data-pay]'); const stage = form.querySelector('[data-stage]'); const card = form.querySelector('[data-card]'); const front = card.querySelector('[data-face="front"]'); const back = card.querySelector('[data-face="back"]'); const shadowEl = form.querySelector('[data-shadow]'); const lampEls = [...card.querySelectorAll('[data-lamp]')]; const glintEls = [...card.querySelectorAll('[data-glint]')]; const matBoxes = [...card.querySelectorAll('[data-mats]')]; const lights = [...card.querySelectorAll('[data-light]')]; const castEl = card.querySelector('[data-cast]'); const numberG = card.querySelector('[data-number]'); const expG = card.querySelector('[data-exp]'); const nameG = card.querySelector('[data-name]'); const frontCode = card.querySelector('[data-frontcode]'); const codeG = card.querySelector('[data-code]'); const markBoxes = [...card.querySelectorAll('[data-marks]')]; const printEl = card.querySelector('[data-print]'); const KEYS = ['number', 'exp', 'code', 'name']; const inputs = {}; const fields = {}; KEYS.forEach((k) => { inputs[k] = form.querySelector(`[data-input="${k}"]`); fields[k] = inputs[k].closest('.field'); }); const tickPath = form.querySelector('[data-tick] path'); const badgeBox = form.querySelector('[data-badge]'); const hintCard = form.querySelector('[data-hint-card]'); const note = form.querySelector('[data-note]'); const go = form.querySelector('[data-go]'); const goLabel = form.querySelector('[data-go-label]'); const waitEl = form.querySelector('[data-wait]'); const spin = form.querySelector('[data-spin]'); const doneEl = form.querySelector('[data-done]'); const said = form.querySelector('[data-said]'); const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const digitsOf = (s) => String(s).replace(/\D/g, ''); goLabel.textContent = `${goLabel.textContent.trim()} ${AMOUNT}`; let state = 'idle'; /* idle, paying, paid */ let active = null; /* the field being typed in: number, exp, code, name, or null */ let pretend = false; /* the library's preview types without taking the focus */ /* ---------------------------------------------------------------- the networks (invented, on the real prefixes) */ const NETS = { blank: { name: '', len: 16, max: 19, groups: [4, 4, 4, 4, 3], code: 3, tip: 'graphite' }, atrium: { name: 'Atrium', test: /^3[47]/, len: 15, max: 15, groups: [4, 6, 5], code: 4, front: true, tip: 'silver' }, orbit: { name: 'Orbit', test: /^4/, len: 16, max: 19, groups: [4, 4, 4, 4, 3], code: 3, tip: 'silver' }, strata: { name: 'Strata', test: /^(5[1-5]|222[1-9]|22[3-9]|2[3-6]|27[01]|2720)/, len: 16, max: 16, groups: [4, 4, 4, 4], code: 3, tip: 'gold' }, kite: { name: 'Kite', test: /^(6011|64[4-9]|65)/, len: 16, max: 19, groups: [4, 4, 4, 4, 3], code: 3, tip: 'gold' }, }; const ORDER = ['atrium', 'orbit', 'strata', 'kite']; const detect = (d) => ORDER.find((k) => NETS[k].test.test(d)) || 'blank'; /* the emblems, in a box of 24 */ const EMBLEM = { orbit: '', strata: '', atrium: '', kite: '', }; /* the colours live in the CSS (read when they are needed, so they can change while the page runs) */ const css = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim(); const rgb = (hex) => { let h = hex.replace('#', ''); if (h.length === 3) h = [...h].map((c) => c + c).join(''); return /^[0-9a-f]{6}$/i.test(h) ? [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) : null; }; /* a figure just struck is the colour of the plastic (the foil comes after): halfway between the material's two */ function blindOf(k) { const a = rgb(css(`--${k}-a`)); const b = rgb(css(`--${k}-b`)); return a && b ? `rgb(${a.map((v, i) => Math.round((v + b[i]) / 2)).join(', ')})` : css(`--${k}-b`); } /* the foil: tweened to the colour of now, then left on the variable */ function foil(f, tip, vars) { gsap.to(f.t, { fill: css(`--${tip}`), ...vars, onComplete: () => (f.t.style.fill = `var(--${tip})`) }); } /* ---------------------------------------------------------------- Luhn */ function luhn(d) { let sum = 0; for (let i = d.length - 1, twice = false; i >= 0; i--, twice = !twice) { let n = +d[i]; if (twice) { n *= 2; if (n > 9) n -= 9; } sum += n; } return d.length > 0 && sum % 10 === 0; } /* ---------------------------------------------------------------- the card's drawing: marks, materials, badges */ function svg(tag, attrs, parent) { const el = document.createElementNS(NS, tag); Object.entries(attrs || {}).forEach(([k, v]) => el.setAttribute(k, v)); if (parent) parent.append(el); return el; } const marks = {}; markBoxes.forEach((box, side) => { ORDER.forEach((k) => { const n = NETS[k]; const g = svg('g', { class: `mark tint--${n.tip}`, transform: side ? 'translate(366 216) scale(0.74)' : 'translate(368 214)' }, box); g.innerHTML = `${EMBLEM[k]}${n.name.toLowerCase()}`; (marks[k] = marks[k] || []).push(g); }); }); /* the brushed graphite: thousands of hairlines along the card, drawn once on a canvas */ function brushed() { const c = document.createElement('canvas'); c.width = 856; c.height = 540; const g = c.getContext('2d'); let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647; for (let i = 0; i < 2600; i++) { const y = rnd() * 540; const x0 = rnd() * 1056 - 200; const a = rnd() * 0.13; g.strokeStyle = rnd() < 0.5 ? `rgba(255,255,255,${a.toFixed(3)})` : `rgba(0,0,0,${a.toFixed(3)})`; g.lineWidth = 0.6 + rnd() * 1.3; g.beginPath(); g.moveTo(x0, y); g.lineTo(x0 + 120 + rnd() * 700, y + (rnd() - 0.5) * 0.8); g.stroke(); } return c; } /* the ink blue: layers of soft waves, the strata of its name */ function waves() { const s = svg('svg', { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: 'none' }); for (let i = 0; i < 14; i++) { let d = ''; for (let x = -10; x <= W + 10; x += 8) { const y = 40 + i * 17 + 9 * Math.sin(x / 61 + i * 0.55) + 5 * Math.sin(x / 23 - i); d += `${d ? 'L' : 'M'}${x} ${y.toFixed(1)}`; } svg('path', { d, fill: 'none', stroke: 'rgba(170, 200, 255, 0.11)', 'stroke-width': 1.1 }, s); } return s; } const mats = {}; matBoxes.forEach((box) => { ['blank', ...ORDER].forEach((k) => { const el = document.createElement('div'); el.className = `mat mat--${k}${k === 'blank' ? ' is-on' : ''}`; if (k === 'orbit') el.append(brushed()); if (k === 'strata') el.append(waves()); box.append(el); (mats[k] = mats[k] || []).push(el); }); }); const badges = {}; ['blank', ...ORDER].forEach((k) => { const el = document.createElement('span'); el.className = `badge badge--${k}`; if (k === 'blank') el.innerHTML = ''; else { el.style.background = `linear-gradient(135deg, var(--${k}-a), var(--${k}-b))`; el.innerHTML = ``; } badgeBox.append(el); badges[k] = el; }); gsap.set(badges.blank, { opacity: 1 }); /* ---------------------------------------------------------------- the springs: the card, its turn, and the lamp */ const body = { rx: 0, vrx: 0, ry: 0, vry: 0, z: 0, vz: 0, turn: 0, vturn: 0 }; let turnTo = 0; const REST = { x: 70, y: 6, z: 230 }; const lamp = { x: REST.x, y: REST.y, z: REST.z, vx: 0, vy: 0, vz: 0 }; const aim = { x: REST.x, y: REST.y, z: REST.z }; function spring(o, key, to, k, damp, h) { const v = `v${key}`; o[v] += ((to - o[key]) * k - o[v] * 2 * Math.sqrt(k) * damp) * h; o[key] += o[v] * h; } /* a figure struck at (x, y) of the card: the card kicks back around the point it was hit */ function kick(x, y, k = 1) { if (REDUCED || !STRIKE) return; const sx = (x - W / 2) / (W / 2); const sy = (y - H / 2) / (H / 2); body.vry += STRIKE * 24 * sx * k; body.vrx -= STRIKE * 15 * (0.35 + sy) * k; body.vz -= STRIKE * 70 * k; } let drawn = ''; let shown = null; function draw() { const key = `${body.rx.toFixed(2)} ${body.ry.toFixed(2)} ${body.z.toFixed(1)} ${body.turn.toFixed(2)} ${lamp.x.toFixed(1)} ${lamp.y.toFixed(1)} ${lamp.z.toFixed(1)}`; if (key === drawn) return; drawn = key; card.style.transform = `translateZ(${body.z.toFixed(1)}px) rotateX(${body.rx.toFixed(2)}deg) rotateY(${(body.ry + body.turn).toFixed(2)}deg)`; /* the face turned away is hidden by the script too, the moment the card is edge on (Safari does not always hide it by itself) */ const away = Math.cos((body.turn * Math.PI) / 180) < 0; if (away !== shown) { shown = away; front.style.visibility = away ? 'hidden' : ''; back.style.visibility = away ? '' : 'hidden'; } lights.forEach((l) => { l.setAttribute('x', lamp.x.toFixed(1)); l.setAttribute('y', lamp.y.toFixed(1)); l.setAttribute('z', lamp.z.toFixed(1)); }); /* the figures cast their little shadow away from the lamp */ const dx = 214 - lamp.x; const dy = 180 - lamp.y; const len = Math.hypot(dx, dy, lamp.z * 0.6) || 1; castEl.setAttribute('dx', ((dx / len) * 1.8).toFixed(2)); castEl.setAttribute('dy', ((dy / len) * 1.8 + 0.4).toFixed(2)); /* the pool on the material: small and bright when the lamp is low, wide and soft when it is high */ const low = clamp(1 - (lamp.z - 40) / 220, 0, 1); lampEls.forEach((el) => { el.style.setProperty('--lx', `${((lamp.x / W) * 100).toFixed(1)}%`); el.style.setProperty('--ly', `${((lamp.y / H) * 100).toFixed(1)}%`); el.style.setProperty('--pool', (0.55 + 0.75 * low).toFixed(3)); el.style.setProperty('--pw', `${(70 - 34 * low).toFixed(1)}%`); el.style.setProperty('--ph', `${(110 - 40 * low).toFixed(1)}%`); }); /* the card's shadow on the page falls away from the lamp, and spreads as the card is pushed back */ const edge = Math.abs(Math.sin((body.turn * Math.PI) / 180)); shadowEl.style.transform = `translate(${(((W / 2 - lamp.x) / (W / 2)) * 9).toFixed(1)}px, ${(10 - body.z * 0.15).toFixed(1)}px) scaleX(${(1 - edge * 0.12).toFixed(3)})`; } gsap.ticker.add((time, dt) => { const t = Math.min(dt, 1000 / 30) / 1000; if (REDUCED) { body.rx = body.ry = body.z = 0; body.turn = turnTo; lamp.x = aim.x; lamp.y = aim.y; lamp.z = aim.z; } else { /* small steps of 4 ms at most: a stiff spring on a slow frame would blow up */ const steps = Math.max(1, Math.ceil(t / 0.004)); const h = t / steps; for (let n = 0; n < steps; n++) { spring(body, 'rx', 0, 330, 0.36, h); spring(body, 'ry', 0, 330, 0.36, h); spring(body, 'z', 0, 260, 0.5, h); spring(body, 'turn', turnTo, TURN[0], TURN[1], h); spring(lamp, 'x', aim.x, LAMP[0], LAMP[1], h); spring(lamp, 'y', aim.y, LAMP[0], LAMP[1], h); spring(lamp, 'z', aim.z, LAMP[0], LAMP[1], h); } } draw(); }); /* ---------------------------------------------------------------- the figures on the card */ /* Martian Mono is 0.7 of its size wide at full width and 0.6 at its narrowest */ const advance = (size, stretch) => size * (0.6 + ((stretch - 75) / 25) * 0.1); /* the width and the size that fit a figure in a slot, narrowing before shrinking */ function fit(slot, size) { const stretch = clamp(75 + ((slot / size - 0.6) / 0.1) * 25, 75, 100); const small = slot < advance(size, 75) ? size * (slot / advance(size, 75)) : size; return { stretch, size: small }; } const LINE = { x: 34, y: 168, room: 360, gap: 12 }; function lineOf(n, count) { const total = Math.max(count, n.len); const groups = []; let left = total; n.groups.forEach((g) => { if (left > 0) groups.push(Math.min(g, left)); left -= g; }); if (left > 0) groups.push(left); const w = Math.min(21.5, (LINE.room - LINE.gap * (groups.length - 1)) / total); const xs = []; let x = LINE.x; groups.forEach((g, k) => { if (k) x += LINE.gap; for (let i = 0; i < g; i++) { xs.push(x + w / 2); x += w; } }); return { xs, w, ...fit(w - 1.8, 26) }; } const EXP = { x: 205, y: 202, size: 15.5 }; const NAME = { x: 34, y: 240, size: 15.5, room: 252 }; /* a figure: a group the script moves (x), with the letter inside that rises (scale, opacity) */ function figure(parent, ch, x, y, before) { const g = svg('g', { class: 'fig' }); const t = svg('text', { 'text-anchor': 'middle' }, g); t.textContent = ch; parent.insertBefore(g, before || null); gsap.set(g, { x, y }); return { g, t, ch }; } /* struck: the die hits and the figure stands up in the plastic's own colour, the card kicks, and then the foil runs into it, so a trail of bare figures follows the caret and turns silver or gold behind it */ function strike(f, delay = 0, k = 1) { gsap.killTweensOf(f.t); const tip = NETS[net].tip; if (REDUCED) { f.t.style.fill = `var(--${tip})`; gsap.fromTo(f.t, { opacity: 0 }, { opacity: 1, duration: 0.2, delay }); return; } gsap.fromTo(f.t, { opacity: 0 }, { opacity: 1, duration: 0.09, ease: 'power1.out', delay }); gsap.fromTo(f.t, { scale: 1.3, y: -1.2 }, { scale: 1, y: 0, duration: 0.3, ease: 'back.out(1.7)', delay, transformOrigin: '50% 65%' }); gsap.set(f.t, { fill: blindOf(net) }); foil(f, tip, { duration: FOIL, ease: 'power2.inOut', delay: delay + 0.13 }); gsap.delayedCall(delay + 0.05, () => kick(gsap.getProperty(f.g, 'x'), gsap.getProperty(f.g, 'y'), k)); } /* sunk: the relief goes back into the plastic */ function sink(f, delay = 0, keep = false) { gsap.killTweensOf(f.t); const tw = { opacity: 0, duration: REDUCED ? 0.18 : 0.26, ease: 'power2.in', delay }; if (!REDUCED) Object.assign(tw, { scale: 0.86, transformOrigin: '50% 65%' }); if (!keep) tw.onComplete = () => f.g.remove(); return gsap.to(f.t, tw); } /* what changed between two strings: the same start, the same end, and the middle */ function diff(a, b) { let p = 0; while (p < a.length && p < b.length && a[p] === b[p]) p++; let q = 0; while (q < a.length - p && q < b.length - p && a[a.length - 1 - q] === b[b.length - 1 - q]) q++; return { p, gone: a.length - p - q, fresh: b.slice(p, b.length - q) }; } /* a row of struck letters (the number, the date, the name): what goes sinks, what comes is struck, the rest slides to its new place */ function row(st, g, text, place, k) { const { p, gone, fresh } = diff(st.shown, text); st.shown = text; st.figs.splice(p, gone).forEach((f, i) => sink(f, i * 0.02)); const before = st.figs[p] ? st.figs[p].g : null; const xs = place(text.length); const made = [...fresh].map((ch, i) => figure(g, ch, xs[p + i], st.y, before)); st.figs.splice(p, 0, ...made); slide(st.figs, xs); const wave = made.length > 1; made.filter((f) => f.ch !== ' ').forEach((f, i) => strike(f, wave ? i * 0.035 : 0, wave ? 0.4 * k : k)); } let net = 'blank'; const numberRow = { figs: [], shown: '', y: LINE.y }; const expRow = { figs: [], shown: '', y: EXP.y }; const nameRow = { figs: [], shown: '', y: NAME.y }; let nameFit = fit(NAME.room / 12, NAME.size); function numberPlace(count) { const lay = lineOf(NETS[net], count); numberG.style.fontStretch = `${lay.stretch.toFixed(1)}%`; numberG.style.fontSize = `${lay.size.toFixed(2)}px`; return lay.xs; } function slide(figs, xs) { figs.forEach((f, i) => { if (Math.abs(gsap.getProperty(f.g, 'x') - xs[i]) > 0.01) gsap.to(f.g, { x: xs[i], duration: REDUCED ? 0 : 0.42, ease: 'power3.inOut', overwrite: 'auto' }); }); } const relayNumber = () => slide(numberRow.figs, numberPlace(numberRow.figs.length)); const expSlot = advance(EXP.size, 100) + 0.4; const expPlace = (count) => Array.from({ length: count }, (_, i) => EXP.x + expSlot * (i + 0.5)); const nameSlot = () => advance(nameFit.size, nameFit.stretch) + 0.9; function namePlace(count) { /* a long name narrows to fit, as embossers do */ nameFit = fit(Math.min(12, NAME.room / Math.max(1, count)) - 0.9, NAME.size); nameG.style.fontStretch = `${nameFit.stretch.toFixed(1)}%`; nameG.style.fontSize = `${nameFit.size.toFixed(2)}px`; const slot = nameSlot(); return Array.from({ length: count }, (_, i) => NAME.x + slot * (i + 0.5)); } let printOn = false; function showPrint(on) { if (on === printOn) return; printOn = on; gsap.to(printEl, { opacity: on ? 1 : 0, duration: on ? 0.4 : 0.25, overwrite: true }); } /* the security code, printed: in the box on the back, or on the front above the number */ let codeFigs = []; let codeShown = ''; function showCode(text) { if (NETS[net].front) { if (text.length > codeShown.length && !REDUCED) gsap.fromTo(frontCode, { opacity: 0.3 }, { opacity: 1, duration: 0.3 }); frontCode.textContent = text; codeShown = text; return; } frontCode.textContent = ''; const { p, gone, fresh } = diff(codeShown, text); codeShown = text; codeFigs.splice(p, gone).forEach((f) => gsap.to(f.t, { opacity: 0, duration: 0.18, onComplete: () => f.g.remove() })); const made = [...fresh].map((ch, i) => { const f = figure(codeG, ch, 318 + (p + i) * 13.5, 127); if (REDUCED) gsap.fromTo(f.t, { opacity: 0 }, { opacity: 1, duration: 0.2 }); else gsap.fromTo(f.t, { opacity: 0, y: 5 }, { opacity: 1, y: 0, duration: 0.32, ease: 'back.out(2)' }); return f; }); codeFigs.splice(p, 0, ...made); codeFigs.forEach((f, i) => gsap.set(f.g, { x: 318 + i * 13.5 })); } /* ---------------------------------------------------------------- the network's material */ const allFigs = () => [...numberRow.figs, ...expRow.figs, ...nameRow.figs]; let sweeping = null; function setNet(k) { if (k === net) return; const from = net; net = k; /* a sweep still crossing the card stops where it is: the new one takes over */ if (sweeping) sweeping.kill(); sweeping = null; const n = NETS[k]; card.classList.toggle('is-blank', k === 'blank'); card.dataset.net = k; if (n.name) said.textContent = `${n.name} card`; /* the number lays itself out again (an Atrium number has three groups), and the security code moves between the back and the front */ relayNumber(); const code = codeShown; codeShown = ''; codeFigs.forEach((f) => f.g.remove()); codeFigs = []; const fitted = digitsOf(inputs.code.value).slice(0, n.code); if (fitted !== inputs.code.value) inputs.code.value = fitted; showCode(code.slice(0, n.code)); inputs.code.placeholder = `${n.code} digits`; gsap.to(hintCard, { rotationY: n.front ? 180 : 0, duration: REDUCED ? 0 : 0.55, ease: 'back.out(1.6)', overwrite: true }); if (active === 'code') turnOver(!n.front); /* the badge in the field turns like a coin */ gsap.to(badges[from], { opacity: 0, scale: 0.8, rotationY: REDUCED ? 0 : 90, duration: 0.16, ease: 'power2.in', overwrite: true }); gsap.fromTo(badges[k], { opacity: 0, scale: 0.8, rotationY: REDUCED ? 0 : -90 }, { opacity: 1, scale: 1, rotationY: 0, duration: REDUCED ? 0.2 : 0.45, ease: 'back.out(2)', delay: REDUCED ? 0 : 0.14, overwrite: true }); /* the marks on the card */ (marks[from] || []).forEach((m) => gsap.to(m, { opacity: 0, duration: 0.2, overwrite: true })); (marks[k] || []).forEach((m) => gsap.fromTo(m, { opacity: 0 }, { opacity: 1, duration: 0.5, delay: REDUCED ? 0 : 0.3, overwrite: true })); /* the material: the new one is uncovered behind a band of light that crosses the card */ if (REDUCED) { Object.keys(mats).forEach((key) => mats[key].forEach((el) => gsap.to(el, { opacity: key === k ? 1 : 0, duration: 0.3, overwrite: true }))); allFigs().forEach((f) => (f.t.style.fill = `var(--${n.tip})`)); return; } const dir = k === 'blank' ? -1 : 1; const sweep = { p: dir > 0 ? -25 : 125 }; const layers = mats[k]; Object.keys(mats).forEach((key) => mats[key].forEach((el) => { gsap.killTweensOf(el); el.style.webkitMaskImage = ''; el.style.maskImage = ''; el.style.zIndex = key === k ? 2 : key === from ? 1 : 0; el.style.opacity = key === k || key === from ? 1 : 0; })); /* the band changes the foil of every figure it crosses */ const crossed = new Set(); const paint = () => { const a = sweep.p; allFigs().forEach((f) => { if (crossed.has(f)) return; const at = (gsap.getProperty(f.g, 'x') / W) * 100; if (dir > 0 ? a < at : a > at) return; crossed.add(f); foil(f, n.tip, { duration: 0.25, overwrite: 'auto' }); }); const m = dir > 0 ? `linear-gradient(105deg, #000 ${(a - 9).toFixed(1)}%, transparent ${(a + 9).toFixed(1)}%)` : `linear-gradient(105deg, transparent ${(a - 9).toFixed(1)}%, #000 ${(a + 9).toFixed(1)}%)`; layers.forEach((el) => { el.style.webkitMaskImage = m; el.style.maskImage = m; }); glintEls.forEach((el) => el.style.setProperty('--gx', `${a.toFixed(1)}%`)); }; glintEls.forEach((el) => gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.16, overwrite: true })); sweeping = gsap.to(sweep, { p: dir > 0 ? 125 : -25, duration: 0.7, ease: 'power2.inOut', onStart: paint, onUpdate: paint, onComplete: () => { sweeping = null; layers.forEach((el) => { el.style.webkitMaskImage = ''; el.style.maskImage = ''; }); Object.keys(mats).forEach((key) => mats[key].forEach((el) => { el.style.zIndex = ''; el.style.opacity = key === k ? 1 : 0; })); glintEls.forEach((el) => gsap.to(el, { opacity: 0, duration: 0.2, overwrite: true })); }, }); } /* ---------------------------------------------------------------- the lamp: where it looks */ let reading = null; let hover = null; function setAim(x, y, z) { aim.x = x; aim.y = y; aim.z = z; } const caretIn = (k) => (inputs[k].selectionStart == null ? inputs[k].value.length : inputs[k].selectionStart); function aimLamp() { if (reading || state !== 'idle') return; if (active === 'number') { const n = digitsOf(inputs.number.value.slice(0, caretIn('number'))).length; const lay = lineOf(NETS[net], numberRow.figs.length); const x = n < lay.xs.length ? lay.xs[n] : lay.xs[lay.xs.length - 1] + lay.w; setAim(x - lay.w * 0.3, LINE.y - 22, 78); } else if (active === 'exp') setAim(EXP.x + expSlot * Math.min(5, expRow.shown.length), EXP.y - 15, 74); else if (active === 'name') setAim(NAME.x + nameSlot() * Math.min(nameRow.shown.length, caretIn('name')), NAME.y - 15, 84); else if (active === 'code') setAim(NETS[net].front ? 372 : 340, NETS[net].front ? 120 : 108, 64); else if (hover) setAim(hover.x, hover.y, 120); else setAim(REST.x, REST.y, REST.z); } function turnOver(toBack) { const was = turnTo; turnTo = toBack ? 180 : 0; if (REDUCED && was !== turnTo) gsap.fromTo(stage, { opacity: 0.2 }, { opacity: 1, duration: 0.3, clearProps: 'opacity' }); } /* ---------------------------------------------------------------- the line under the fields */ const ICONS = { help: '', wrong: '', right: '', }; const HELP = note.textContent.trim(); note.textContent = ''; let noteKey = ''; function setNote(kind, text) { const key = `${kind}|${text}`; if (key === noteKey) return; noteKey = key; const lineEl = document.createElement('span'); lineEl.className = `note__line is-${kind}`; if (ICONS[kind]) lineEl.insertAdjacentHTML('beforeend', ICONS[kind]); const words = document.createElement('span'); words.textContent = text; lineEl.append(words); const old = [...note.children]; old.forEach((o) => { o.classList.add('is-going'); gsap.to(o, { y: REDUCED ? 0 : -7, opacity: 0, duration: 0.14, ease: 'power2.in', overwrite: true, onComplete: () => o.remove() }); }); note.append(lineEl); gsap.fromTo(lineEl, { y: REDUCED ? 0 : 8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power3.out', delay: old.length ? 0.14 : 0 }); } /* ---------------------------------------------------------------- what each field says is wrong */ const errors = { number: '', exp: '', code: '', name: '' }; const today = new Date(); const thisYear = today.getFullYear() % 100; const thisMonth = today.getMonth() + 1; const BAD_NUMBER = 'That card number doesn’t add up. Check for a typo.'; function judge(k, final) { const v = inputs[k].value; const n = NETS[net]; if (k === 'number') { const d = digitsOf(v); if (!d) return final === 'submit' ? 'Enter the card number.' : ''; if (d.length < n.len) return final ? 'The card number is incomplete.' : ''; return luhn(d) ? '' : BAD_NUMBER; } if (k === 'exp') { const { mm, yy } = splitExp(v); if (!mm) return final === 'submit' ? 'Enter the expiry date.' : ''; if (mm.length === 2 && (+mm < 1 || +mm > 12)) return 'Months go from 01 to 12.'; if (yy.length < 2) return final ? 'The expiry date is incomplete.' : ''; if (+yy < thisYear || (+yy === thisYear && +mm < thisMonth)) return `This card expired in ${mm}/${yy}.`; if (+yy > thisYear + 20) return 'That expiry year is too far ahead.'; return ''; } if (k === 'code') { const d = digitsOf(v); if (!d) return final === 'submit' ? `Enter the ${n.code}-digit security code.` : ''; return d.length < n.code && final ? `The security code has ${n.code} digits.` : ''; } if (!v.trim()) return final === 'submit' ? 'Enter the name as it is printed on the card.' : ''; return ''; } /* an error shows when the field is left (or at once when it cannot be right), and goes as soon as it is fixed; the number's own verdict comes from the light that reads it */ function check(k, final) { const e = judge(k, final); const was = errors[k]; if (k === 'number' && !final && e && !was) return; errors[k] = e; paintErrors(); if (e && e !== was && final !== 'submit') shake([fields[k]]); } let expired = false; function paintErrors() { KEYS.forEach((k) => { fields[k].classList.toggle('is-wrong', !!errors[k]); inputs[k].setAttribute('aria-invalid', String(!!errors[k])); }); /* an expired card loses its colour and its shine, and its date sags */ const ex = errors.exp.startsWith('This card expired'); if (ex !== expired) { expired = ex; gsap.to(matBoxes, { filter: ex ? 'saturate(0.1) brightness(0.8)' : 'saturate(1) brightness(1)', duration: 0.6, overwrite: true }); gsap.to(lampEls, { opacity: ex ? 0.3 : 1, duration: 0.6, overwrite: true }); expRow.figs.forEach((f) => gsap.to(f.t, { opacity: ex ? 0.45 : 1, duration: 0.4, delay: ex ? 0.2 : 0, overwrite: 'auto' })); } sayNote(); } function sayNote() { if (state !== 'idle') return; const first = (active && errors[active]) || KEYS.map((k) => errors[k]).find(Boolean); setNote(first ? 'wrong' : 'help', first || HELP); } function shake(els) { if (REDUCED || !els.length) return; els.forEach((el, i) => gsap.to(el, { keyframes: { x: [0, -8, 7, -5, 3, 0] }, duration: 0.42, ease: 'power1.inOut', delay: i * 0.05, clearProps: 'transform' })); } /* ---------------------------------------------------------------- the number */ let numberOk = false; let numberNow = ''; let sagged = false; /* the figures of a number that does not add up sag into the plastic */ function formatNumber(d, n) { const parts = []; let i = 0; n.groups.forEach((g) => { if (i < d.length) parts.push(d.slice(i, i + g)); i += g; }); if (i < d.length) parts.push(d.slice(i)); return parts.join(' '); } /* where the caret goes: after the same number of figures it had before it */ function after(f, k) { if (k <= 0) return 0; let seen = 0; for (let i = 0; i < f.length; i++) { if (f[i] >= '0' && f[i] <= '9' && ++seen === k) return i + 1; } return f.length; } function numberInput() { const el = inputs.number; const raw = el.value; const before = digitsOf(raw.slice(0, caretIn('number'))).length; let d = digitsOf(raw); const k = detect(d); d = d.slice(0, NETS[k].max); const f = formatNumber(d, NETS[k]); if (f !== raw) { el.value = f; const at = after(f, Math.min(before, d.length)); if (document.activeElement === el) el.setSelectionRange(at, at); } fields.number.classList.toggle('is-filled', !!f); setNet(k); if (d !== numberNow && sagged) { sagged = false; numberRow.figs.forEach((fig) => gsap.to(fig.t, { opacity: 1, duration: 0.25, overwrite: 'auto' })); } row(numberRow, numberG, d, numberPlace, 1); if (d !== numberNow) { numberNow = d; if (reading) { reading.kill(); reading = null; } if (numberOk) setNumberOk(false); const n = NETS[k]; /* a complete number is read at once */ if (d.length === n.len || d.length === n.max) readNumber(d); else check('number', false); } aimLamp(); } /* deleting a space deletes the figure before it, or the space would come straight back */ function skipSeparators(e, el, sep) { if (e.inputType !== 'deleteContentBackward' && e.inputType !== 'deleteContentForward') return; const s = el.selectionStart; if (s == null || s !== el.selectionEnd) return; const v = el.value; let at; if (e.inputType === 'deleteContentBackward' && s > 0 && sep.test(v[s - 1])) { at = s - 1; while (at > 0 && sep.test(v[at - 1])) at--; at -= 1; } else if (e.inputType === 'deleteContentForward' && s < v.length && sep.test(v[s])) { at = s; while (at < v.length && sep.test(v[at])) at++; } else return; e.preventDefault(); if (at < 0 || at >= v.length) return; let rest = v.slice(at + 1); /* nothing but separators after it: they go too */ if ([...rest].every((c) => sep.test(c))) rest = ''; el.value = v.slice(0, at) + rest; el.setSelectionRange(at, at); el.dispatchEvent(new Event('input', { bubbles: true })); } inputs.number.addEventListener('beforeinput', (e) => skipSeparators(e, inputs.number, /\s/)); inputs.number.addEventListener('input', numberInput); /* the light reads the number from right to left: every second figure, counted twice, lifts as it passes */ function readNumber(d) { const ok = luhn(d); const figs = numberRow.figs.slice(); const lay = lineOf(NETS[net], figs.length); const done = () => { reading = null; if (ok) setNumberOk(true); else { errors.number = BAD_NUMBER; paintErrors(); sagged = true; figs.forEach((f) => gsap.to(f.t, { opacity: 0.5, duration: 0.3, overwrite: 'auto' })); if (!REDUCED) { shake([fields.number]); body.vry += 70; gsap.delayedCall(0.12, () => (body.vry -= 110)); } } aimLamp(); }; if (REDUCED) { done(); return; } const from = lay.xs[figs.length - 1] + lay.w * 0.7; const to = lay.xs[0] - lay.w * 0.7; const steer = { x: from }; /* the verdict comes when the light reaches the first figure; the last lifts settle after it */ reading = gsap.timeline({ delay: 0.2 }); reading.call(done, null, READ + 0.05); reading.to(steer, { x: to, duration: READ, ease: 'power1.inOut', onUpdate: () => setAim(steer.x, LINE.y - 16, 30) }, 0); for (let i = figs.length - 2; i >= 0; i -= 2) { const at = ((from - lay.xs[i]) / (from - to)) * READ; reading.to(figs[i].t, { y: -3.4, duration: 0.14, ease: 'power2.out' }, Math.max(0, at - 0.07)) .to(figs[i].t, { y: 0, duration: 0.4, ease: 'back.out(3)' }, at + 0.07); } } function setNumberOk(v) { numberOk = v; if (v) { errors.number = ''; paintErrors(); said.textContent = 'Card number checked.'; numberRow.figs.forEach((f) => gsap.to(f.t, { opacity: 1, duration: 0.2, overwrite: 'auto' })); gsap.fromTo(tickPath, { opacity: 1, strokeDasharray: 18, strokeDashoffset: 18 }, { strokeDashoffset: 0, duration: REDUCED ? 0 : 0.4, ease: 'power2.out' }); /* and a ripple runs along the figures that add up */ if (!REDUCED) numberRow.figs.forEach((f, i) => gsap.to(f.t, { keyframes: { y: [0, -1.8, 0] }, duration: 0.36, delay: i * 0.02, ease: 'power1.inOut', overwrite: 'auto' })); } else gsap.to(tickPath, { opacity: 0, duration: 0.15 }); } /* ---------------------------------------------------------------- the expiry date */ function splitExp(v) { const s = String(v).trim(); const parts = s.split(/\D+/).filter(Boolean); let d; if (parts.length >= 2 && (parts[0].length === 1 || parts[1].length > 2)) { /* typed or pasted as 1/29 or 12/2029: the parts say where the month ends */ d = parts[0].padStart(2, '0').slice(-2) + (parts[1].length === 4 ? parts[1].slice(2) : parts[1].slice(0, 2)); } else if (parts.length === 1 && parts[0].length === 1 && /\/$/.test(s)) d = `0${parts[0]}`; else d = digitsOf(s); if (d.length && d[0] > '1') d = `0${d}`; return { mm: d.slice(0, 2), yy: d.slice(2, 4) }; } function expInput() { const el = inputs.exp; const raw = el.value; const atEnd = el.selectionStart == null || el.selectionStart >= raw.length; const { mm, yy } = splitExp(raw); const f = mm.length === 2 && (yy || atEnd) ? `${mm} / ${yy}` : mm; if (f !== raw) { el.value = f; if (document.activeElement === el && atEnd) el.setSelectionRange(f.length, f.length); } fields.exp.classList.toggle('is-filled', !!f); row(expRow, expG, mm + (mm.length === 2 ? '/' : '') + yy, expPlace, 0.55); showPrint(!!mm); check('exp', yy.length === 2); aimLamp(); } inputs.exp.addEventListener('beforeinput', (e) => skipSeparators(e, inputs.exp, /[\s/]/)); inputs.exp.addEventListener('input', expInput); /* ---------------------------------------------------------------- the security code and the name */ function codeInput() { const el = inputs.code; const d = digitsOf(el.value).slice(0, NETS[net].code); if (d !== el.value) el.value = d; fields.code.classList.toggle('is-filled', !!d); showCode(d); check('code', false); aimLamp(); } inputs.code.addEventListener('input', codeInput); function nameInput() { const v = inputs.name.value; fields.name.classList.toggle('is-filled', !!v); row(nameRow, nameG, v.toUpperCase().slice(0, 26), namePlace, 0.55); check('name', false); aimLamp(); } inputs.name.addEventListener('input', nameInput); /* the caret moved without typing: the lamp follows it */ document.addEventListener('selectionchange', () => { if (active && !pretend) aimLamp(); }); /* ---------------------------------------------------------------- the field in use */ function use(k) { active = k; KEYS.forEach((key) => fields[key].classList.toggle('is-pretend', pretend && key === k)); if (state === 'idle') turnOver(k === 'code' && !NETS[net].front); aimLamp(); sayNote(); } KEYS.forEach((k) => { inputs[k].addEventListener('focus', () => { if (pretend) stopDemo(); fields[k].classList.add('is-on'); if (state === 'paid') wipe(); use(k); }); inputs[k].addEventListener('blur', (e) => { fields[k].classList.remove('is-on'); if (state === 'idle') check(k, true); /* to another field: that one says where the lamp goes */ if (e.relatedTarget && KEYS.some((key) => inputs[key] === e.relatedTarget)) return; use(null); }); }); /* Enter (the Next key of a phone) goes on to the next field that still needs something, and pays only from the last one or when nothing is missing */ KEYS.forEach((k, i) => { inputs[k].addEventListener('keydown', (e) => { if (e.key !== 'Enter' || e.isComposing || state !== 'idle') return; const rest = KEYS.slice(i + 1).find((key) => !inputs[key].value || judge(key, true)); if (!rest) return; e.preventDefault(); inputs[rest].focus(); }); }); /* the card itself: a tap on a part of it goes to its field */ let tap = null; stage.addEventListener('click', () => { if (state !== 'idle' || !tap) return; let k = 'name'; const { x: u, y: v } = tap; if (turnTo) k = 'code'; else if (NETS[net].front && u > 300 && v < 145) k = 'code'; else if (v < 182) k = 'number'; else if (u > 150 && u < 300 && v < 216) k = 'exp'; inputs[k].focus(); }); /* over the card, with nothing to type, the lamp follows the pointer */ function pointAt(e) { const r = card.getBoundingClientRect(); return { x: clamp(((e.clientX - r.left) / r.width) * W, 0, W), y: clamp(((e.clientY - r.top) / r.height) * H, 0, H) }; } stage.addEventListener('pointerdown', (e) => (tap = pointAt(e))); stage.addEventListener('pointermove', (e) => { if (e.pointerType !== 'mouse') return; hover = pointAt(e); if (!active && !turnTo) aimLamp(); }); stage.addEventListener('pointerleave', () => { hover = null; if (!active) aimLamp(); }); /* ---------------------------------------------------------------- paying */ let holdCall = null; let waitTl = null; function roll(out, inn) { if (REDUCED) { gsap.to(out, { opacity: 0, duration: 0.15, overwrite: true }); gsap.to(inn, { opacity: 1, duration: 0.2, delay: 0.1, overwrite: true }); return; } gsap.to(out, { y: -16, opacity: 0, duration: 0.18, ease: 'power2.in', overwrite: true }); gsap.fromTo(inn, { y: 16, opacity: 0 }, { y: 0, opacity: 1, duration: 0.42, ease: 'back.out(2)', delay: 0.12, overwrite: true }); } function submit(real) { if (state !== 'idle') return; if (reading) reading.progress(1); KEYS.forEach((k) => (errors[k] = judge(k, 'submit'))); paintErrors(); const bad = KEYS.filter((k) => errors[k]); if (bad.length) { shake(bad.map((k) => fields[k])); if (!REDUCED) { body.vry -= 60; gsap.delayedCall(0.1, () => (body.vry += 100)); } if (real) inputs[bad[0]].focus(); return; } state = 'paying'; KEYS.forEach((k) => (inputs[k].readOnly = true)); go.setAttribute('aria-disabled', 'true'); setNote('help', 'Waiting for your bank…'); roll(goLabel, waitEl); if (!REDUCED) gsap.to(spin, { rotation: 360, duration: 0.8, ease: 'none', repeat: -1, transformOrigin: '50% 50%' }); turnOver(false); /* the lamp passes over the whole card while the bank answers */ const steer = { x: 30 }; waitTl = gsap.timeline({ onComplete: paid }); if (REDUCED) waitTl.to({}, { duration: WAIT }); else waitTl.to(steer, { x: 400, duration: WAIT / 2, ease: 'sine.inOut', yoyo: true, repeat: 1, onUpdate: () => setAim(steer.x, 140, 80) }); } function paid() { waitTl = null; state = 'paid'; gsap.killTweensOf(spin); go.classList.add('is-paid'); roll(waitEl, doneEl); gsap.fromTo(doneEl.querySelector('path'), { strokeDasharray: 22, strokeDashoffset: 22 }, { strokeDashoffset: 0, duration: REDUCED ? 0 : 0.45, ease: 'power2.out', delay: 0.2 }); setNote('right', 'Payment approved. You can close this page.'); said.textContent = 'Payment approved.'; KEYS.forEach((k) => fields[k].classList.add('is-done')); /* the figures sink back into the plastic, all but the last four */ const figs = numberRow.figs; const keep = figs.length - 4; figs.forEach((f, i) => i < keep && sink(f, (REDUCED ? 0 : 0.25) + i * 0.035, true)); expRow.figs.forEach((f, i) => sink(f, (REDUCED ? 0 : 0.55) + i * 0.03, true)); gsap.delayedCall(REDUCED ? 0 : 0.6, () => showPrint(false)); const lay = lineOf(NETS[net], figs.length); setAim(lay.xs[Math.max(0, keep)] + lay.w * 1.5, LINE.y - 20, 50); holdCall = gsap.delayedCall(HOLD, () => { holdCall = null; wipe(); }); } /* ---------------------------------------------------------------- everything back to an empty form */ function wipe() { if (holdCall) holdCall.kill(); holdCall = null; if (waitTl) waitTl.kill(); waitTl = null; if (reading) reading.kill(); reading = null; if (state !== 'idle') { gsap.killTweensOf(spin); roll(state === 'paid' ? doneEl : waitEl, goLabel); go.classList.remove('is-paid'); go.removeAttribute('aria-disabled'); } state = 'idle'; KEYS.forEach((k) => { inputs[k].readOnly = false; inputs[k].value = ''; errors[k] = ''; fields[k].classList.remove('is-filled', 'is-done', 'is-wrong'); }); [numberRow, expRow, nameRow].forEach((st) => { st.figs.forEach((f, i) => sink(f, (st.figs.length - 1 - i) * 0.015)); st.figs = []; st.shown = ''; }); codeFigs.forEach((f) => f.g.remove()); codeFigs = []; codeShown = ''; frontCode.textContent = ''; numberNow = ''; sagged = false; if (numberOk) setNumberOk(false); showPrint(false); setNet('blank'); turnOver(false); paintErrors(); aimLamp(); } form.addEventListener('submit', (e) => { e.preventDefault(); if (pretend) stopDemo(); submit(true); }); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) on the form is a pretend hand that types without taking the focus, one step per click: the test number (read and found right), the date, the code (the card turns), the name, paying; then a number with a typo, read and found wrong */ let demo = null; let step = 0; /* 0 the number, 1 the date, 2 the code, 3 the name, 4 paying, 5 a typo, 6 fixed */ function stopDemo() { if (demo) demo.kill(); demo = null; pretend = false; KEYS.forEach((k) => fields[k].classList.remove('is-pretend')); } const FEED = { number: numberInput, exp: expInput, code: codeInput, name: nameInput }; function typeIn(k, str, gap, at) { [...str].forEach((ch, n) => demo.call(() => { inputs[k].value += ch; FEED[k](); }, null, at + n * gap)); } form.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== form) return; if (KEYS.some((k) => inputs[k] === document.activeElement)) return; if (demo) demo.progress(1); demo = gsap.timeline(); pretend = true; const s = step; step = step === 6 ? 1 : step + 1; const right = digitsOf(SAMPLE); const typo = `${right.slice(0, -1)}${(+right.slice(-1) + 1) % 10}`; if (s === 6 && digitsOf(inputs.number.value) === typo && state === 'idle') { /* the typo found: the last figure goes, the right one comes */ demo.call(() => use('number'), null, 0.05); demo.call(() => { inputs.number.value = inputs.number.value.slice(0, -1); numberInput(); }, null, 0.95); typeIn('number', right.slice(-1), 0.1, 1.35); } else if (s === 0 || s >= 5) { let at = 0.05; if (state !== 'idle' || inputs.number.value || inputs.name.value) { wipe(); at = 0.42; } demo.call(() => use('number'), null, at); typeIn('number', s === 5 ? typo : right, s === 5 ? 0.05 : 0.065, at + 0.18); } else if (state !== 'idle') { step = 5; } else if (s === 1) { use('exp'); typeIn('exp', `08${String((thisYear + 3) % 100).padStart(2, '0')}`, 0.11, 0.25); } else if (s === 2) { use('code'); typeIn('code', '314'.slice(0, NETS[net].code), 0.13, 0.6); } else if (s === 3) { use('name'); typeIn('name', HOLDER, 0.055, 0.45); } else { use(null); submit(false); } }); /* ---------------------------------------------------------------- it comes in */ setNote('help', HELP); draw(); document.fonts.ready.then(() => { relayNumber(); aimLamp(); }); if (!REDUCED) { body.rx = 26; body.z = -90; body.vry = -40; gsap.from(stage, { opacity: 0, duration: 0.5, ease: 'power2.out', clearProps: 'opacity' }); gsap.from([...form.querySelectorAll('.field'), note, go], { y: 16, opacity: 0, duration: 0.7, ease: 'power3.out', stagger: 0.06, delay: 0.15, clearProps: 'transform,opacity' }); } })();