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:T5aa7,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion, useSpring } from "framer-motion"; import { ChevronLeft, ChevronRight } from "lucide-react"; type Pose = { shot: 0 | 1; at: string; zoom?: number; flip?: boolean }; /** One slot per person: two sittings, cut into four poses. `tone` shows until a picture arrives. */ const people: { name: string; role: string; tone: string; shots: [{ src: string; alt: string }, { src: string; alt: string }]; poses: [Pose, Pose, Pose, Pose] }[] = [ { name: "Halima Sesay", role: "Runs the press", tone: "#7f9fe0", shots: [ { src: "https://images.pexels.com/photos/15520549/pexels-photo-15520549.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "Smiling woman in a lilac headscarf and pink blouse leaning on a table, blue backdrop" }, { src: "https://images.pexels.com/photos/15520550/pexels-photo-15520550.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "The same woman laughing with one hand raised to her shoulder" }, ], poses: [ { shot: 0, at: "50% 22%", zoom: 1.5 }, { shot: 1, at: "56% 20%", zoom: 1.7 }, { shot: 0, at: "50% 26%", zoom: 2.3 }, { shot: 1, at: "50% 30%", zoom: 1.25, flip: true }, ], }, { name: "Winston Adeyemi", role: "Mixes the inks", tone: "#f3a9c8", shots: [ { src: "https://images.pexels.com/photos/4584605/pexels-photo-4584605.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "Bald man in a pink T-shirt raising his eyebrows at the camera, pink backdrop" }, { src: "https://images.pexels.com/photos/4584606/pexels-photo-4584606.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "The same man turned side on, glancing back over his shoulder" }, ], poses: [ { shot: 0, at: "50% 34%", zoom: 1.7 }, { shot: 1, at: "62% 16%", zoom: 1.7 }, { shot: 0, at: "50% 36%", zoom: 2.6 }, { shot: 1, at: "60% 20%", zoom: 1.3, flip: true }, ], }, { name: "Folake Obi", role: "Sets the type", tone: "#46525f", shots: [ { src: "https://images.pexels.com/photos/9971680/pexels-photo-9971680.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "Woman in patterned pink glasses and a plum shirt frowning with arms folded, slate backdrop" }, { src: "https://images.pexels.com/photos/9971718/pexels-photo-9971718.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "The same woman looking straight into the lens with her head tilted" }, ], poses: [ { shot: 1, at: "52% 24%", zoom: 1.6 }, { shot: 0, at: "50% 20%", zoom: 1.6 }, { shot: 1, at: "54% 28%", zoom: 2.4 }, { shot: 0, at: "50% 22%", zoom: 1.2, flip: true }, ], }, { name: "Caspar Lund", role: "Trims and binds", tone: "#b03a26", shots: [ { src: "https://images.pexels.com/photos/8727463/pexels-photo-8727463.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "Red haired man with a short beard in profile, brick red backdrop" }, { src: "https://images.pexels.com/photos/8727340/pexels-photo-8727340.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "The same man in a long white top looking down with his arms held out" }, ], poses: [ { shot: 0, at: "40% 36%", zoom: 1.35 }, { shot: 1, at: "50% 27%", zoom: 2.9 }, { shot: 0, at: "44% 40%", zoom: 1.9, flip: true }, { shot: 1, at: "50% 30%", zoom: 1.5 }, ], }, { name: "Emeka Bright", role: "Keeps the books", tone: "#1f7180", shots: [ { src: "https://images.pexels.com/photos/36440745/pexels-photo-36440745.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Man in a checked wool coat resting his head on his hand, teal backdrop" }, { src: "https://images.pexels.com/photos/36440743/pexels-photo-36440743.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "The same man with a hand at the back of his neck, eyes closed" }, ], poses: [ { shot: 0, at: "52% 12%", zoom: 2.5 }, { shot: 1, at: "66% 8%", zoom: 2.6 }, { shot: 0, at: "50% 22%", zoom: 1.5 }, { shot: 0, at: "52% 13%", zoom: 3.3, flip: true }, ], }, ]; const club = "Saltmarsh Print Club"; // Design pixels: the booth panel is drawn at this size and scaled to the frame. const SCENE_W = 940; const SCENE_H = 660; const PITCH = 166; // slot to slot const SLIT_Y = 116; // where paper leaves the fascia const STRIP_W = 116; const FRAME_H = 104; const GAP = 6; const FOOT = 34; const LEN = 8 + FRAME_H * 4 + GAP * 3 + FOOT; const FIRST_X = (SCENE_W - PITCH * (people.length - 1)) / 2; // the pendulum, in degrees and seconds const PULL = 24; // how hard a strip is drawn back to plumb const DRAG = 0.85; // air on paper const GRAVITY = 2600; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const steel = "repeating-linear-gradient(90deg,rgba(255,255,255,0.07) 0 1px,rgba(0,0,0,0.035) 1px 2px,rgba(255,255,255,0) 2px 5px), linear-gradient(180deg,#f3f4f4 0%,#c9cdcf 22%,#e8eaeb 50%,#9da3a7 82%,#bcc1c4 100%)"; const grain = "radial-gradient(circle at 24% 30%, rgba(255,255,255,0.05) 0 0.6px, rgba(0,0,0,0) 1.1px), radial-gradient(circle at 70% 66%, rgba(0,0,0,0.22) 0 0.7px, rgba(0,0,0,0) 1.2px)"; type Body = { a: number; w: number; y: number; vy: number; mode: "hang" | "drop" | "feed"; step: number; wait: number; ph: number }; export default function PhotoBoothTeamStrips() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const stripRefs = useRef<(HTMLDivElement | null)[]>([]); const shadeRefs = useRef<(HTMLDivElement | null)[]>([]); const bodies = useRef(people.map((_, i) => ({ a: [1.4, -0.9, 0.6, -1.3, 0.8][i % 5], w: 0, y: 0, vy: 0, mode: "hang", step: 4, wait: 0, ph: i * 1.7 }))); const hold = useRef({ scale: 1, touched: false, over: false, lastX: 0, lastT: 0 }); const [turn, setTurn] = useState(people.map(() => 0)); const [busy, setBusy] = useState(-1); const [focus, setFocus] = useState(2); const pan = useSpring(0, { stiffness: 90, damping: 18 }); const place = useCallback( (jump: boolean) => { const wrap = wrapRef.current; if (!wrap) return; const w = wrap.clientWidth; const sc = clamp(w / SCENE_W, 0.74, 1.1); hold.current.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc + (w < 640 ? 34 : 0))}px`; const centre = (FIRST_X + PITCH * focus) * sc; const x = SCENE_W * sc <= w ? (w - SCENE_W * sc) / 2 : clamp(w / 2 - centre, w - SCENE_W * sc + 40 * sc, -40 * sc); if (sceneRef.current) sceneRef.current.style.transform = `scale(${sc.toFixed(4)})`; if (jump || reduce) pan.jump(x); else pan.set(x); }, [focus, pan, reduce], ); useEffect(() => { place(true); const ro = new ResizeObserver(() => place(true)); if (wrapRef.current) ro.observe(wrapRef.current); return () => ro.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => place(false), [place]); /** Let go of the strip that is hanging and print that person again. */ const print = useCallback( (i: number) => { const b = bodies.current[i]; if (reduce) { setTurn((t) => t.map((v, k) => (k === i ? v + 1 : v))); return; } if (b.mode !== "hang") return; b.mode = "drop"; b.vy = 60; b.w += b.a >= 0 ? 26 : -26; }, [reduce], ); // one loop moves every strip: sway, fall, and the four clunks of a new one feeding out useEffect(() => { if (reduce) return; let raf = 0; let last = 0; let visible = true; const draw = (i: number) => { const b = bodies.current[i]; const el = stripRefs.current[i]; const sh = shadeRefs.current[i]; if (el) { el.style.transform = `rotate(${b.a.toFixed(3)}deg) translate3d(0,${b.y.toFixed(2)}px,0)`; el.style.setProperty("--lean", b.a.toFixed(2)); } if (sh) sh.style.transform = `rotate(${(b.a * 1.14 + 0.9).toFixed(3)}deg) translate3d(0,${b.y.toFixed(2)}px,0)`; }; const tick = (now: number) => { raf = 0; const dt = Math.min(0.032, last ? (now - last) / 1000 : 0.016); last = now; const t = now / 1000; bodies.current.forEach((b, i) => { if (b.mode === "drop") { b.vy += GRAVITY * dt; b.y += b.vy * dt; b.a += b.w * dt; if (b.y > SCENE_H + 120) { b.mode = "feed"; b.y = -LEN; b.a = 0; b.w = 0; b.vy = 0; b.step = 0; b.wait = 0.34; setTurn((v) => v.map((n, k) => (k === i ? n + 1 : n))); setBusy(i); } } else { const feeding = b.mode === "feed"; if (feeding) { b.wait -= dt; if (b.wait <= 0 && b.step < 4) { b.step += 1; b.wait = 0.36; b.w += b.step % 2 ? 9 : -9; } const to = -LEN * (1 - b.step / 4); b.y += (to - b.y) * Math.min(1, dt * 17); if (b.step === 4 && Math.abs(to - b.y) < 0.4) { b.y = 0; b.mode = "hang"; b.w += 14; setBusy((cur) => (cur === i ? -1 : cur)); } } const out = 1 + b.y / LEN; // a short tongue of paper is stiff, a full strip is loose const draught = (Math.sin(t * 0.9 + b.ph) * 26 + Math.sin(t * 2.3 + b.ph * 2.1) * 12) * out; const acc = -(PULL + (1 - out) * 220) * b.a - (DRAG + (1 - out) * 7) * b.w + draught; b.w += acc * dt; b.a = clamp(b.a + b.w * dt, -38, 38); } draw(i); }); if (visible && !document.hidden) raf = requestAnimationFrame(tick); }; const start = () => { if (!raf && visible && !document.hidden) { last = 0; raf = requestAnimationFrame(tick); } }; const io = new IntersectionObserver(([e]) => { visible = e.isIntersecting; start(); }); if (wrapRef.current) io.observe(wrapRef.current); document.addEventListener("visibilitychange", start); start(); return () => { cancelAnimationFrame(raf); io.disconnect(); document.removeEventListener("visibilitychange", start); }; }, [reduce]); // the booth reprints one person after another until somebody takes over useEffect(() => { if (reduce) return; const order = [1, 3, 0, 4, 2]; let n = 0; const go = () => { const s = hold.current; if (s.touched || s.over || document.hidden) return; const i = order[n % order.length]; n += 1; setFocus(i); print(i); }; const first = window.setTimeout(go, 3000); const loop = window.setInterval(go, 4600); return () => { window.clearTimeout(first); window.clearInterval(loop); }; }, [print, reduce]); // a pointer passing through a strip pushes it, harder the lower down it is caught const onMove = (e: React.PointerEvent) => { const wrap = wrapRef.current; if (!wrap || reduce) return; const s = hold.current; const r = wrap.getBoundingClientRect(); const x = (e.clientX - r.left - pan.get()) / s.scale; const y = (e.clientY - r.top) / s.scale; const dx = x - s.lastX; const fresh = e.timeStamp - s.lastT < 80; s.lastX = x; s.lastT = e.timeStamp; if (!fresh || y < SLIT_Y || y > SLIT_Y + LEN + 20) return; bodies.current.forEach((b, i) => { if (b.mode !== "hang") return; const lever = (y - SLIT_Y) / LEN; const cx = FIRST_X + PITCH * i - Math.sin((b.a * Math.PI) / 180) * (y - SLIT_Y); if (Math.abs(x - cx) < STRIP_W / 2 + 6) b.w = clamp(b.w + dx * 0.62 * lever, -150, 150); }); }; const choose = (i: number) => { hold.current.touched = true; setFocus(i); print(i); }; const step = (d: number) => { hold.current.touched = true; setFocus((f) => clamp(f + d, 0, people.length - 1)); }; return (

(hold.current.over = true)} onPointerLeave={() => (hold.current.over = false)} className="relative w-full overflow-hidden" style={{ height: SCENE_H }}>

(); return (

{/* everything below the slit; paper above it is still inside the machine */}

{ shadeRefs.current[i] = el; }} aria-hidden="true" className="absolute rounded-[3px]" style={{ left: -STRIP_W / 2 + 13, top: 4, width: STRIP_W, height: LEN, transformOrigin: `${STRIP_W / 2 - 13}px -4px`, transform: `rotate(${(bodies.current[i].a * 1.14 + 0.9).toFixed(2)}deg)`, background: "linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.7))", filter: "blur(9px)", willChange: "transform" }} />

{ stripRefs.current[i] = el; }} className="absolute rounded-[2px]" style={{ left: -STRIP_W / 2, top: 0, width: STRIP_W, height: LEN, transformOrigin: "50% 0", transform: `rotate(${bodies.current[i].a}deg)`, willChange: "transform", backgroundColor: "#f4efe3", backgroundImage: "linear-gradient(90deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 9%,rgba(255,255,255,0.5) 46%,rgba(0,0,0,0) 86%,rgba(0,0,0,0.14) 100%), linear-gradient(180deg,#e9e3d4 0%,#f8f4ea 12%,#f3eee1 70%,#fffdf6 100%)", boxShadow: "0 0 0 0.5px rgba(0,0,0,0.35), 1px 1px 0 rgba(255,255,255,0.5) inset, -1px -1px 0 rgba(0,0,0,0.12) inset", }} >

{poses.map((pose, k) => { const shot = p.shots[pose.shot]; const first = !seen.has(pose.shot); seen.add(pose.shot); return (

); })}

{p.name}

{p.role}

{/* gloss that slides across the emulsion as the strip leans */}

); })}

{/* the fascia sits over the top of the paper */}

{[ [10, 10], [10, 68], ].flatMap(([x, y]) => [0, 1].map((r) => ( )), )} {people.map((p, i) => (

{p.name.split(" ")[0]}

{p.role}

{/* the slit, its pressed surround and felt lips */}

))}

{club}
Press a strip to print it again

); } 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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/photo-booth-team-strips-that-feed-out-of-chrome-slots-in-four-clunks-then-hang-and-swing-on-the-panel.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]