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:T591a,import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; // The tape cartridges. `tone` is the vinyl, `name` is read out to screen readers. const tapes = [ { name: "Green", tone: "#1c7a4c" }, { name: "Black", tone: "#1d1d20" }, { name: "Cobalt", tone: "#1f4fcf" }, { name: "Red", tone: "#c22f2a" }, { name: "Mustard", tone: "#cf9318" }, ]; // Labels already stuck down when the page opens, newest first. const starting = [ { text: "IN TRANSIT", tape: 2 }, { text: "ON HOLD", tape: 4 }, { text: "DISPATCHED", tape: 1 }, ]; // What the machine prints by itself until someone uses it. const demo = [ { text: "PAID", tape: 0 }, { text: "OVERDUE", tape: 3 }, { text: "PACKED", tape: 2 }, { text: "FRAGILE", tape: 1 }, ]; const BODY = "#e3562c"; // the moulded shell const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&-+/"; // round the wheel, clockwise const MAX = 10; // longest label, in characters const SW = 540, SH = 478; // scene, in design pixels const WX = 404, WY = 150; // wheel centre const SLOT = 196; // where the tape leaves the nose const CELL = 16, LEAD = 14, TAPE_H = 28; const STEP = 360 / CHARS.length; const widthOf = (text: string) => LEAD * 2 + CELL * text.length; const clean = (raw: string) => raw.toUpperCase().split("").filter((c) => c === " " || CHARS.includes(c)).join("").slice(0, MAX); const tilt = [-3.2, 2.4, -1.4, 3.1, -2.2, 1.6]; const drift = [-18, 22, -34, 12, 30, -8]; const teeth = (() => { const left: string[] = [], right: string[] = []; for (let i = 0; i <= 8; i++) { left.push(`${i % 2 ? 1.6 : 0}px ${(i / 8) * 100}%`); right.unshift(`calc(100% - ${i % 2 ? 0 : 1.6}px) ${(i / 8) * 100}%`); } return `polygon(${[...left, ...right].join(",")})`; })(); function Tape({ text, tone }: { text: string; tone: string }) { return ( {text.split("").map((c, i) => ( {c === " " ? " " : c} ))} ); } export default function EmbossingLabelMaker() { const reduce = useReducedMotion(); const [labels, setLabels] = useState(starting.map((l, i) => ({ id: i, text: l.text, tape: l.tape }))); const [job, setJob] = useState<{ text: string; tape: number } | null>(null); const [out, setOut] = useState(0); const [turn, setTurn] = useState({ deg: 0, ms: 0 }); const [lens, setLens] = useState("A"); const [punch, setPunch] = useState(false); const [cut, setCut] = useState(false); const [draft, setDraft] = useState("READY"); const [tape, setTape] = useState(3); const [scale, setScale] = useState(1); const [said, setSaid] = useState(""); const root = useRef(null); const live = useRef({ busy: false, alive: true, touched: false, seen: true, at: 0, deg: 0, id: 100, step: 0 }); useEffect(() => { const node = root.current; if (!node) return; const fit = () => setScale(Math.max(0.58, Math.min(1.12, (node.clientWidth - 20) / SW))); fit(); const ro = new ResizeObserver(fit); ro.observe(node); const io = new IntersectionObserver(([entry]) => { live.current.seen = entry.isIntersecting; }); io.observe(node); const onMove = (e: PointerEvent) => { const b = node.getBoundingClientRect(); node.style.setProperty("--glare", `${(110 - ((e.clientX - b.left) / b.width) * 120).toFixed(1)}%`); node.dataset.lit = "1"; }; node.addEventListener("pointermove", onMove); return () => { ro.disconnect(); io.disconnect(); node.removeEventListener("pointermove", onMove); }; }, []); const print = async (text: string, tapeIndex: number) => { const s = live.current; if (s.busy || !text.trim()) return; const stick = () => { setLabels((prev) => [{ id: s.id++, text, tape: tapeIndex }, ...prev].slice(0, 4)); setSaid(`Printed ${text} on ${tapes[tapeIndex].name.toLowerCase()} tape`); }; if (reduce) { stick(); return; } s.busy = true; const wait = (ms: number) => new Promise((done) => window.setTimeout(done, ms)); setJob({ text, tape: tapeIndex }); setOut(0); await wait(90); for (let n = 0; n < text.length && s.alive; n++) { const to = CHARS.indexOf(text[n]); if (to >= 0 && to !== s.at) { // Turn the short way round to the next letter; a longer trip takes a little longer. let hop = to - s.at; if (hop > CHARS.length / 2) hop -= CHARS.length; if (hop < -CHARS.length / 2) hop += CHARS.length; const ms = 80 + Math.abs(hop) * 7; s.at = to; s.deg -= hop * STEP; setTurn({ deg: s.deg, ms }); setLens(text[n]); await wait(ms + 10); } setPunch(true); setOut(LEAD + (n + 1) * CELL); await wait(80); setPunch(false); await wait(34); } setOut(widthOf(text)); await wait(150); setCut(true); await wait(100); if (!s.alive) return; stick(); setJob(null); setOut(0); setCut(false); await wait(260); s.busy = false; }; const printRef = useRef(print); printRef.current = print; useEffect(() => { const s = live.current; s.alive = true; if (reduce) return; const go = () => { if (s.touched || s.busy || !s.seen || document.hidden) return; const next = demo[s.step++ % demo.length]; printRef.current(next.text, next.tape); }; const first = window.setTimeout(go, 260); const loop = window.setInterval(go, 3800); return () => { s.alive = false; window.clearTimeout(first); window.clearInterval(loop); }; }, [reduce]); const text = clean(draft).trim(); const feed = job ? widthOf(job.text) : 0; const BOX = widthOf("W".repeat(MAX)); return (

{/* shadow of the machine on the desk */} {/* the tape being fed out, under the nose */}

{job ? (

) : null}

{/* printed labels, newest on top */}

{labels.map((l, i) => { const w = widthOf(l.text); return ( {l.text} ); })}

{/* the shell */} {/* the letter wheel */}

{CHARS.split("").map((c, i) => ( {c} ))} {[0, 120, 240].map((d) => ( ))}

{/* light on the wheel does not turn with it */}

{/* hub cap with a thumb dish */}

{/* reading lens over the chosen letter */}

{ e.preventDefault(); live.current.touched = true; print(text, tape); }} > Label text, up to {MAX} characters { live.current.touched = true; setDraft(clean(e.target.value)); }} onFocus={() => { live.current.touched = true; }} maxLength={MAX} autoComplete="off" spellCheck={false} className="h-11 w-[150px] rounded-full border border-[#b9ad95] bg-[#fbf8f1] px-4 font-mono text-[14px] font-semibold uppercase tracking-[0.14em] text-[#2a2520] outline-none placeholder:text-[#6f6656] focus-visible:ring-2 focus-visible:ring-[#b23c1a]" placeholder="LABEL" />

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

{said}

); } 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/embossing-label-maker-with-a-letter-wheel-that-punches-status-badges-into-glossy-tape.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]