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:T5a2b,import { useEffect, useLayoutEffect, useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react"; import { motion, useReducedMotion } from "framer-motion"; // The movable blocks of type, top to bottom. The menu line above them is fixed. `h` is the block height in the drawing. const sections = [ { id: "hero", name: "Hero", h: 96 }, { id: "features", name: "Features", h: 62 }, { id: "pricing", name: "Pricing", h: 62 }, { id: "footer", name: "Footer", h: 62 }, ]; const school = "Saltline"; const headline = "Learn to surf at low tide."; const photo = { bg: "#8a8f98", src: "https://images.pexels.com/photos/16248182/pexels-photo-16248182.jpeg?auto=compress&cs=tinysrgb&w=400" }; const points = ["Boards included", "Small groups", "All ages"]; const lessons = [ { name: "Taster", price: "$45" }, { name: "Week", price: "$190" }, { name: "Private", price: "$80" }, ]; const SW = 176, NAVH = 26, TIGHT = 2, SLACK = 3.5; // type width, menu line height, and the gap between blocks locked and unlocked const COL = NAVH + sections.reduce((s, x) => s + x.h + TIGHT, 0); // height of the locked column of type const F = 20, IN = 6; // chase bar thickness and the clearance inside it const WELL_W = IN + SW + 4 + 14 + 3 + 20 + IN, WELL_H = IN + COL + 4 + 14 + 3 + 20 + IN; const CW = WELL_W + F * 2, CH = WELL_H + F * 2; const MX = 16, MY = 20; // paper margins const PAPER_W = SW + MX * 2, PAPER_H = COL + MY * 2; const CX = 16, CY = 34, PX = CX + CW + 14, PY = CY + F + IN - MY; const HINGE = (CX + F + IN + SW + PX + MX) / 2 - PX; // the line the sheet turns over on, measured from its left edge const W = PX + PAPER_W + 16, H = CY + CH + 34; const INK = "#2f7df0", PRINT = "#2667d2", SHOULDER = "#8e929b", PAPER = "#F6F4EF"; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const P3 = { transformStyle: "preserve-3d" as const }; const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; const STEEL = "bg-[#4a505c] bg-[linear-gradient(150deg,#8a92a2_0%,#5a6170_18%,#3a3f4a_55%,#262a33_100%)]"; const WOOD = "bg-[#cdbd9d] bg-[linear-gradient(180deg,#e0d2b5_0%,#cdbd9d_50%,#b3a281_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.3),0_2px_0_#7d6f55,0_3px_4px_rgba(0,0,0,0.6)]"; // One section, drawn once and used twice: as inked metal in the forme (mirrored by its parent) and as the print on the sheet. function Section({ id, metal }: { id: string; metal: boolean }): ReactNode { const ink = metal ? INK : PRINT, ground = metal ? SHOULDER : PAPER; const raised: CSSProperties = metal ? { color: ink, textShadow: "0 0.8px 0 rgba(11,13,18,0.6), 0 -0.5px 0 rgba(190,220,255,0.7)" } : { color: ink }; const solid: CSSProperties = metal ? { background: `linear-gradient(180deg,#5c9bf7,${ink})`, color: "#1c3f7c", boxShadow: "0 1px 0 rgba(11,13,18,0.6), inset 0 0.5px 0 rgba(210,230,255,0.8)" } : { background: ink, color: ground }; const rule: CSSProperties = metal ? { background: ink, boxShadow: "0 0.8px 0 rgba(11,13,18,0.6)" } : { background: ink }; if (id === "nav") return ( {school} LessonsBoard hireFind us ); if (id === "hero") return ( Surf school {headline} Book a lesson

{!metal && } ); if (id === "features") return ( {points.map((p, i) => ( 0{i + 1} {p} ))} ); if (id === "pricing") return ( {lessons.map((l, i) => ( {l.name} {l.price} ))} ); return ( {school} Surf School Harbour Road, out at every low tide Tide timesVouchersWrite to us ); } // A two-part steel quoin seen from above. Locked, the wedges ride up each other and fill the channel. function Quoin({ locked, style, flat }: { locked: boolean; style: CSSProperties; flat?: boolean }) { const reduce = useReducedMotion(); const t = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 420, damping: 22 }; return ( ); } export default function TypesettersForme() { const reduce = useReducedMotion(); const root = useRef(null); const timers = useRef([]); const busy = useRef(false); const [scale, setScale] = useState(1); const [order, setOrder] = useState(sections.map((s) => s.id)); const [locked, setLocked] = useState(true); const [moving, setMoving] = useState(null); const [sheet, setSheet] = useState<"shown" | "gone" | "laid">("shown"); const [pulls, setPulls] = useState(1); const [auto, setAuto] = useState(true); const [said, setSaid] = useState("Locked up and proofed. Press a block of type to move it."); useIsoLayoutEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.36, (el.clientWidth - 12) / W)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); const later = (ms: number, fn: () => void) => { timers.current.push(window.setTimeout(fn, ms)); }; useEffect(() => () => timers.current.forEach((t) => window.clearTimeout(t)), []); // Unlock, move one block a place, lock up again, lay a sheet on the type and turn it over. const move = (id: string, dir: -1 | 1) => { const from = order.indexOf(id), to = from + dir; if (busy.current || to < 0 || to >= order.length) return; const next = order.slice(); next[from] = order[to]; next[to] = id; const name = sections.find((s) => s.id === id)?.name ?? ""; if (reduce) { setOrder(next); setPulls((n) => n + 1); setSaid(`${name} moved to place ${to + 1}. New proof pulled.`); return; } busy.current = true; setSheet("gone"); setLocked(false); setSaid("Quoins loosened."); later(520, () => { setMoving(id); setOrder(next); setSaid(`${name} moved to place ${to + 1} of ${order.length}.`); }); later(1250, () => { setMoving(null); setLocked(true); setSaid("Locked up tight."); }); later(1700, () => { setPulls((n) => n + 1); setSheet("laid"); setSaid("Sheet laid on the type."); }); later(2250, () => { setSheet("shown"); setSaid("New proof pulled. The page reads the right way round."); }); later(3300, () => { busy.current = false; }); }; const moveRef = useRef(move); moveRef.current = move; // The self-running demo holds the finished proof first, then re-sets the page every few seconds. useEffect(() => { if (reduce || !auto) return; const steps: [string, -1 | 1][] = [["pricing", -1], ["pricing", -1], ["hero", -1], ["features", -1]]; let n = 0; const step = () => { const s = steps[n++ % steps.length]; moveRef.current(s[0], s[1]); }; let every = 0; const first = window.setTimeout(() => { step(); every = window.setInterval(step, 4800); }, 6000); return () => { window.clearTimeout(first); window.clearInterval(every); }; }, [reduce, auto]); const press = (id: string) => { setAuto(false); move(id, order.indexOf(id) === 0 ? 1 : -1); }; const onKey = (e: ReactKeyboardEvent, id: string) => { if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return; e.preventDefault(); setAuto(false); move(id, e.key === "ArrowUp" ? -1 : 1); }; const yOf = (id: string, gap: number) => { let y = NAVH + gap; for (const o of order) { if (o === id) break; y += (sections.find((s) => s.id === o)?.h ?? 0) + gap; } return y; }; const gap = locked ? TIGHT : SLACK; const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 300, damping: 26 }; const METAL = "rounded-[2px] bg-[#a4a8b1] bg-[linear-gradient(160deg,#c3c7ce_0%,#9da1aa_45%,#858993_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.75),inset_1px_0_0_rgba(255,255,255,0.35),inset_0_-1px_0_rgba(0,0,0,0.4),0_1.5px_0_#5d6169,0_3px_0_#44474e,0_4px_5px_rgba(0,0,0,0.7)]"; return (

{/* the chase: a steel frame standing on the stone */}
{/* the well, with the bed of the stone showing where nothing is set */}
{/* the menu line, fixed at the head */} {sections.map((s, i) => { const slot = order.indexOf(s.id), up = moving === s.id; return ( press(s.id)} onKeyDown={(e) => onKey(e, s.id)} aria-label={`${s.name} block of type, place ${slot + 1} of ${order.length}. Press to move it ${slot === 0 ? "down" : "up"} one place, or use the up and down arrow keys.`} initial={false} animate={{ y: yOf(s.id, gap), x: locked ? 0 : [1.2, -1.4, 0.8, -0.6][i], rotate: locked ? 0 : [0.5, -0.4, 0.35, -0.5][i], scale: up ? 1.04 : 1 }} transition={spring} style={{ left: IN, top: IN, width: SW, height: s.h, zIndex: up ? 3 : 1 }} className={`absolute cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-[#F6F4EF] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0B0D12] ${METAL}`} >
); })} {/* wooden furniture and the quoins that squeeze it */} {/* the quoin key, standing in the lower side quoin */}
{/* the sheet: laid face down on the type, then turned over to the right */}

{order.map((id) => ( s.id === id)?.h }}>
))} {[[6, 6], [PAPER_W - 12, 6], [6, PAPER_H - 12], [PAPER_W - 12, PAPER_H - 12]].map(([x, y]) => ( ))} Proof {String(pulls).padStart(2, "0")}

); } 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/typesetters-forme-where-page-sections-are-locked-up-as-metal-type-in-a-steel-chase-and-pulled-as-a-blue-proof.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]