62: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"] 63: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"] 64:T48d5,import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** The frames printed down the roll, top to bottom in the order they come off the roller. */ const frames = [ { title: "Veil, vermilion", src: "https://images.pexels.com/photos/18506117/pexels-photo-18506117.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in sunglasses under a sheer orange veil against a vermilion backdrop", focus: "50% 30%" }, { title: "Two neons", src: "https://images.pexels.com/photos/9998656/pexels-photo-9998656.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Young woman standing in a haze of blue and red studio light", focus: "50% 50%" }, { title: "Bandaged gloves", src: "https://images.pexels.com/photos/39325157/pexels-photo-39325157.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in an orange top and wrapped white gloves posing against an orange backdrop", focus: "50% 40%" }, { title: "Green room", src: "https://images.pexels.com/photos/7659347/pexels-photo-7659347.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a dark suit in profile against a saturated green backdrop", focus: "50% 30%" }, { title: "Rust bodysuit", src: "https://images.pexels.com/photos/14999126/pexels-photo-14999126.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman with cropped blonde hair in a rust bodysuit against a deep red backdrop", focus: "50% 30%" }, { title: "Yellow wall", src: "https://images.pexels.com/photos/35511773/pexels-photo-35511773.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a grey check blazer leaning one hand on a bright yellow wall", focus: "50% 40%" }, ]; const N = frames.length; // Everything below is in design pixels for a 300 wide roll; the whole scene is scaled to fit. const W = 300; // paper width const PHOTO = 396; // printed photo height const BAND = 58; // white band under each photo that carries the plate caption const PERIOD = PHOTO + BAND; const TOTAL = PERIOD * N; const R1 = 30; // roller radius const RUN = 476; // flat length that hangs facing you const R2 = 86; // radius of the curl where the paper meets the table const TABLE = 330; // length lying on the table const TOP_PAD = 46; const SCENE_W = 760; const SCENE_H = 790; const HOLD_MS = 2800; const mod = (a: number, n: number) => ((a % n) + n) % n; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const rad = (d: number) => (d * Math.PI) / 180; type Strip = { s: number; h: number; y: number; z: number; a: number; shade: string }; /** Cut the paper path into flat strips: many thin ones round the two curves, one each for the flat runs. */ function buildStrips(): Strip[] { const out: Strip[] = []; const yc = TOP_PAD + R1; const yb = yc + RUN; let s = 0; const topFrom = 104; const nTop = 9; for (let i = 0; i < nTop; i++) { const a0 = topFrom - (topFrom / nTop) * i; const a1 = topFrom - (topFrom / nTop) * (i + 1); const am = (a0 + a1) / 2; const h = R1 * rad(a0 - a1); const dark = 0.62 * Math.pow(Math.sin(rad(clamp(am, 0, 90))), 1.3); const glint = 0.2 * Math.exp(-Math.pow((am - 30) / 16, 2)); out.push({ s, h, y: yc - R1 * Math.sin(rad(a0)), z: -R1 + R1 * Math.cos(rad(a0)), a: am, shade: `linear-gradient(rgba(255,255,255,${glint.toFixed(3)}),rgba(255,255,255,${glint.toFixed(3)})),linear-gradient(rgba(8,8,10,${dark.toFixed(3)}),rgba(8,8,10,${dark.toFixed(3)}))`, }); s += h; } out.push({ s, h: RUN, y: yc, z: 0, a: 0, shade: "linear-gradient(180deg, rgba(8,8,10,0.30) 0%, rgba(8,8,10,0.06) 7%, rgba(8,8,10,0) 16%, rgba(8,8,10,0) 88%, rgba(255,255,255,0.05) 100%), linear-gradient(102deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0) 63%)" }); s += RUN; const nBot = 16; for (let i = 0; i < nBot; i++) { const a0 = (90 / nBot) * i; const a1 = (90 / nBot) * (i + 1); const am = (a0 + a1) / 2; const h = R2 * rad(a1 - a0); const glint = 0.05 + 0.2 * Math.exp(-Math.pow((am - 52) / 24, 2)); out.push({ s, h, y: yb + R2 * Math.sin(rad(a0)), z: R2 - R2 * Math.cos(rad(a0)), a: am, shade: `linear-gradient(rgba(255,255,255,${glint.toFixed(3)}),rgba(255,255,255,${glint.toFixed(3)}))`, }); s += h; } out.push({ s, h: TABLE, y: yb + R2, z: R2, a: 90, shade: "linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%, rgba(8,8,10,0.2) 100%)" }); return out; } const S_CENTRE = R1 * rad(104) + RUN / 2; // where along the path a frame sits when it is "current" /** One printed frame: the photograph, crop marks, and the caption band with a colour control strip. */ function Frame({ row, real }: { row: number; real: boolean }) { const i = mod(-row, N); const f = frames[i]; return (

{real ? (

) : (

)}

{/* crop marks in the margins */}

Plate {String(i + 1).padStart(2, "0")}

{f.title}

{["#19b5e8", "#e6177d", "#f6d915", "#141414", "#8a8a8a", "#c9c9c9"].map((c) => ( ))}

); } export default function PhotoProofRoll() { const reduce = useReducedMotion(); const strips = useMemo(buildStrips, []); const wrapRef = useRef(null); const sceneRef = useRef(null); const tapeRefs = useRef<(HTMLDivElement | null)[]>([]); const knurlRefs = useRef<(HTMLDivElement | null)[]>([]); const [active, setActive] = useState(0); const sim = useRef({ n: -1.25, vel: 0, target: 0, dragging: false, lastY: 0, lastT: 0, scale: 1, paused: false, nextAuto: 0, active: 0 }); const step = useCallback((dir: number) => { const s = sim.current; s.target = Math.round(s.target) + dir; s.nextAuto = performance.now() + HOLD_MS * 2; }, []); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const s = sim.current; let raf = 0; let visible = true; let last = performance.now(); s.nextAuto = last + 2200; if (reduce) s.n = 0; const measure = () => { const sc = clamp(wrap.clientWidth / 540, 0.6, 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 = () => { for (let i = 0; i < strips.length; i++) { const tape = tapeRefs.current[i]; if (!tape) continue; const off = mod(strips[i].s - S_CENTRE + PERIOD / 2 - s.n * PERIOD, TOTAL); tape.style.transform = `translate3d(0,${(-off).toFixed(2)}px,0)`; } const turn = mod(s.n * PERIOD, 6); for (const k of knurlRefs.current) if (k) k.style.backgroundPositionY = `${turn.toFixed(2)}px`; const a = mod(Math.round(s.n), N); if (a !== s.active) { s.active = a; setActive(a); } }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; if (reduce) { s.n = s.target; s.vel = 0; } else if (!s.dragging) { const acc = 46 * (s.target - s.n) - 9.6 * s.vel; s.vel += acc * dt; s.n += s.vel * dt; if (!s.paused && now > s.nextAuto) { s.target = Math.round(s.target) + 1; s.nextAuto = now + HOLD_MS; } } 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("[data-paper]")) return; s.dragging = true; s.lastY = e.clientY; s.lastT = performance.now(); s.vel = 0; scene.setPointerCapture(e.pointerId); }; const move = (e: PointerEvent) => { if (!s.dragging) return; const now = performance.now(); const dn = (e.clientY - s.lastY) / (PERIOD * s.scale); s.n += dn; const dt = Math.max(1, now - s.lastT) / 1000; s.vel = s.vel * 0.6 + (dn / dt) * 0.4; s.lastY = e.clientY; s.lastT = now; }; const up = () => { if (!s.dragging) return; s.dragging = false; s.target = Math.round(s.n + clamp(s.vel, -6, 6) * 0.24); s.nextAuto = performance.now() + HOLD_MS * 2; }; 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, strips]); const onKey = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") { e.preventDefault(); step(-1); } }; const pause = (v: boolean) => () => { sim.current.paused = v; if (!v) sim.current.nextAuto = performance.now() + HOLD_MS; }; const yc = TOP_PAD + R1; const yTable = yc + RUN + R2; const barW = W + 132; const chrome = "linear-gradient(180deg, #0b0b0c 0%, #2c2d31 14%, #e4e5e8 27%, #9a9ba0 36%, #3a3b40 58%, #17181a 82%, #050506 100%)"; const knurl = "repeating-linear-gradient(180deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.55) 1.5px, rgba(255,255,255,0.10) 1.5px, rgba(255,255,255,0.10) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px)"; const btn = "grid h-10 w-10 place-items-center rounded-full border border-white/15 bg-white/5 text-neutral-200 transition hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"; return (

{/* a pool of light on the wall behind the roll */}

{/* table top, meeting the wall just behind the roller */}

{/* shadow of the hanging paper on the wall */}

{/* shadow under the paper lying on the table */}

{/* the two arms that carry the roller */} {[-1, 1].map((side) => (

))} {/* the roller */}

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

{ knurlRefs.current[e] = el; }} className="absolute inset-y-0 w-[30px]" style={{ [e ? "right" : "left"]: 0, backgroundImage: `${knurl}, linear-gradient(180deg, #050506, #3c3d42 26%, #77787d 32%, #1d1e20 60%, #050506)` }} /> ))}

{/* the paper */} {strips.map((st, i) => { const big = st.h > 100; const rows = Math.ceil((TOTAL + st.h) / PERIOD); return (

{ tapeRefs.current[i] = el; }} aria-hidden={i === 9 ? undefined : true} className="absolute left-0 top-0 w-full" style={{ height: rows * PERIOD, willChange: big ? "transform" : undefined }} > {Array.from({ length: rows }, (_, row) => ( ))}

); })}

{/* the far end of the table falls out of the light */}

); } 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/we-inc/photo-proof-roll-carousel-that-feeds-over-a-roller-and-curls-onto-the-table.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]