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:T5769,import { useEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent } from "react"; import { useReducedMotion } from "framer-motion"; /** The job on the press. The ticket carries the sentence; the sheet carries the page it turns into. */ const job = { sentence: "A surf school in Ericeira with lessons you can book online.", brand: "Low Tide Surf School", links: ["Lessons", "Boards", "Tides"], headline: ["Learn to read", "the water."], sub: "Small groups on the north beach, wetsuit and board included.", cta: "Book a lesson", photo: { src: "https://images.pexels.com/photos/1549180/pexels-photo-1549180.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Surfers carrying longboards on their heads across a sunny beach" }, lessons: [ { name: "First waves", when: "Tue and Sat" }, { name: "Kids club", when: "Sundays" }, { name: "One to one", when: "By request" }, ], }; const BLUE = "#4F98FB"; const INK = "#0B0D12"; // Plan measurements of the press bed in design pixels (looking straight down). The camera tilts it afterwards. const BED_W = 600; const BED_L = 856; const SHEET_X = 84; const SHEET_Y = 220; const SHEET_W = 432; const SHEET_H = 488; const R = 34; // cylinder radius const Y0 = 214; // where the cylinder touches the bed before the pull const Y1 = 812; // and after it const TILT = 50; const SCENE_W = 900; const SCENE_H = 760; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const deboss = "0 1px 0 rgba(255,255,255,0.85), 0 -0.5px 0 rgba(0,0,0,0.28)"; function Bolt({ x, y }: { x: number; y: number }) { return ( ); } function Mark({ x, y }: { x: number; y: number }) { return ( ); } export default function ProofPress() { const reduce = useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const bedRef = useRef(null); const slotRefs = useRef<(HTMLSpanElement | null)[]>([]); const knurlRefs = useRef<(HTMLDivElement | null)[]>([]); const [value, setValue] = useState(100); const sim = useRef({ p: 0.5, v: 0, target: 1, dragging: false, y0: 0, p0: 0, scale: 1, next: 0, held: false, shown: 100 }); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; const bed = bedRef.current; if (!wrap || !scene || !bed) return; const s = sim.current; let raf = 0; let visible = true; let last = performance.now(); s.next = last + 5200; if (reduce) s.p = 1; const measure = () => { const sc = clamp(wrap.clientWidth / 810, 0.4, 1); s.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const paint = () => { const y = Y0 + (Y1 - Y0) * s.p; bed.style.setProperty("--y", y.toFixed(2)); bed.style.setProperty("--k", (y - SHEET_Y).toFixed(2)); const turn = y / R; for (let i = 0; i < 2; i++) { const el = slotRefs.current[i]; if (!el) continue; const a = (((turn + i * Math.PI) % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2); const front = a < Math.PI; el.style.opacity = front ? Math.min(1, Math.sin(a) * 3).toFixed(2) : "0"; el.style.transform = `translateY(${(R - R * Math.cos(a) - 2).toFixed(2)}px) scaleY(${Math.max(0.15, Math.sin(a)).toFixed(3)})`; } for (const k of knurlRefs.current) if (k) k.style.backgroundPositionY = `${(y % 5).toFixed(2)}px`; const shown = Math.round(s.p * 100); if (shown !== s.shown) { s.shown = shown; setValue(shown); } }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; if (reduce) { s.p = s.target; } else if (!s.dragging) { // a heavy cylinder: slow to start, no bounce at the stops const acc = 16 * (s.target - s.p) - 7.4 * s.v; s.v += acc * dt; s.p = clamp(s.p + s.v * dt, 0, 1); if (!s.held && now > s.next) { if (s.target > 0.5) { s.target = 0; s.next = now + 2600; } else { s.target = 1; s.next = now + 6400; } } } paint(); if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(wrap); raf = requestAnimationFrame(tick); const down = (e: PointerEvent) => { if (e.button !== 0 || (e.target as HTMLElement).closest("button")) return; s.dragging = true; s.y0 = e.clientY; s.p0 = s.p; s.v = 0; scene.setPointerCapture(e.pointerId); }; const move = (e: PointerEvent) => { if (!s.dragging) return; const travel = (Y1 - Y0) * Math.cos((TILT * Math.PI) / 180) * s.scale * 0.98; const next = clamp(s.p0 + (e.clientY - s.y0) / travel, 0, 1); s.v = (next - s.p) * 30; s.p = next; }; const up = () => { if (!s.dragging) return; s.dragging = false; s.target = s.p + s.v * 0.2 > 0.5 ? 1 : 0; s.next = performance.now() + 9000; }; scene.addEventListener("pointerdown", down); scene.addEventListener("pointermove", move); scene.addEventListener("pointerup", up); scene.addEventListener("pointercancel", up); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); scene.removeEventListener("pointerdown", down); scene.removeEventListener("pointermove", move); scene.removeEventListener("pointerup", up); scene.removeEventListener("pointercancel", up); }; }, [reduce]); const go = (t: number) => { const s = sim.current; s.target = clamp(t, 0, 1); s.next = performance.now() + 9000; }; const onKey = (e: ReactKeyboardEvent) => { const s = sim.current; const step = e.key === "ArrowDown" || e.key === "ArrowRight" ? 0.1 : e.key === "ArrowUp" || e.key === "ArrowLeft" ? -0.1 : 0; if (step) { e.preventDefault(); go(Math.round((s.target + step) * 10) / 10); } else if (e.key === "Home") { e.preventDefault(); go(0); } else if (e.key === "End") { e.preventDefault(); go(1); } }; const hold = (v: boolean) => () => { sim.current.held = v; if (!v) sim.current.next = performance.now() + 3500; }; const printed = value > 50; const sans = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const steel = "linear-gradient(90deg, #5d6067 0%, #d9dbe0 22%, #f4f5f7 34%, #9da0a7 55%, #5a5d64 80%, #2c2e33 100%)"; const rack = "repeating-linear-gradient(180deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 2px, rgba(255,255,255,0.18) 2px, rgba(255,255,255,0.18) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px)"; const chrome = "linear-gradient(180deg, #17181b 0%, #5c5f66 5%, #c9ccd2 11%, #ffffff 17%, #e3e5e9 22%, #8f939a 34%, #4b4e55 47%, #1b1c20 55%, #6d6a64 59%, #d8d2c6 68%, #f1ece1 78%, #b9b4a9 88%, #4c4a46 95%, #101012 100%)"; const knurl = "repeating-linear-gradient(180deg, rgba(0,0,0,0.6) 0px, rgba(0,0,0,0.6) 1.5px, rgba(255,255,255,0.12) 1.5px, rgba(255,255,255,0.12) 2.5px, rgba(0,0,0,0) 2.5px, rgba(0,0,0,0) 5px)"; const stand = `rotateX(-${TILT}deg)`; return (

{/* shadow of the press on the table */}

{/* front and right faces of the bed casting */}

{/* the bed */}

{[16, BED_W - 46].map((x) => (

))} {/* the ticket clamped at the head of the bed: the brief, typed */}

{/* the sheet */}

{/* blank stock with pencil guides */}

{/* the impression: everything the cylinder has passed */}

{job.links.map((l) => ( {l} ))}

{job.headline.map((l) => ( {l} ))}

{job.sub}

{l.name} {l.when}

{job.cta}

{/* wet ink catching the light just behind the cylinder */}

{/* the carriage: cylinder, bearings and their shadow */}

{[0, 1].map((i) => ( { slotRefs.current[i] = el; }} className="absolute inset-x-[34px] top-0 block h-[5px]" style={{ background: "linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.9) 55%, rgba(255,255,255,0.75) 56%, rgba(255,255,255,0))", opacity: 0 }} /> ))} {[0, 1].map((e) => (

{ knurlRefs.current[e] = el; }} className="absolute inset-y-0 w-[26px]" style={{ [e ? "right" : "left"]: 0, backgroundImage: `${knurl}, linear-gradient(180deg, #050506, #4a4c52 14%, #a9acb3 20%, #3a3c41 44%, #0c0c0e 58%, #5c5952 74%, #151516 100%)`, boxShadow: e ? "inset 2px 0 2px rgba(0,0,0,0.6)" : "inset -2px 0 2px rgba(0,0,0,0.6)" }} /> ))}

{[0, 1].map((e) => ( ))}

); } 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/proof-press-with-a-steel-cylinder-that-rolls-a-typed-brief-into-a-printed-homepage.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]