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:T562b,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "framer-motion"; /** The slides loaded in the tray, in the order they drop into the gate. `tone` is the colour the picture throws back into the room. */ const slides = [ { title: "Four suits, open sky", src: "https://images.pexels.com/photos/10547288/pexels-photo-10547288.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Four models in blue, navy, pink and green suits standing apart under a wide pale sky", tone: "#7fb4d6", focus: "50% 70%" }, { title: "Pink coat, red earth", src: "https://images.pexels.com/photos/8221274/pexels-photo-8221274.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Model in a pink coat standing on red desert rock beside a mirrored ball", tone: "#d2622a", focus: "50% 55%" }, { title: "Scarlet train", src: "https://images.pexels.com/photos/8037495/pexels-photo-8037495.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Woman seated on rock with the long train of a red dress thrown out across the frame", tone: "#c8261d", focus: "50% 50%" }, { title: "Radio at dusk", src: "https://images.pexels.com/photos/19193128/pexels-photo-19193128.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Woman in an orange suit holding a portable radio among old tyres at sunset", tone: "#d08a3a", focus: "50% 45%" }, { title: "Dune wind", src: "https://images.pexels.com/photos/28601583/pexels-photo-28601583.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Woman in a red dress on a sand dune with a pale scarf streaming out in the wind", tone: "#d9a55c", focus: "50% 50%" }, { title: "Rust and ivory", src: "https://images.pexels.com/photos/9861699/pexels-photo-9861699.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Two models in rust and ivory suits standing between tall weathered rocks", tone: "#8f7d63", focus: "50% 45%" }, ]; const N = slides.length; const SLOTS = 80; // a full tray const SLOT = (Math.PI * 2) / SLOTS; const TRAY = 272; // tray diameter in design pixels const LAYERS = 12; // discs stacked to give the tray its ribbed wall const HOLD_MS = 3600; 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 KEYFRAMES = ` @keyframes slide-projector-tray-mote { 0% { transform: translate3d(0,0,0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(var(--mx), var(--my), 0); opacity: 0; } } @keyframes slide-projector-tray-lamp { 0%, 100% { opacity: 1; } 47% { opacity: 0.965; } 53% { opacity: 1; } 71% { opacity: 0.98; } } .slide-projector-tray-mote { animation: slide-projector-tray-mote var(--d) linear infinite; animation-delay: var(--w); } .slide-projector-tray-lamp { animation: slide-projector-tray-lamp 2.7s linear infinite; } @media (prefers-reduced-motion: reduce) { .slide-projector-tray-mote, .slide-projector-tray-lamp { animation: none; } } `; const motes = Array.from({ length: 14 }, (_, i) => ({ left: 30 + ((i * 53) % 40), top: 8 + ((i * 37) % 80), size: 1.5 + ((i * 7) % 3) * 0.7, mx: `${((i * 29) % 60) - 30}px`, my: `${-20 - ((i * 17) % 40)}px`, d: `${7 + ((i * 13) % 8)}s`, w: `${-((i * 1.9) % 9)}s`, })); export default function SlideProjectorCarousel() { const reduce = useReducedMotion(); const [idx, setIdx] = useState(0); const [prev, setPrev] = useState(-1); const idxRef = useRef(0); const zoneRef = useRef(null); const trayRef = useRef(null); const hitRef = useRef(null); const sim = useRef({ th: 2.4 * SLOT, vel: 0, dragging: false, lastX: 0, paused: false, nextAuto: 0 }); const go = useCallback((next: number) => { if (next === idxRef.current) return; setPrev(mod(idxRef.current, N)); idxRef.current = next; setIdx(next); }, []); const step = useCallback( (dir: number) => { go(idxRef.current + dir); sim.current.nextAuto = performance.now() + HOLD_MS * 2; }, [go], ); useEffect(() => { const zone = zoneRef.current; const tray = trayRef.current; const hit = hitRef.current; if (!zone || !tray || !hit) return; const s = sim.current; let raf = 0; let visible = true; let last = performance.now(); s.nextAuto = last + 2800; if (reduce) s.th = 0; const tick = (now: number) => { const dt = Math.min(0.033, Math.max(0.001, (now - last) / 1000)); last = now; const target = -idxRef.current * SLOT; if (reduce) { s.th = target; } else if (!s.dragging) { // a stiff, slightly under-damped spring: the tray knocks into its detent const acc = 420 * (target - s.th) - 19 * s.vel; s.vel += acc * dt; s.th += s.vel * dt; if (!s.paused && now > s.nextAuto) { go(idxRef.current + 1); s.nextAuto = now + HOLD_MS; } } tray.style.setProperty("--a", `${s.th.toFixed(5)}rad`); 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(zone); raf = requestAnimationFrame(tick); const down = (e: PointerEvent) => { if (e.button !== 0) return; s.dragging = true; s.lastX = e.clientX; s.vel = 0; hit.setPointerCapture(e.pointerId); }; const move = (e: PointerEvent) => { if (!s.dragging) return; const scale = zone.offsetWidth < 600 ? 0.7 : 1; s.th -= (e.clientX - s.lastX) / ((TRAY / 2) * scale) / 2.2; s.lastX = e.clientX; go(Math.round(-s.th / SLOT)); }; const up = () => { if (!s.dragging) return; s.dragging = false; s.nextAuto = performance.now() + HOLD_MS * 2; }; hit.addEventListener("pointerdown", down); hit.addEventListener("pointermove", move); hit.addEventListener("pointerup", up); hit.addEventListener("pointercancel", up); return () => { cancelAnimationFrame(raf); io.disconnect(); hit.removeEventListener("pointerdown", down); hit.removeEventListener("pointermove", move); hit.removeEventListener("pointerup", up); hit.removeEventListener("pointercancel", up); }; }, [reduce, go]); const onKey = (e: React.KeyboardEvent) => { if (e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (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 cur = mod(idx, N); const slide = slides[cur]; const disc = { left: -TRAY / 2, top: -TRAY / 2 - 14, width: TRAY, height: TRAY }; const ringMask = "radial-gradient(circle, rgba(0,0,0,0) 52.5%, #000 53.5%, #000 95%, rgba(0,0,0,0) 96%)"; const btn = "grid h-11 w-11 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 (

{/* the room: a little of the picture's colour comes back off the wall */}

{/* the picture on the wall */}

{slides.map((s, j) => { const state = j === cur ? "in" : j === prev ? "out" : "wait"; return ( {s.alt}

); })} {/* lamp falloff, warm cast and the soft edge of the gate */}

{String(cur + 1).padStart(2, "0")} / {String(N).padStart(2, "0")} {slide.title}

{/* the projector, seen from behind and above */}

{/* throw of the beam between the lens and the picture */}

{/* body: top plate */}

{/* index mark and the two transport keys moulded into the plate */}

{/* body: rear panel with cooling slots */}

Halden 2050
Autofocus / 80 slot

{/* the tray: a stack of discs gives the wall, the top one carries the slides */}

{Array.from({ length: LAYERS }, (_, k) => (

= LAYERS - 3 ? "repeating-conic-gradient(from 0deg, #e9e5da 0deg, #e9e5da 0.7deg, #1b1c1e 0.7deg, #1b1c1e 4.5deg)" : k % 4 === 0 ? "#2a2b2e" : "#1b1c1e" }} />

))} {/* top of the tray */}

{/* eighty slots, each with the pale top edge of a slide mount showing */}

{Array.from({ length: 8 }, (_, q) => ( {q === 0 ? 80 : q * 10} ))}

{/* light off the wall, coloured by the picture, across the far side of the tray */}

); } 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/slide-projector-photo-carousel-with-a-tray-that-clicks-round-and-drops-each-frame-into-the-beam.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]