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:T5b93,import { useEffect, useRef, useState } from "react"; // The lines on the card. `done` is how each one starts. const tasks = [ { text: "Proof the cover in daylight", done: true }, { text: "Order the cream 80 gsm stock", done: true }, { text: "Trim the test sheets", done: false }, { text: "Send the plates to Marit", done: false }, ]; const CARD = { title: "Before the print run", date: "Mon 12 Oct" }; const LACQUER: [number, number, number] = [214, 62, 38]; // the paint on the pencil const FOIL = "ALDER & FINCH 2B"; // stamped along the top flat const SW = 480, SH = 486; // scene, in design pixels const CX = 40, CY = 52, CW = 400, HEAD = 78, ROW = 56; // the card const CH = HEAD + ROW * tasks.length + 22; const PAD = 150; // spare canvas round the scene so the pencil is never cut off const LEN = 250, THICK = 13, PS = 1.2, G = LEN * PS; // the pencil as drawn, how much it is enlarged, and its real length const REST = { x: 70, y: CY + CH + 66, a: -0.23, tl: 0, el: 0 }; type Seg = { dur: number; start?: () => void; step: (k: number) => void; end?: () => void }; type Crumb = { x: number; y: number; vx: number; vy: number; r: number; len: number; tone: number; life: number }; const ease = (k: number) => (k < 0.5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2); const mix = (a: number[], b: number[], t: number) => `rgb(${a.map((v, i) => Math.round(v + (b[i] - v) * Math.max(0, Math.min(1, t)))).join(",")})`; const shade = (c: number[], k: number) => c.map((v) => Math.max(0, Math.min(255, v * k))); export default function PencilAndEraserIndexCard() { const [done, setDone] = useState(tasks.map((t) => t.done)); const doneRef = useRef(tasks.map((t) => t.done)); const [scale, setScale] = useState(1); const root = useRef(null); const marks = useRef(null); const over = useRef(null); const texts = useRef<(HTMLSpanElement | null)[]>([]); const api = useRef<{ toggle: (i: number, fromUser: boolean) => void } | null>(null); useEffect(() => { const node = root.current; if (!node) return; const fit = () => setScale(Math.max(0.6, Math.min(1.16, (node.clientWidth - 24) / SW))); fit(); const ro = new ResizeObserver(fit); ro.observe(node); return () => ro.disconnect(); }, []); useEffect(() => { const mc = marks.current, oc = over.current, node = root.current; if (!mc || !oc || !node) return; const g = mc.getContext("2d"), o = oc.getContext("2d"); if (!g || !o) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const px = Math.min(2, window.devicePixelRatio || 1) * 1.16; mc.width = CW * px; mc.height = CH * px; oc.width = (SW + PAD * 2) * px; oc.height = (SH + PAD * 2) * px; g.setTransform(px, 0, 0, px, 0, 0); let seed = 11; const rand = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const tooth = (x: number, y: number) => { const n = Math.sin(Math.floor(x * 1.6) * 12.9898 + Math.floor(y * 1.6) * 78.233) * 43758.5453; return n - Math.floor(n); }; // Geometry of a row, in card pixels. const rowY = (i: number) => HEAD + ROW * i + ROW / 2; const tickPath = (i: number) => { const bx = 35, by = rowY(i), pts: number[][] = []; for (let k = 0; k <= 8; k++) { const t = k / 8; pts.push([bx - 8.5 + 7 * t, by - 1 + 10 * t * (0.7 + 0.3 * t)]); } for (let k = 1; k <= 18; k++) { const t = k / 18; pts.push([bx - 1.5 + 22 * t + 2 * Math.sin(t * Math.PI), by + 9 - 31 * t + 3 * Math.sin(t * Math.PI)]); } return pts; }; const strikePath = (i: number) => { const w = texts.current[i]?.offsetWidth ?? 220, x0 = 56, x1 = 62 + w + 8, y = rowY(i) + 1.5, pts: number[][] = []; const lift = 1.5 + rand() * 2.5, ph = rand() * 6; for (let k = 0; k <= 40; k++) { const t = k / 40; pts.push([x0 + (x1 - x0) * t, y - lift * t + 0.9 * Math.sin(t * 7 + ph) + 0.5 * Math.sin(t * 19 + ph)]); } return pts; }; const measure = (pts: number[][]) => { const acc = [0]; for (let i = 1; i < pts.length; i++) acc.push(acc[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1])); return acc; }; const at = (pts: number[][], acc: number[], d: number) => { let i = 1; while (i < acc.length - 1 && acc[i] < d) i++; const t = Math.max(0, Math.min(1, (d - acc[i - 1]) / Math.max(0.0001, acc[i] - acc[i - 1]))); return [pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * t, pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * t]; }; // Graphite is laid as specks that skip the low spots in the paper. const speck = (x: number, y: number, press: number, wide: number) => { for (let n = 0; n < 9; n++) { const dx = (rand() + rand() - 1) * wide, dy = (rand() + rand() - 1) * wide; if (tooth(x + dx, y + dy) < 0.2) continue; const s = 0.5 + rand() * 0.6; g.fillStyle = `rgba(50,52,60,${((0.07 + 0.25 * rand()) * press).toFixed(3)})`; g.fillRect(x + dx - s / 2, y + dy - s / 2, s, s); } }; const lay = (pts: number[][], acc: number[], from: number, to: number, wide = 1.05) => { const total = acc[acc.length - 1]; for (let d = from; d < to; d += 0.45) { const p = at(pts, acc, d), t = d / total; speck(p[0], p[1], 0.7 + 0.5 * Math.sin(Math.min(1, t * 1.15) * Math.PI) ** 0.6, wide); } }; const layAll = (i: number) => { [tickPath(i), strikePath(i)].forEach((pts, n) => { const acc = measure(pts); lay(pts, acc, 0, acc[acc.length - 1], n ? 1.05 : 1.5); }); }; const rub = (x: number, y: number, power: number) => { g.save(); g.globalCompositeOperation = "destination-out"; const r = g.createRadialGradient(x, y, 0, x, y, 11); r.addColorStop(0, `rgba(0,0,0,${power})`); r.addColorStop(0.6, `rgba(0,0,0,${power * 0.7})`); r.addColorStop(1, "rgba(0,0,0,0)"); g.fillStyle = r; g.fillRect(x - 12, y - 12, 24, 24); g.restore(); }; const wipeRow = (i: number, alpha: number) => { g.save(); g.globalCompositeOperation = "destination-out"; g.fillStyle = `rgba(0,0,0,${alpha})`; g.fillRect(0, rowY(i) - ROW / 2 - 2, CW, ROW + 2); g.restore(); }; const pose = { ...REST }; const light = { x: -0.5, y: -0.86, to: -0.5 }; const crumbs: Crumb[] = []; let sweep = 0; const drawPencil = () => { const { x, y, a, tl, el } = pose, c = Math.cos(a), s = Math.sin(a), h = THICK / 2; // Shadow: it parts from the pencil at whichever end is lifted off the card. o.save(); o.shadowColor = "rgba(8,14,12,0.5)"; o.shadowBlur = (2.5 + (tl + el) * 0.1) * px; o.shadowOffsetX = 4000 * px; o.shadowOffsetY = 0; o.lineCap = "round"; o.lineWidth = THICK * PS - 3; o.strokeStyle = "#000"; o.beginPath(); o.moveTo(x + c * 9 + (tl + 1.5) * 0.55 - 4000, y + s * 9 + (tl + 1.5) * 0.9); o.lineTo(x + c * (G - 8) + (el + 1.5) * 0.55 - 4000, y + s * (G - 8) + (el + 1.5) * 0.9); o.stroke(); o.restore(); o.save(); o.translate(x, y); o.rotate(a); o.scale(PS, PS); // How much each long side faces the lamp. The lamp does not turn with the pencil. const up = 0.5 + 0.5 * (s * light.x - c * light.y), dn = 1 - up; const band = (col: number[], f: number) => mix(shade(col, 0.52), shade(col, 1.22), f); const across = (col: number[]) => { const gr = o.createLinearGradient(0, -h, 0, h); gr.addColorStop(0, band(col, up)); gr.addColorStop(0.5, mix(col, [255, 255, 255], 0.1)); gr.addColorStop(1, band(col, dn)); return gr; }; // Eraser, a little grey at the working end. o.beginPath(); o.moveTo(LEN - 20, -h + 0.4); o.lineTo(LEN - 6, -h + 0.4); o.quadraticCurveTo(LEN, -h + 0.4, LEN, 0); o.quadraticCurveTo(LEN, h - 0.4, LEN - 6, h - 0.4); o.lineTo(LEN - 20, h - 0.4); o.closePath(); o.fillStyle = across([226, 142, 140]); o.fill(); const grime = o.createLinearGradient(LEN - 9, 0, LEN, 0); grime.addColorStop(0, "rgba(70,62,66,0)"); grime.addColorStop(1, "rgba(70,62,66,0.42)"); o.fillStyle = grime; o.fill(); // Ferrule: brass tube with two crimped rings. const brass = o.createLinearGradient(0, -h - 0.7, 0, h + 0.7); brass.addColorStop(0, band([196, 150, 62], up)); brass.addColorStop(0.2 + 0.25 * dn, "#fff3c4"); brass.addColorStop(0.55, "#c9a04a"); brass.addColorStop(1, band([150, 106, 34], dn)); o.fillStyle = brass; o.fillRect(LEN - 42, -h - 0.7, 23, THICK + 1.4); for (const fx of [LEN - 38, LEN - 34.5, LEN - 27, LEN - 23.5]) { o.fillStyle = "rgba(60,36,6,0.5)"; o.fillRect(fx, -h - 0.7, 1, THICK + 1.4); o.fillStyle = "rgba(255,244,200,0.55)"; o.fillRect(fx + 1, -h - 0.7, 0.7, THICK + 1.4); } o.fillStyle = "rgba(40,20,0,0.35)"; o.fillRect(LEN - 42.6, -h, 0.9, THICK); // Hexagonal body: three flats, each one colour. o.fillStyle = band(LACQUER, up); o.fillRect(27, -h, LEN - 69, h / 2); o.fillStyle = band(LACQUER, dn); o.fillRect(27, h / 2, LEN - 69, h / 2); const flat = o.createLinearGradient(0, -h / 2, 0, h / 2); flat.addColorStop(0, mix(LACQUER, [255, 255, 255], 0.2)); flat.addColorStop(0.5, mix(LACQUER, [255, 255, 255], 0.04)); flat.addColorStop(1, mix(shade(LACQUER, 0.86), [0, 0, 0], 0)); o.fillStyle = flat; o.fillRect(27, -h / 2, LEN - 69, h); o.fillStyle = "rgba(0,0,0,0.16)"; o.fillRect(27, (up > dn ? h / 2 : -h / 2) - 0.3, LEN - 69, 0.6); o.fillStyle = "rgba(255,255,255,0.3)"; o.fillRect(27, (up > dn ? -h / 2 : h / 2) - 0.3, LEN - 69, 0.6); // Lamp streak on the top flat, and the foil stamp. const streakY = -h / 2 + 1.4 + (up > dn ? 0 : h - 2.8); const streak = o.createLinearGradient(40, 0, LEN - 46, 0); streak.addColorStop(0, "rgba(255,255,255,0)"); streak.addColorStop(0.12, "rgba(255,255,255,0.75)"); streak.addColorStop(0.5, "rgba(255,255,255,0.38)"); streak.addColorStop(0.9, "rgba(255,255,255,0.7)"); streak.addColorStop(1, "rgba(255,255,255,0)"); o.fillStyle = streak; o.fillRect(40, streakY - 0.55, LEN - 86, 1.1); o.font = "700 4.6px ui-sans-serif, system-ui, Helvetica, Arial, sans-serif"; o.textBaseline = "middle"; o.textAlign = "right"; o.fillStyle = "rgba(60,14,4,0.55)"; o.fillText(FOIL, LEN - 52, 1.5); o.fillStyle = "#f6dc93"; o.fillText(FOIL, LEN - 52, 1.1); // Sharpened wood: the paint ends in scallops, one to a flat. o.beginPath(); o.moveTo(7, -1.3); o.lineTo(29, -h); o.lineTo(37, -h); o.quadraticCurveTo(26, -h * 0.75, 37, -h / 2); o.quadraticCurveTo(19, 0, 37, h / 2); o.quadraticCurveTo(26, h * 0.75, 37, h); o.lineTo(29, h); o.lineTo(7, 1.3); o.closePath(); o.fillStyle = across([228, 190, 140]); o.fill(); o.lineWidth = 0.7; o.strokeStyle = "rgba(70,24,8,0.45)"; o.beginPath(); o.moveTo(37, -h); o.quadraticCurveTo(26, -h * 0.75, 37, -h / 2); o.quadraticCurveTo(19, 0, 37, h / 2); o.quadraticCurveTo(26, h * 0.75, 37, h); o.stroke(); o.lineWidth = 0.4; o.strokeStyle = "rgba(120,76,30,0.3)"; for (let k = -3; k <= 3; k++) { o.beginPath(); o.moveTo(8, k * 0.3); o.lineTo(27 + Math.abs(k), k * 1.75); o.stroke(); } // Graphite point. o.beginPath(); o.moveTo(0, 0); o.lineTo(7.4, -1.45); o.lineTo(7.4, 1.45); o.closePath(); o.fillStyle = "#34353b"; o.fill(); o.lineWidth = 0.5; o.strokeStyle = "rgba(255,255,255,0.4)"; o.beginPath(); o.moveTo(1.5, up > dn ? -0.2 : 0.2); o.lineTo(7, up > dn ? -1 : 1); o.stroke(); o.restore(); }; const drawOver = () => { o.setTransform(px, 0, 0, px, PAD * px, PAD * px); o.clearRect(-PAD, -PAD, SW + PAD * 2, SH + PAD * 2); for (const cr of crumbs) { const dx = Math.cos(cr.r) * cr.len, dy = Math.sin(cr.r) * cr.len, al = Math.min(1, cr.life); o.lineCap = "round"; o.lineWidth = 1.5; o.strokeStyle = `rgba(20,20,24,${0.26 * al})`; o.beginPath(); o.moveTo(cr.x - dx + 0.8, cr.y - dy + 1.2); o.lineTo(cr.x + dx + 0.8, cr.y + dy + 1.2); o.stroke(); o.lineWidth = 1.35; o.strokeStyle = `rgba(${Math.round(158 + cr.tone * 44)},${Math.round(132 + cr.tone * 14)},${Math.round(134 + cr.tone * 12)},${al})`; o.beginPath(); o.moveTo(cr.x - dx, cr.y - dy); o.lineTo(cr.x + dx, cr.y + dy); o.stroke(); } drawPencil(); }; // A small queue of timed moves; the pencil does one thing at a time. const queue: Seg[] = []; let cur: (Seg & { t: number }) | null = null; const jobs: { i: number; on: boolean }[] = []; let busy = false; const glide = (to: () => { x: number; y: number; a: number; tl: number; el: number }, dur: number): Seg => { let from = { ...pose }, target = { ...pose }; return { dur, start: () => { from = { ...pose }; target = to(); let d = target.a - from.a; while (d > Math.PI) d -= Math.PI * 2; while (d < -Math.PI) d += Math.PI * 2; target.a = from.a + d; }, step: (k) => { const e = ease(k); pose.x = from.x + (target.x - from.x) * e; pose.y = from.y + (target.y - from.y) * e; pose.a = from.a + (target.a - from.a) * e; pose.tl = from.tl + (target.tl - from.tl) * e + Math.sin(k * Math.PI) * 6; pose.el = from.el + (target.el - from.el) * e + Math.sin(k * Math.PI) * 6; }, }; }; const write = (pts: number[][], dur: number, wide: number): Seg[] => { const acc = measure(pts), total = acc[acc.length - 1]; let laid = 0; const lean = (x: number) => 0.92 + 0.36 * Math.max(0, Math.min(1, (x - 40) / 320)); return [ glide(() => ({ x: CX + pts[0][0], y: CY + pts[0][1], a: lean(pts[0][0]), tl: 9, el: 44 }), 300), { dur: 70, step: (k) => { pose.tl = 9 * (1 - k); } }, { dur, step: (k) => { const d = total * ease(k); lay(pts, acc, laid, d, wide); laid = d; const p = at(pts, acc, d); pose.x = CX + p[0]; pose.y = CY + p[1]; pose.a = lean(p[0]) + 0.025 * Math.sin(d * 0.5); pose.tl = 0; pose.el = 44; } }, { dur: 90, step: (k) => { pose.tl = 9 * k; } }, ]; }; const home = (): Seg => glide(() => ({ ...REST }), 460); const finish = (): Seg => ({ dur: 1, step: () => {}, end: () => { busy = false; next(); } }); const tick = (i: number) => { queue.push(...write(tickPath(i), 240, 1.5), ...write(strikePath(i), 360, 1.05), home(), finish()); }; const erase = (i: number) => { const strike = strikePath(i), acc = measure(strike), total = acc[acc.length - 1], by = rowY(i); // The rubbing end is the eraser, so the point is worked out from where the eraser touches. const place = (ex: number, ey: number, a: number) => { pose.a = a; pose.x = CX + ex - Math.cos(a) * G; pose.y = CY + ey - Math.sin(a) * G; pose.el = 0; pose.tl = 46; }; const lean = (x: number) => Math.PI + 0.92 + 0.36 * Math.max(0, Math.min(1, (x - 40) / 320)); let spawn = 0; queue.push( glide(() => { const a = lean(strike[strike.length - 1][0]); return { x: CX + strike[strike.length - 1][0] - Math.cos(a) * G, y: CY + strike[strike.length - 1][1] - Math.sin(a) * G, a, tl: 46, el: 8 }; }, 520), { dur: 1150, step: (k) => { // Work back along the line in short scrubbing strokes, then finish on the tick. const run = Math.min(1, k / 0.72), d = total * (1 - run) + 14 * Math.sin(k * 46), p = at(strike, acc, Math.max(0, Math.min(total, d))); const onTick = k > 0.72, tk = (k - 0.72) / 0.28; const ex = onTick ? 37 + 9 * Math.sin(tk * 30) : p[0], ey = onTick ? by - 4 + 9 * Math.cos(tk * 19) : p[1] + 4 * Math.sin(k * 71); rub(ex, ey, 0.34); place(ex, ey, lean(ex) + 0.03 * Math.sin(k * 46)); if (++spawn % 3 === 0 && crumbs.length < 46) { const dir = rand() * Math.PI * 2, v = 30 + rand() * 70; crumbs.push({ x: CX + ex + (rand() - 0.5) * 10, y: CY + ey + (rand() - 0.5) * 8, vx: Math.cos(dir) * v, vy: Math.sin(dir) * v * 0.7 + 14, r: rand() * Math.PI, len: 0.4 + rand() * 1.3, tone: rand(), life: 1 }); } }, end: () => { wipeRow(i, 0.9); }, }, home(), { dur: 1, step: () => {}, end: () => { sweep = 1; busy = false; next(); } }, ); }; const next = () => { if (busy) return; const job = jobs.shift(); if (!job) return; busy = true; if (job.on) tick(job.i); else erase(job.i); wake(); }; let raf = 0, last = 0, seen = true; const frame = (now: number) => { raf = 0; const dt = Math.min(0.034, (now - last) / 1000); last = now; if (!cur && queue.length) { cur = { ...(queue.shift() as Seg), t: 0 }; cur.start?.(); } if (cur) { cur.t += dt * 1000; const k = Math.min(1, cur.t / cur.dur); cur.step(k); if (k >= 1) { const ended = cur; cur = null; ended.end?.(); } } let moving = false; for (let n = crumbs.length - 1; n >= 0; n--) { const cr = crumbs[n]; if (sweep > 0) { cr.vx += 900 * dt; cr.vy += 260 * dt; cr.life -= dt * 1.5; } cr.x += cr.vx * dt; cr.y += cr.vy * dt; cr.vx *= Math.pow(0.002, dt); cr.vy *= Math.pow(0.002, dt); cr.r += cr.vx * dt * 0.08; if (Math.abs(cr.vx) + Math.abs(cr.vy) > 2) moving = true; if (cr.life <= 0) crumbs.splice(n, 1); } if (sweep > 0 && crumbs.length === 0) sweep = 0; const lamp = light.to - light.x; light.x += lamp * Math.min(1, dt * 5); light.y = -Math.sqrt(Math.max(0.05, 1 - light.x * light.x)); drawOver(); if ((cur || queue.length || moving || sweep > 0 || Math.abs(lamp) > 0.01) && seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; let touched = false; api.current = { toggle: (i, fromUser) => { if (fromUser) touched = true; const on = !doneRef.current[i]; doneRef.current = doneRef.current.map((v, n) => (n === i ? on : v)); setDone(doneRef.current); if (reduce) { if (on) layAll(i); else wipeRow(i, 1); return; } jobs.push({ i, on }); next(); }, }; tasks.forEach((_, i) => { if (doneRef.current[i]) layAll(i); }); drawOver(); // Until someone clicks, it works down the card by itself. let step = 0; const order = [2, 0, 3, 1]; const demo = () => { if (touched || reduce || !seen || document.hidden || busy) return; api.current?.toggle(order[step++ % order.length] % tasks.length, false); }; const first = window.setTimeout(demo, 380); const loop = window.setInterval(demo, 3900); const onMove = (e: PointerEvent) => { const b = node.getBoundingClientRect(); light.to = -0.5 + ((e.clientX - b.left) / b.width - 0.5) * 0.9; wake(); }; node.addEventListener("pointermove", onMove); const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen) wake(); }); io.observe(node); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); window.clearTimeout(first); window.clearInterval(loop); api.current = null; node.removeEventListener("pointermove", onMove); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, []); const left = done.filter((v) => !v).length; return (

{/* a spare card under the one in use */}

{CARD.title}

{CARD.date}

{tasks.map((t, i) => ( ))}

Tick a line and the pencil writes it. Untick it and the eraser takes it back.

{left === 0 ? "Everything is done" : `${left} of ${tasks.length} still to do`}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L61",null,{"files":[{"path":"components/we-inc/index-card-checklist-where-a-pencil-draws-each-tick-in-graphite-and-its-eraser-rubs-it-out.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]