61: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"] 62: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"] 63:T4c71,import { useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** The word on the door when the page loads. */ const START_WORD = "SUNDAY"; /** Longest word the field accepts. */ const MAX_LETTERS = 8; /** Plastic colours, used in order and repeated. */ const COLOURS = ["#e23a2e", "#f6b40c", "#1d6fd8", "#2c9d55", "#f26c1d", "#8a43c6"]; /** The enamel of the door. */ const DOOR = "#edf0ea"; /** Seconds a letter stays where it was dropped before it slides home. */ const HOLD = 1.4; /** Height of a capital in the baked sprite, in pixels. The sprite is scaled down to fit the stage. */ const CAP = 220; const PAD = 30; const DEPTH = 13; 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 hexToRgb(hex: string): [number, number, number] { const n = parseInt(hex.slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } /** * Moulds one letter: the glyph is fattened with a round stroke, blurred into a * height (a rounded shoulder plus a slight dome), lit from the top left as * glossy plastic and given a darker side wall underneath. */ function mould(target: HTMLCanvasElement, ch: string, colour: string) { 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"); 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 + DEPTH; const mask = document.createElement("canvas"); mask.width = w; mask.height = h; const mc = mask.getContext("2d", { willReadFrequently: true }); if (!mc) return null; mc.font = face; mc.fillStyle = "#fff"; mc.strokeStyle = "#fff"; mc.lineJoin = "round"; mc.lineWidth = CAP * 0.075; mc.strokeText(ch, PAD + left, PAD + asc); mc.fillText(ch, PAD + left, PAD + asc); const px = mc.getImageData(0, 0, w, h); const a = new Float32Array(w * h); for (let i = 0; i < a.length; i++) a[i] = px.data[i * 4 + 3] / 255; const edge = boxBlur(a, w, h, 6); const dome = boxBlur(a, w, h, 24); 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.3)); hgt[i] = Math.sqrt(1 - (1 - t) * (1 - t)) * 11 + dome[i] * 7; } const [cr, cg, cb] = hexToRgb(colour); // Light from the top left, a little in front of the door. const lx = -0.5, ly = -0.62, lz = 0.6; const hl = Math.hypot(lx, ly, lz + 1); const hx = lx / hl, hy = ly / hl, hz = (lz + 1) / hl; const out = mc.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.85; let ny = -(hgt[i + w] - hgt[i - w]) * 0.85; 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 spec = Math.pow(nh, 46) * 0.9 + Math.pow(nh, 9) * 0.1; const fill = Math.pow(Math.max(0, nx * 0.6 + ny * 0.52 + nz * 0.6), 5) * 0.16; // A soft window in the gloss: brighter towards the top of the letter. const sky = 0.1 * (1 - (y - PAD) / bh); const shade = 0.36 + 1.02 * diff + sky; const o = i * 4; out.data[o] = Math.min(255, cr * shade + 255 * (spec + fill)); out.data[o + 1] = Math.min(255, cg * shade + 255 * (spec + fill)); out.data[o + 2] = Math.min(255, cb * shade + 255 * (spec + fill)); out.data[o + 3] = a[i] * 255; } } mc.putImageData(out, 0, 0); // The side wall: the same outline in a darker plastic, stacked downwards. const wall = document.createElement("canvas"); wall.width = w; wall.height = h; const wc = wall.getContext("2d"); target.width = w; target.height = h; const tc = target.getContext("2d"); if (!wc || !tc) return null; for (let d = DEPTH; d >= 1; d--) { const k = 0.4 + 0.12 * (1 - d / DEPTH); wc.globalCompositeOperation = "source-over"; wc.clearRect(0, 0, w, h); wc.drawImage(mask, 0, 0); wc.globalCompositeOperation = "source-in"; wc.fillStyle = `rgb(${Math.round(cr * k)},${Math.round(cg * k)},${Math.round(cb * k)})`; wc.fillRect(0, 0, w, h); tc.drawImage(wall, 0, d); } tc.drawImage(mask, 0, 0); return { w, h, bw }; } type Body = { el: HTMLButtonElement; w: number; h: number; bw: number; x: number; y: number; r: number; vx: number; vy: number; vr: number; hx: number; hy: number; hr: number; held: boolean; free: number; wait: number; gx: number; gy: number; tx: number; ty: number; seed: number; }; export default function MagneticFridgeLetters() { const reduce = useReducedMotion(); const [word, setWord] = useState(START_WORD); const stage = useRef(null); const first = useRef(true); const scatter = useRef<() => void>(() => {}); const letters = word.split(""); useEffect(() => { const el = stage.current; if (!el) return; const initial = first.current; first.current = false; const buttons = Array.from(el.querySelectorAll("[data-magnet]")); const list: Body[] = []; buttons.forEach((b, i) => { const cv = b.querySelector("canvas"); const ch = b.dataset.magnet || ""; const size = cv ? mould(cv, ch, COLOURS[i % COLOURS.length]) : null; if (!size) return; const s = Math.sin((i + 1) * 12.9898 + ch.charCodeAt(0) * 78.233) * 43758.5453; list.push({ el: b, ...size, x: 0, y: 0, r: 0, vx: 0, vy: 0, vr: 0, hx: 0, hy: 0, hr: 0, held: false, free: 0, wait: 0, gx: 0, gy: 0, tx: 0, ty: 0, seed: s - Math.floor(s) }); }); let W = 0, H = 0, scale = 1; const layout = () => { 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.19; 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); scale = Math.min((W * 0.8) / widest, (H * (rows > 1 ? 0.2 : 0.37)) / CAP, 1.15); const lineH = CAP * 1.22 * scale; const top = H * 0.44 - ((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) => { b.hx = x + (b.bw * scale) / 2; b.hy = top + r * lineH + (b.seed - 0.5) * 16 * scale; b.hr = (((b.seed * 7.31) % 1) - 0.5) * 0.2; x += (b.bw + gap) * scale; b.el.style.width = `${b.w * scale}px`; b.el.style.height = `${b.h * scale}px`; }); } }; const place = (b: Body) => { b.el.style.transform = `translate3d(${b.x - (b.w * scale) / 2}px, ${b.y - (b.h * scale) / 2}px, 0) rotate(${b.r}rad) scale(${b.held ? 1.06 : 1})`; }; layout(); list.forEach((b, i) => { b.x = b.hx; b.y = b.hy; b.r = b.hr; if (!initial && !reduce) { // A new word is slapped on from above, one letter after another. b.y = -b.h * scale; b.r = b.hr + (b.seed - 0.5) * 1.2; b.wait = i * 0.07; } place(b); b.el.style.opacity = "1"; }); let quiet = 0; let top = 10; const cleanups: Array<() => void> = []; list.forEach((b) => { const at = (e: PointerEvent) => { const r = el.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; const down = (e: PointerEvent) => { const [x, y] = at(e); b.held = true; b.wait = 0; b.gx = b.x - x; b.gy = b.y - y; b.tx = b.x; b.ty = b.y; b.el.dataset.held = "1"; b.el.style.zIndex = String(++top); b.el.setPointerCapture(e.pointerId); quiet = 8; }; const move = (e: PointerEvent) => { if (!b.held) return; const [x, y] = at(e); b.tx = x + b.gx; b.ty = y + b.gy; }; const up = () => { if (!b.held) return; b.held = false; b.free = HOLD; delete b.el.dataset.held; if (reduce) { b.vx = 0; b.vy = 0; } quiet = 8; }; const key = (e: KeyboardEvent) => { const step = 28; const d: Record = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }; if (d[e.key]) { e.preventDefault(); b.x += d[e.key][0]; b.y += d[e.key][1]; b.vx = 0; b.vy = 0; b.free = HOLD; quiet = 8; } }; const flick = () => { if (b.free > 0 || reduce) return; b.vx = (b.seed - 0.5) * 900; b.vy = 380 + b.seed * 260; b.vr = (b.seed - 0.5) * 9; b.free = HOLD; quiet = 8; }; b.el.addEventListener("pointerdown", down); b.el.addEventListener("pointermove", move); b.el.addEventListener("pointerup", up); b.el.addEventListener("pointercancel", up); b.el.addEventListener("keydown", key); b.el.addEventListener("click", flick); cleanups.push(() => { b.el.removeEventListener("pointerdown", down); b.el.removeEventListener("pointermove", move); b.el.removeEventListener("pointerup", up); b.el.removeEventListener("pointercancel", up); b.el.removeEventListener("keydown", key); b.el.removeEventListener("click", flick); }); }); const shove = (b: Body, power: number) => { const a = b.seed * 6.283 + clock * 1.7; b.vx = Math.cos(a) * power; b.vy = Math.abs(Math.sin(a)) * power * 0.8 + power * 0.25; b.vr = (((b.seed * 3.7) % 1) - 0.5) * 10; b.free = HOLD * 0.75; }; let clock = 0; scatter.current = () => { quiet = 5; list.forEach((b) => !b.held && shove(b, reduce ? 0 : 620 + b.seed * 500)); }; let raf = 0, last = 0, visible = true, rippled = !initial, nextDemo = 3.5, turn = 0; const loop = (now: number) => { raf = requestAnimationFrame(loop); const dt = Math.min(0.033, last ? (now - last) / 1000 : 0.016); last = now; clock += dt; quiet -= dt; if (!reduce) { if (!rippled && clock > 0.9) { // A knock on the door: every letter rocks once and settles. rippled = true; list.forEach((b, i) => (b.vr += (i % 2 ? 1 : -1) * (1.6 + b.seed))); } if (clock > nextDemo && quiet <= 0 && list.length) { nextDemo = clock + 3.6; const b = list[(turn = (turn + 1 + Math.floor(list.length / 2)) % list.length)]; if (!b.held && b.free <= 0) shove(b, 520 * Math.max(0.5, scale)); } } for (const b of list) { if (b.wait > 0) { b.wait -= dt; continue; } if (b.held) { const nx = b.x + (b.tx - b.x) * Math.min(1, dt * 28); const ny = b.y + (b.ty - b.y) * Math.min(1, dt * 28); b.vx = (nx - b.x) / dt; b.vy = (ny - b.y) / dt; b.x = nx; b.y = ny; const lean = Math.max(-0.4, Math.min(0.4, b.vx * 0.0005)); b.r += (b.hr + lean - b.r) * Math.min(1, dt * 12); } else if (b.free > 0) { // Let go: it skids on the enamel and stops, as a magnet does. const drag = Math.exp(-7 * dt); b.vx *= drag; b.vy *= drag; b.vr *= drag; b.x += b.vx * dt; b.y += b.vy * dt; b.r += b.vr * dt; b.free -= dt; if (b.free <= 0 && reduce) { b.x = b.hx; b.y = b.hy; b.r = b.hr; } } else { b.vx += ((b.hx - b.x) * 95 - b.vx * 13) * dt; b.vy += ((b.hy - b.y) * 95 - b.vy * 13) * dt; b.vr += ((b.hr - b.r) * 120 - b.vr * 9) * dt; b.x += b.vx * dt; b.y += b.vy * dt; b.r += b.vr * dt; } if (b.wait <= 0 && (b.held || b.free > 0)) { const mx = (b.bw * scale) / 2, my = (CAP * scale) / 2; if (b.x < mx) { b.x = mx; b.vx = Math.abs(b.vx) * 0.4; } if (b.x > W - mx) { b.x = W - mx; b.vx = -Math.abs(b.vx) * 0.4; } if (b.y < my) { b.y = my; b.vy = Math.abs(b.vy) * 0.4; } if (b.y > H - my - 84) { b.y = H - my - 84; b.vy = -Math.abs(b.vy) * 0.4; } } place(b); } }; const wake = () => { cancelAnimationFrame(raf); raf = 0; if (visible && !document.hidden) { last = 0; raf = requestAnimationFrame(loop); } }; const ro = new ResizeObserver(() => { layout(); list.forEach((b) => { if (!b.held && b.free <= 0 && b.wait <= 0) { b.x = b.hx; b.y = b.hy; } place(b); }); }); ro.observe(el); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); io.observe(el); document.addEventListener("visibilitychange", wake); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); cleanups.forEach((fn) => fn()); }; }, [word, reduce]); return (

{/* The door: enamel sheen, the reflection of a window, the gap under the freezer door and a handle. */}

{word}

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

Fridge letters / drag one off, let go, and it slides home

Word to spell on the fridge 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-slate-300 bg-white px-4 text-[14px] font-semibold tracking-[0.18em] text-slate-900 shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none focus-visible:ring-2 focus-visible:ring-slate-900" />

); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/magnetic-fridge-letters-you-can-drag-across-enamel-that-slide-back-to-spell-the-word.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]