61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T600c,import { useEffect, useRef, useState } from "react"; // The card. `codes` are handed out one per card dealt, then start again. const gift = { shop: "Fenn & Marlowe", trade: "FLORISTS", amount: "$60", line: "of seasonal stems, tied and delivered", hint: "SCRATCH FOR YOUR CODE", coin: "FM", photo: "https://images.pexels.com/photos/11731228/pexels-photo-11731228.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Pink, yellow and white ranunculus heads laid together on a dark cloth", tone: "#3a2b2f", codes: ["FM-7Q4K-92TD", "FM-3HX8-51LW", "FM-9BN2-06RC"], }; const W = 460; // card size in CSS pixels const H = 292; const PANEL = { x: 206, y: 213, w: 232, h: 54 }; // the foil, measured from the card's top left const TILT = -5; // degrees the card lies at on the table const MARGIN = 150; // how far crumbs may travel past the card edge const START_FILLED = 0.56; // how much of the panel is already scratched when the page loads type Crumb = { x: number; y: number; vx: number; vy: number; r: number; a: number; va: number; curl: number; shade: number; flake: boolean; still: boolean }; export default function ScratchOffGiftCard() { const root = useRef(null); const fitBox = useRef(null); const cardEl = useRef(null); const foil = useRef(null); const crumbsEl = useRef(null); const coinEl = useRef(null); const [scale, setScale] = useState(1); const [deal, setDeal] = useState(0); const [revealed, setRevealed] = useState(false); const api = useRef<{ rub: () => void; fresh: () => void } | null>(null); const code = gift.codes[deal % gift.codes.length]; useEffect(() => { const el = root.current, box = fitBox.current, cv = foil.current, cc = crumbsEl.current, coin = coinEl.current, cardNode = cardEl.current; if (!el || !box || !cv || !cc || !coin || !cardNode) return; const ctx = cv.getContext("2d"), cx = cc.getContext("2d"); if (!ctx || !cx) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const d = Math.min(2, window.devicePixelRatio || 1); const PW = Math.round(PANEL.w * d), PH = Math.round(PANEL.h * d); cv.width = PW; cv.height = PH; const CW = W + MARGIN * 2, CH = H + MARGIN * 2; cc.width = Math.round(CW * d); cc.height = Math.round(CH * d); let seed = 23; const rand = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const make = (w: number, h: number) => { const c = document.createElement("canvas"); c.width = w; c.height = h; return c; }; // The foil as printed: dull silver, a wave pattern and tiny repeated lettering. const base = make(PW, PH), b = base.getContext("2d"); if (b) { b.scale(d, d); const g = b.createLinearGradient(0, 0, PANEL.w, PANEL.h); g.addColorStop(0, "#cfd2d6"); g.addColorStop(0.3, "#9da1a8"); g.addColorStop(0.55, "#c6c9ce"); g.addColorStop(0.8, "#8f939b"); g.addColorStop(1, "#b4b8be"); b.fillStyle = g; b.fillRect(0, 0, PANEL.w, PANEL.h); for (let i = 0; i < 2600; i++) { const v = rand(); b.fillStyle = v > 0.5 ? `rgba(255,255,255,${(v - 0.5) * 0.5})` : `rgba(40,44,52,${(0.5 - v) * 0.36})`; b.fillRect(rand() * PANEL.w, rand() * PANEL.h, 0.7, 0.7); } b.lineWidth = 0.6; b.strokeStyle = "rgba(70,76,86,0.34)"; for (let y = -4; y < PANEL.h + 6; y += 4.5) { b.beginPath(); for (let x = 0; x <= PANEL.w; x += 3) { const yy = y + Math.sin(x * 0.11 + y * 0.6) * 2.2; if (x === 0) b.moveTo(x, yy); else b.lineTo(x, yy); } b.stroke(); } b.font = '700 6px "Helvetica Neue",Helvetica,Arial,sans-serif'; b.fillStyle = "rgba(58,64,74,0.5)"; b.textBaseline = "middle"; for (let row = 0; row < 5; row++) for (let x = -30 + (row % 2) * 22; x < PANEL.w; x += 46) b.fillText("S C R A T C H", x, 7 + row * 10.5); } const mask = make(PW, PH), m = mask.getContext("2d"); const probe = make(29, 7), pr = probe.getContext("2d", { willReadFrequently: true }); if (!m || !pr) return; m.scale(d, d); m.lineCap = "round"; m.strokeStyle = "#000"; m.fillStyle = "#000"; const s = { coinX: W + 34, coinY: H - 8, toX: W + 34, toY: H - 8, press: 0, pressTo: 0, down: false, lastX: 0, lastY: 0, lastUser: -1e9, hover: false, path: [] as [number, number][], seg: 0, along: 0, wait: 0, startAfter: 3.3, doneFor: 0, done: false, dealing: false, crumbs: [] as Crumb[], crumbsDirty: true, foilDirty: true, sheen: 0.3, t: 0, checkIn: 0, }; // The route the coin takes by itself: a tight zigzag from left to right, in panel coordinates. const route = () => { const pts: [number, number][] = []; for (let i = 0, x = 7; x < PANEL.w - 3; i++, x += 10.5) pts.push([x + (rand() - 0.5) * 5, i % 2 ? PANEL.h - 3 - rand() * 7 : 3 + rand() * 7]); return pts; }; const spawn = (x: number, y: number, dx: number, dy: number, settle: boolean) => { const len = Math.hypot(dx, dy) || 1, n = Math.max(1, Math.round(len / 13)); for (let i = 0; i < n; i++) { const sp = 130 + rand() * 330, side = (rand() - 0.5) * 300; const c: Crumb = { x: PANEL.x + x + (rand() - 0.5) * 10, y: PANEL.y + y + (rand() - 0.5) * 10, vx: (dx / len) * sp - (dy / len) * side, vy: (dy / len) * sp + (dx / len) * side, r: 0.9 + rand() * 2.6, a: rand() * 6.3, va: (rand() - 0.5) * 22, curl: 0.9 + rand() * 2.6, shade: rand(), flake: rand() < 0.6, still: false }; if (settle) { c.x += c.vx / 5.5; c.y += c.vy / 5.5; c.a += c.va / 5.5; c.still = true; } s.crumbs.push(c); } if (s.crumbs.length > 240) s.crumbs.splice(0, s.crumbs.length - 240); s.crumbsDirty = true; }; // One rub of the coin from a to b: a ragged core, streaks beside it and loose specks. const rub = (x0: number, y0: number, x1: number, y1: number, settle: boolean) => { const dx = x1 - x0, dy = y1 - y0, len = Math.hypot(dx, dy) || 1, nx = -dy / len, ny = dx / len; for (let k = 0; k < 3; k++) { const o = (rand() - 0.5) * 9; m.globalAlpha = 1; m.lineWidth = 9 + rand() * 8; m.beginPath(); m.moveTo(x0 + nx * o, y0 + ny * o); m.lineTo(x1 + nx * o, y1 + ny * o); m.stroke(); } for (let k = 0; k < 9; k++) { const o = (rand() - 0.5) * 30, t0 = rand() * 0.3, t1 = 0.7 + rand() * 0.3; m.globalAlpha = 0.55 + rand() * 0.45; m.lineWidth = 0.8 + rand() * 1.8; m.beginPath(); m.moveTo(x0 + dx * t0 + nx * o, y0 + dy * t0 + ny * o); m.lineTo(x0 + dx * t1 + nx * o, y0 + dy * t1 + ny * o); m.stroke(); } m.globalAlpha = 1; for (let k = 0; k < 5; k++) { const t = rand(), o = (rand() - 0.5) * 28; m.beginPath(); m.arc(x0 + dx * t + nx * o, y0 + dy * t + ny * o, 0.5 + rand() * 1.3, 0, 6.3); m.fill(); } s.foilDirty = true; spawn(x1, y1, dx, dy, settle); }; const cleared = () => { pr.clearRect(0, 0, 29, 7); pr.drawImage(mask, 0, 0, 29, 7); const px = pr.getImageData(0, 0, 29, 7).data; let sum = 0; for (let i = 3; i < px.length; i += 4) sum += px[i]; return sum / (255 * 29 * 7); }; const finish = () => { if (!s.done) { s.done = true; s.doneFor = 0; setRevealed(true); } }; const drawFoil = () => { s.foilDirty = false; ctx.globalCompositeOperation = "source-over"; ctx.clearRect(0, 0, PW, PH); ctx.drawImage(base, 0, 0); const c = s.sheen * PW, g = ctx.createLinearGradient(c - PW * 0.3, 0, c + PW * 0.3, PH); g.addColorStop(0, "rgba(255,255,255,0)"); g.addColorStop(0.5, "rgba(255,255,255,0.85)"); g.addColorStop(1, "rgba(255,255,255,0)"); ctx.globalCompositeOperation = "soft-light"; ctx.fillStyle = g; ctx.fillRect(0, 0, PW, PH); ctx.globalCompositeOperation = "destination-out"; ctx.drawImage(mask, 0, 0); }; const drawCrumbs = () => { s.crumbsDirty = false; cx.setTransform(d, 0, 0, d, MARGIN * d, MARGIN * d); cx.clearRect(-MARGIN, -MARGIN, CW, CH); cx.lineCap = "round"; for (const c of s.crumbs) { const v = 112 + c.shade * 84, tone = `rgb(${v | 0},${(v + 3) | 0},${(v + 8) | 0})`; if (c.flake) { // A flat flake: a small lopsided four-sided chip with a shadow under one edge. const cos = Math.cos(c.a), sin = Math.sin(c.a), w = c.r * 0.95, h = c.r * (0.3 + c.curl * 0.16); const chip = (ox: number, oy: number) => { cx.beginPath(); cx.moveTo(c.x + ox - cos * w - sin * h, c.y + oy - sin * w + cos * h); cx.lineTo(c.x + ox + cos * w - sin * h * 0.4, c.y + oy + sin * w + cos * h * 0.4); cx.lineTo(c.x + ox + cos * w * 0.7 + sin * h, c.y + oy + sin * w * 0.7 - cos * h); cx.lineTo(c.x + ox - cos * w * 0.8 + sin * h * 0.7, c.y + oy - sin * w * 0.8 - cos * h * 0.7); cx.closePath(); cx.fill(); }; cx.fillStyle = "rgba(40,30,20,0.24)"; chip(0.7, 1); cx.fillStyle = tone; chip(0, 0); } else { cx.lineWidth = 1.2; cx.strokeStyle = "rgba(40,30,20,0.24)"; cx.beginPath(); cx.arc(c.x + 0.8, c.y + 1.1, c.r, c.a, c.a + c.curl); cx.stroke(); cx.lineWidth = 1; cx.strokeStyle = tone; cx.beginPath(); cx.arc(c.x, c.y, c.r, c.a, c.a + c.curl); cx.stroke(); cx.lineWidth = 0.5; cx.strokeStyle = "rgba(255,255,255,0.55)"; cx.beginPath(); cx.arc(c.x, c.y, c.r, c.a + c.curl * 0.3, c.a + c.curl * 0.5); cx.stroke(); } } }; const placeCoin = () => { const p = s.press; coin.style.transform = `translate(${(s.coinX - 7).toFixed(1)}px, ${(s.coinY - 8).toFixed(1)}px) rotate(${(-TILT + (s.coinX - s.toX) * 0.25).toFixed(2)}deg) scale(${(1 - p * 0.05).toFixed(3)})`; coin.style.filter = `drop-shadow(${(7 - p * 4).toFixed(1)}px ${(11 - p * 6).toFixed(1)}px ${(9 - p * 5).toFixed(1)}px rgba(52,34,12,${(0.34 + p * 0.14).toFixed(2)}))`; }; const reset = (filled: number, settle: boolean) => { m.clearRect(0, 0, PANEL.w, PANEL.h); s.crumbs = []; s.path = route(); s.seg = 0; s.along = 0; s.wait = 0; s.done = false; s.doneFor = 0; const upto = Math.floor((s.path.length - 1) * filled); for (let i = 0; i < upto; i++) rub(s.path[i][0], s.path[i][1], s.path[i + 1][0], s.path[i + 1][1], true); s.seg = upto; if (filled >= 1) { s.done = true; s.toX = W + 34; s.toY = H - 8; } else if (upto > 0) { s.toX = PANEL.x + s.path[upto][0]; s.toY = PANEL.y + s.path[upto][1]; } else { s.toX = W + 34; s.toY = H - 8; } if (settle) { s.coinX = s.toX; s.coinY = s.toY; } s.foilDirty = true; s.crumbsDirty = true; }; reset(reduce ? 1 : START_FILLED, true); if (reduce) setRevealed(true); const toLocal = (clientX: number, clientY: number) => { const r = box.getBoundingClientRect(), k = r.width / W; const dx = (clientX - (r.left + r.width / 2)) / k, dy = (clientY - (r.top + r.height / 2)) / k; const a = (TILT * Math.PI) / 180, cos = Math.cos(a), sin = Math.sin(a); return [dx * cos + dy * sin + W / 2, -dx * sin + dy * cos + H / 2]; }; const dealNew = () => { if (s.dealing) return; s.dealing = true; s.toX = W + 34; s.toY = H - 8; const next = () => { setDeal((n) => n + 1); setRevealed(false); reset(0, false); s.startAfter = 1.3; }; if (reduce) { next(); s.dealing = false; paint(); return; } cc.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300, fill: "forwards" }); const out = cardNode.animate([{ transform: "translate(0,0) rotate(0deg)" }, { transform: "translate(-150%,-20px) rotate(-9deg)" }], { duration: 460, easing: "cubic-bezier(.5,0,.9,.4)", fill: "forwards" }); out.onfinish = () => { next(); cc.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 10, fill: "forwards" }); const back = cardNode.animate([{ transform: "translate(150%,24px) rotate(9deg)" }, { transform: "translate(0,0) rotate(0deg)" }], { duration: 620, easing: "cubic-bezier(.16,1,.3,1)", fill: "forwards" }); back.onfinish = () => { s.dealing = false; }; }; }; const paint = () => { if (s.foilDirty) drawFoil(); if (s.crumbsDirty) drawCrumbs(); placeCoin(); }; let raf = 0, last = 0, visible = true; const frame = (now: number) => { raf = 0; const dt = Math.min(0.05, last ? (now - last) / 1000 : 0.016); last = now; s.t += dt; const userIdle = now - s.lastUser > 3600 && !s.down; if (!reduce && userIdle && !s.dealing) { if (s.done) { s.doneFor += dt; s.pressTo = 0; s.toX = W + 34; s.toY = H - 8; if (s.doneFor > 4.2) dealNew(); } else { s.wait += dt; if (s.wait > s.startAfter && s.seg < s.path.length - 1) { let travel = 250 * dt; s.pressTo = 1; while (travel > 0 && s.seg < s.path.length - 1) { const [ax, ay] = s.path[s.seg], [bx, by] = s.path[s.seg + 1], len = Math.hypot(bx - ax, by - ay); const from = s.along, to = Math.min(len, from + travel); rub(ax + ((bx - ax) * from) / len, ay + ((by - ay) * from) / len, ax + ((bx - ax) * to) / len, ay + ((by - ay) * to) / len, false); s.toX = PANEL.x + ax + ((bx - ax) * to) / len; s.toY = PANEL.y + ay + ((by - ay) * to) / len; travel -= to - from; s.along = to; if (to >= len) { s.seg++; s.along = 0; } } s.coinX = s.toX; s.coinY = s.toY; if (s.seg >= s.path.length - 1) finish(); } else if (s.seg === 0) { s.toX = W + 34; s.toY = H - 8; } } } const k = Math.min(1, dt * (s.down ? 30 : 12)); s.coinX += (s.toX - s.coinX) * k; s.coinY += (s.toY - s.coinY) * k; s.press += (s.pressTo - s.press) * Math.min(1, dt * 14); const sh = Math.max(0, Math.min(1, (s.coinX - PANEL.x) / PANEL.w)) * 0.8 + 0.1 + Math.sin(s.t * 0.7) * 0.06; if (Math.abs(sh - s.sheen) > 0.004) { s.sheen = sh; s.foilDirty = true; } let moving = false; const f = Math.exp(-dt * 5.5); for (const c of s.crumbs) { if (c.still) continue; c.x += c.vx * dt; c.y += c.vy * dt; c.a += c.va * dt; c.vx *= f; c.vy *= f; c.va *= f; if (Math.abs(c.vx) + Math.abs(c.vy) < 3) c.still = true; moving = true; } if (moving) s.crumbsDirty = true; paint(); if (visible && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf && !reduce) { last = 0; raf = requestAnimationFrame(frame); } }; const inPanel = (x: number, y: number) => x > PANEL.x - 6 && x < PANEL.x + PANEL.w + 6 && y > PANEL.y - 6 && y < PANEL.y + PANEL.h + 6; const down = (e: PointerEvent) => { const [x, y] = toLocal(e.clientX, e.clientY); s.lastUser = performance.now(); if (!inPanel(x, y) || s.dealing) return; s.down = true; s.pressTo = 1; s.lastX = x; s.lastY = y; s.toX = x; s.toY = y; el.setPointerCapture(e.pointerId); e.preventDefault(); wake(); }; const move = (e: PointerEvent) => { const [x, y] = toLocal(e.clientX, e.clientY); if (e.pointerType === "mouse" || s.down) { s.lastUser = performance.now(); s.toX = x; s.toY = y; if (!s.down) s.pressTo = 0; } if (!s.down) return; if (Math.hypot(x - s.lastX, y - s.lastY) < 2.5) return; if (inPanel(x, y) || inPanel(s.lastX, s.lastY)) { rub(s.lastX - PANEL.x, s.lastY - PANEL.y, x - PANEL.x, y - PANEL.y, reduce); if ((s.checkIn = (s.checkIn + 1) % 5) === 0 && cleared() > 0.62) finish(); } s.lastX = x; s.lastY = y; if (reduce) { s.coinX = x; s.coinY = y; paint(); } }; const up = () => { if (s.down) { s.down = false; s.pressTo = 0; if (cleared() > 0.62) finish(); } }; el.addEventListener("pointerdown", down); el.addEventListener("pointermove", move); el.addEventListener("pointerup", up); el.addEventListener("pointercancel", up); api.current = { // The keyboard route: each press rubs a third of the panel. rub: () => { if (s.done || s.dealing) return; s.lastUser = performance.now(); const stop = Math.min(s.path.length - 1, s.seg + Math.ceil(s.path.length / 3)); for (; s.seg < stop; s.seg++) rub(s.path[s.seg][0], s.path[s.seg][1], s.path[s.seg + 1][0], s.path[s.seg + 1][1], reduce); s.along = 0; s.toX = PANEL.x + s.path[s.seg][0]; s.toY = PANEL.y + s.path[s.seg][1]; if (s.seg >= s.path.length - 1) finish(); if (reduce) { s.coinX = s.toX; s.coinY = s.toY; paint(); } else wake(); }, fresh: () => { s.lastUser = performance.now(); dealNew(); wake(); }, }; const fit = () => setScale(Math.min(1.25, (el.clientWidth - 56) / (W + 26))); fit(); const ro = new ResizeObserver(fit); ro.observe(el); const io = new IntersectionObserver(([en]) => { visible = en.isIntersecting; if (visible) wake(); }); io.observe(el); const vis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", vis); paint(); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", vis); el.removeEventListener("pointerdown", down); el.removeEventListener("pointermove", move); el.removeEventListener("pointerup", up); el.removeEventListener("pointercancel", up); api.current = null; }; }, []); return (

{/* Thickness: three stacked edges under the face, then the soft shadows of a card lying on a table. */}

GIFT CARD

{gift.amount}

{gift.line}

{gift.hint}

{code}