60:I[707087,["/_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"],"RegistryDependencies"] 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:T604d,import { useEffect, useRef, useState } from "react"; import type { MouseEvent as ReactMouseEvent } from "react"; import { useReducedMotion } from "framer-motion"; /** The word on the tray when the page loads. */ const START_WORD = "THANKS"; /** Longest word the field accepts. */ const MAX_LETTERS = 8; /** Worktop colour around the tray. */ const WORKTOP = "#27382f"; /** Baked biscuit: the pale middle and the browned rim. */ const GOLD: [number, number, number] = [229, 180, 106]; const BROWN: [number, number, number] = [166, 98, 40]; /** Raw dough. */ const DOUGH: [number, number, number] = [238, 224, 190]; /** Seconds the oven light stays on. */ const BAKE_SECONDS = 2.8; /** Height of a capital in the baked sprite, in pixels. */ const CAP = 200; const PAD = 26; function boxBlur(src: Float32Array, w: number, h: number, r: number): Float32Array { const out = new Float32Array(src.length); const tmp = new Float32Array(src.length); const span = 2 * r + 1; let from = src; for (let pass = 0; pass < 3; pass++) { for (let y = 0; y < h; y++) { const row = y * w; let sum = 0; for (let x = -r; x <= r; x++) sum += from[row + Math.min(w - 1, Math.max(0, x))]; for (let x = 0; x < w; x++) { tmp[row + x] = sum / span; sum += from[row + Math.min(w - 1, x + r + 1)] - from[row + Math.max(0, x - r)]; } } for (let x = 0; x < w; x++) { let sum = 0; for (let y = -r; y <= r; y++) sum += tmp[Math.min(h - 1, Math.max(0, y)) * w + x]; for (let y = 0; y < h; y++) { out[y * w + x] = sum / span; sum += tmp[Math.min(h - 1, y + r + 1) * w + x] - tmp[Math.max(0, y - r) * w + x]; } } from = out; } return out; } function random(seed: number) { let s = seed >>> 0 || 1; return () => { s = (Math.imul(s, 1664525) + 1013904223) >>> 0; return s / 4294967296; }; } /** Smooth blotches between 0 and 1, one value per pixel. */ function blotches(w: number, h: number, cell: number, rnd: () => number): Float32Array { const gw = Math.ceil(w / cell) + 2; const gh = Math.ceil(h / cell) + 2; const grid = new Float32Array(gw * gh); for (let i = 0; i < grid.length; i++) grid[i] = rnd(); const out = new Float32Array(w * h); for (let y = 0; y < h; y++) { const gy = Math.floor(y / cell); let fy = y / cell - gy; fy = fy * fy * (3 - 2 * fy); for (let x = 0; x < w; x++) { const gx = Math.floor(x / cell); let fx = x / cell - gx; fx = fx * fx * (3 - 2 * fx); const i = gy * gw + gx; const top = grid[i] + (grid[i + 1] - grid[i]) * fx; const bot = grid[i + gw] + (grid[i + gw + 1] - grid[i + gw]) * fx; out[y * w + x] = top + (bot - top) * fy; } } return out; } type Baked = { w: number; h: number; bw: number; edges: Array<[number, number]>; tops: Array<[number, number]> }; /** * Cuts one letter and draws it twice, as raw dough and as a baked biscuit. * The outline is roughened so no two edges match, puffed into a pillow, * pricked with a fork, and browned most where the dough is thinnest. */ function cut(rawCv: HTMLCanvasElement, bakedCv: HTMLCanvasElement, ch: string, seed: number): Baked | null { const face = `900 ${Math.round(CAP / 0.72)}px "Arial Rounded MT Bold", "Helvetica Neue", Helvetica, Arial, sans-serif`; const probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true }); if (!probe) return null; probe.font = face; const m = probe.measureText(ch); const left = Math.ceil(m.actualBoundingBoxLeft); const bw = Math.max(40, Math.ceil(m.actualBoundingBoxLeft + m.actualBoundingBoxRight)); const asc = Math.ceil(m.actualBoundingBoxAscent); const bh = Math.max(40, Math.ceil(m.actualBoundingBoxAscent + m.actualBoundingBoxDescent)); const w = bw + PAD * 2; const h = bh + PAD * 2; probe.canvas.width = w; probe.canvas.height = h; probe.font = face; probe.fillStyle = "#fff"; probe.strokeStyle = "#fff"; probe.lineJoin = "round"; probe.lineWidth = CAP * 0.06; probe.strokeText(ch, PAD + left, PAD + asc); probe.fillText(ch, PAD + left, PAD + asc); const px = probe.getImageData(0, 0, w, h).data; const hard = new Float32Array(w * h); for (let i = 0; i < hard.length; i++) hard[i] = px[i * 4 + 3] / 255; const rnd = random(seed); const wobble = blotches(w, h, 15, rnd); const lumps = blotches(w, h, 22, rnd); const pores = blotches(w, h, 5, rnd); const patch = blotches(w, h, 46, rnd); // Dough spreads in the oven: soften the outline, then cut it again along a wandering line. const softened = boxBlur(hard, w, h, 3); const a = new Float32Array(w * h); for (let i = 0; i < a.length; i++) { const v = (softened[i] + (wobble[i] - 0.5) * 0.22 - 0.42) * 7; a[i] = Math.min(1, Math.max(0, v)); } const edge = boxBlur(a, w, h, 8); const dome = boxBlur(a, w, h, 24); // Fork holes, only where the stroke is wide enough to take one. const holes: Array<[number, number]> = []; const pitch = 30; for (let gy = PAD; gy < h - PAD; gy += pitch) { for (let gx = PAD; gx < w - PAD; gx += pitch) { let best = 0, bx = 0, by = 0; for (let k = 0; k < 14; k++) { const x = Math.floor(gx + rnd() * pitch), y = Math.floor(gy + rnd() * pitch); const v = x < w && y < h ? edge[y * w + x] : 0; if (v > best) { best = v; bx = x; by = y; } } if (best > 0.968 && !holes.some(([hx, hy]) => Math.hypot(hx - bx, hy - by) < 21)) holes.push([bx, by]); } } const pit = new Float32Array(w * h); for (const [hx, hy] of holes) { for (let y = hy - 9; y <= hy + 9; y++) { for (let x = hx - 9; x <= hx + 9; x++) { if (x < 0 || y < 0 || x >= w || y >= h) continue; const d = Math.hypot(x - hx, y - hy); pit[y * w + x] = Math.max(pit[y * w + x], Math.exp(-(d * d) / 11)); } } } const edges: Array<[number, number]> = []; const tops: Array<[number, number]> = []; const lx = -0.46, ly = -0.56, lz = 0.69; const hl = Math.hypot(lx, ly, lz + 1); const hx = lx / hl, hy = ly / hl, hz = (lz + 1) / hl; const paint = (cv: HTMLCanvasElement, baked: boolean) => { cv.width = w; cv.height = h; const c = cv.getContext("2d"); if (!c) return; const rise = baked ? 1 : 0.55; const hgt = new Float32Array(w * h); for (let i = 0; i < hgt.length; i++) { const t = Math.min(1, Math.max(0, (edge[i] - 0.5) * 2.05)); hgt[i] = (Math.sqrt(1 - (1 - t) * (1 - t)) * 15 + dome[i] * 13) * rise + (lumps[i] - 0.5) * (baked ? 3.6 : 1.4) + (pores[i] - 0.5) * (baked ? 1.5 : 0.6) - pit[i] * (baked ? 6.5 : 8.5); } const out = c.createImageData(w, h); for (let y = 1; y < h - 1; y++) { for (let x = 1; x < w - 1; x++) { const i = y * w + x; if (a[i] <= 0) continue; let nx = -(hgt[i + 1] - hgt[i - 1]) * 0.6; let ny = -(hgt[i + w] - hgt[i - w]) * 0.6; const nl = Math.hypot(nx, ny, 1); nx /= nl; ny /= nl; const nz = 1 / nl; const diff = Math.max(0, nx * lx + ny * ly + nz * lz); const nh = Math.max(0, nx * hx + ny * hy + nz * hz); const rim = 1 - Math.min(1, Math.max(0, (edge[i] - 0.5) * 2.05)); let r: number, g: number, b: number; if (baked) { const k = Math.min(1, Math.pow(rim, 1.2) * 1.05 + (patch[i] - 0.45) * 0.34 + (pores[i] - 0.5) * 0.12); const kk = Math.max(0, k); r = GOLD[0] + (BROWN[0] - GOLD[0]) * kk; g = GOLD[1] + (BROWN[1] - GOLD[1]) * kk; b = GOLD[2] + (BROWN[2] - GOLD[2]) * kk; } else { const kk = rim * 0.12 + (patch[i] - 0.5) * 0.05; r = DOUGH[0] * (1 - kk); g = DOUGH[1] * (1 - kk); b = DOUGH[2] * (1 - kk * 1.3); } const dark = 1 - pit[i] * (baked ? 0.42 : 0.3); const shade = (0.47 + 0.78 * diff) * dark; const spec = Math.pow(nh, 18) * (baked ? 0.1 : 0.05); const grain = (rnd() - 0.5) * (baked ? 6 : 4); const o = i * 4; out.data[o] = Math.min(255, r * shade + 255 * spec + grain); out.data[o + 1] = Math.min(255, g * shade + 255 * spec + grain); out.data[o + 2] = Math.min(255, b * shade + 255 * spec + grain * 0.7); out.data[o + 3] = a[i] * 255; if (baked && edge[i] > 0.46 && edge[i] < 0.6 && a[i] > 0.9 && rnd() < 0.004) edges.push([x, y]); if (baked && edge[i] > 0.9 && pit[i] < 0.05 && rnd() < 0.0012) tops.push([x / w, y / h]); } } c.putImageData(out, 0, 0); // Sugar on the baked ones, flour on the raw ones. c.globalCompositeOperation = "source-atop"; const grains = Math.round((w * h) / (baked ? 900 : 900)); for (let n = 0; n < grains; n++) { const x = rnd() * w, y = rnd() * h; const s = baked ? 1.2 + rnd() * 1.8 : 0.8 + rnd() * 1.2; c.fillStyle = baked ? `rgba(255,250,236,${0.5 + rnd() * 0.45})` : `rgba(255,255,255,${0.35 + rnd() * 0.3})`; c.fillRect(x, y, s, s); if (baked) { c.fillStyle = "rgba(110,60,20,0.3)"; c.fillRect(x + s * 0.6, y + s, s * 0.8, 0.8); } } c.globalCompositeOperation = "source-over"; }; paint(rawCv, false); paint(bakedCv, true); return { w, h, bw, edges, tops }; } type Crumb = { x: number; y: number; s: number; r: number }; export default function ShortbreadLetters() { const reduce = useReducedMotion(); const [word, setWord] = useState(START_WORD); const [batch, setBatch] = useState(0); const [phase, setPhase] = useState<"raw" | "baking" | "baked">("baked"); const [crumbs, setCrumbs] = useState([]); const [bites, setBites] = useState(0); const [glints, setGlints] = useState>>([]); const tray = useRef(null); const sprites = useRef>([]); const first = useRef(true); const letters = word.split(""); useEffect(() => { const el = tray.current; if (!el) return; const initial = first.current; first.current = false; setCrumbs([]); setBites(0); const buttons = Array.from(el.querySelectorAll("[data-biscuit]")); const list: Array = []; buttons.forEach((b, i) => { const cvs = b.querySelectorAll("canvas"); const ch = b.dataset.biscuit || ""; const seed = (i + 1) * 7919 + ch.charCodeAt(0) * 104729 + batch * 31; const size = cvs.length === 2 ? cut(cvs[0], cvs[1], ch, seed) : null; if (size) list.push({ el: b, ...size, scale: 1, seed: random(seed)() }); }); sprites.current = list; setGlints(list.map((b) => b.tops.slice(0, 3))); const layout = () => { const W = el.clientWidth, H = el.clientHeight; const rows = W < 560 && list.length > 4 ? 2 : 1; const perRow = Math.ceil(list.length / rows); const gap = CAP * 0.16; const rowWidth = (r: number) => list.slice(r * perRow, (r + 1) * perRow).reduce((sum, b) => sum + b.bw + gap, -gap); const widest = Math.max(1, rowWidth(0), rows > 1 ? rowWidth(1) : 0); const scale = Math.min((W * 0.84) / widest, (H * (rows > 1 ? 0.34 : 0.6)) / CAP, 1.1); const lineH = CAP * 1.24 * scale; const top = H * 0.5 - ((rows - 1) * lineH) / 2; for (let r = 0; r < rows; r++) { let x = W / 2 - (rowWidth(r) * scale) / 2; list.slice(r * perRow, (r + 1) * perRow).forEach((b) => { const cx = x + (b.bw * scale) / 2; const cy = top + r * lineH + (b.seed - 0.5) * 18 * scale; const turn = (((b.seed * 5.17) % 1) - 0.5) * 9; x += (b.bw + gap) * scale; b.scale = scale; b.el.style.width = `${b.w * scale}px`; b.el.style.height = `${b.h * scale}px`; b.el.style.transform = `translate3d(${cx - (b.w * scale) / 2}px, ${cy - (b.h * scale) / 2}px, 0) rotate(${turn}deg)`; b.el.style.opacity = "1"; }); } }; layout(); const ro = new ResizeObserver(layout); ro.observe(el); // The first tray arrives baked. Every later one goes in raw and is baked while you watch. const timers: number[] = []; if (initial || reduce) { setPhase("baked"); } else { setPhase("raw"); timers.push(window.setTimeout(() => setPhase("baking"), 950)); timers.push(window.setTimeout(() => setPhase("baked"), 950 + BAKE_SECONDS * 1000)); } return () => { ro.disconnect(); timers.forEach((t) => window.clearTimeout(t)); }; }, [word, batch, reduce]); function bite(i: number, e: ReactMouseEvent) { const b = sprites.current[i]; if (!b || phase !== "baked") return; let x: number, y: number; if (e.detail === 0 || !b.edges.length) { // From the keyboard: bite somewhere on the rim. const p = b.edges[(bites * 7 + i * 3) % Math.max(1, b.edges.length)] || [b.w / 2, b.h / 2]; x = p[0]; y = p[1]; } else { // The sprite is rotated a few degrees; undo that to find the spot in its own pixels. const r = b.el.getBoundingClientRect(); const turn = (parseFloat((b.el.style.transform.match(/rotate$([-\d.]+)deg$/) || ["", "0"])[1]) * Math.PI) / 180; const dx = e.clientX - (r.left + r.width / 2), dy = e.clientY - (r.top + r.height / 2); x = b.w / 2 + (dx * Math.cos(-turn) - dy * Math.sin(-turn)) / b.scale; y = b.h / 2 + (dx * Math.sin(-turn) + dy * Math.cos(-turn)) / b.scale; } const R = CAP * 0.17; b.el.querySelectorAll("canvas").forEach((cv, n) => { const c = cv.getContext("2d"); if (!c) return; const teeth = (grow: number) => { c.beginPath(); c.arc(x, y, R + grow, 0, 6.2832); for (let k = 0; k < 6; k++) { const t = (k / 6) * 6.2832 + i; const tx = x + Math.cos(t) * R * 0.92, ty = y + Math.sin(t) * R * 0.92; c.moveTo(tx + R * 0.36 + grow, ty); c.arc(tx, ty, R * 0.36 + grow, 0, 6.2832); } }; // The pale crumb inside shows as a rim round the bite. c.globalCompositeOperation = "source-atop"; c.fillStyle = "rgba(96,54,18,0.45)"; teeth(6.5); c.fill(); c.fillStyle = n ? "#f3dcae" : "#f4ecd6"; teeth(4.5); c.fill(); c.globalCompositeOperation = "destination-out"; c.fillStyle = "#000"; teeth(0); c.fill(); c.globalCompositeOperation = "source-over"; }); const host = tray.current?.getBoundingClientRect(); const r = b.el.getBoundingClientRect(); if (host) { const turn = (parseFloat((b.el.style.transform.match(/rotate$([-\d.]+)deg$/) || ["", "0"])[1]) * Math.PI) / 180; const ox = (x - b.w / 2) * b.scale, oy = (y - b.h / 2) * b.scale; const cx = r.left + r.width / 2 - host.left + ox * Math.cos(turn) - oy * Math.sin(turn); const cy = r.top + r.height / 2 - host.top + ox * Math.sin(turn) + oy * Math.cos(turn); const rnd = random(bites * 97 + i * 13 + 5); const fresh: Crumb[] = Array.from({ length: 7 }, () => { const t = rnd() * 6.2832, d = (0.2 + rnd() * 1.1) * R * b.scale; return { x: cx + Math.cos(t) * d, y: cy + Math.sin(t) * d, s: 2 + rnd() * 5, r: rnd() * 180 }; }); setCrumbs((c) => [...c.slice(-60), ...fresh]); } setBites((n) => n + 1); } return (

{word}

{/* The baking sheet: rolled steel rim, a dark well and a sheet of parchment. */}

{crumbs.map((c, i) => ( ))} {letters.map((ch, i) => ( ))}

{[18, 37, 55, 71, 86].map((x, i) => (

Shortbread letters / {phase === "raw" ? "cut and on the tray" : phase === "baking" ? "in the oven" : bites ? `${bites} ${bites === 1 ? "bite" : "bites"} gone` : "warm from the oven, tap one to bite it"}

Word to cut from the dough setWord(e.target.value.toUpperCase().replace(/[^A-Z0-9!?&]/g, "").slice(0, MAX_LETTERS))} autoComplete="off" spellCheck={false} className="h-11 w-[150px] rounded-full border border-white/25 bg-[#1b2921] px-4 text-[14px] font-semibold tracking-[0.18em] text-white outline-none placeholder:text-white/50 focus-visible:ring-2 focus-visible:ring-[#f0d9a8]" />

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/shortbread-letters-cut-from-dough-that-rise-and-brown-on-a-baking-tray-and-lose-a-bite-when-tapped.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]