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:T8538,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion, useSpring, useTransform, useVelocity } from "framer-motion"; import { ChevronLeft, ChevronRight } from "lucide-react"; type Shelf = "mug" | "books" | "flask" | "jar"; type Hung = "apron" | "tote" | "keys" | "towel"; /** One locker per person. `plate` is the card in the door holder, `tape` the note under the photograph. */ const team: { name: string; plate: string; role: string; tape: string; shelf: [Shelf, Shelf]; hung: Hung; tilt: number; photo: { src: string; alt: string; tone: string; focus: string } }[] = [ { name: "Odile Marchetti", plate: "MARCHETTI", role: "Throws the tableware", tape: "wheel two, mornings", shelf: ["jar", "mug"], hung: "apron", tilt: -2.2, photo: { src: "https://images.pexels.com/photos/6794113/pexels-photo-6794113.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Woman with long braids in a rust jumper against a yellow wall, hand at her neck", tone: "#e9b423", focus: "50% 22%" }, }, { name: "Tobias Wren", plate: "WREN", role: "Fires both kilns", tape: "do not open at 900", shelf: ["flask", "books"], hung: "keys", tilt: 1.6, photo: { src: "https://images.pexels.com/photos/36511044/pexels-photo-36511044.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Man with a moustache in a cream knitted jumper against a terracotta wall", tone: "#b5604d", focus: "50% 24%" }, }, { name: "Ines Abara", plate: "ABARA", role: "Mixes every glaze", tape: "celadon batch 14", shelf: ["books", "jar"], hung: "tote", tilt: -1.4, photo: { src: "https://images.pexels.com/photos/11989029/pexels-photo-11989029.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Woman in round glasses and a black roll neck against a bright green wall", tone: "#16b88a", focus: "50% 26%" }, }, { name: "Rafa Quintero", plate: "QUINTERO", role: "Packs and runs the shop", tape: "back at two", shelf: ["mug", "flask"], hung: "towel", tilt: 2.4, photo: { src: "https://images.pexels.com/photos/8801041/pexels-photo-8801041.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Smiling man with short curly hair in a pale pink sweatshirt against a pink wall", tone: "#d79aa0", focus: "50% 22%" }, }, ]; const studio = "Marchetti and Wren Pottery"; // Design pixels. The whole wall is drawn at this size and scaled to fit. const SCENE_W = 940; const SCENE_H = 640; const CELL = 196; // one locker, frame included const DOOR_W = 184; const DOOR_H = 468; const THICK = 9; // folded edge of the door const BANK_X = (SCENE_W - CELL * team.length) / 2; const BANK_Y = 70; const SWING = 96; // degrees a door opens const PEEK = 9; // degrees a door lifts off its catch under the pointer const PAINT = "#2f6377"; const PAINT_DARK = "#1c4252"; const chrome = "linear-gradient(180deg,#fbfcfc 0%,#b4bcc0 26%,#f1f4f5 48%,#7c868b 74%,#c9d0d3 100%)"; const chromeAcross = "linear-gradient(90deg,#8b959a 0%,#f6f8f8 30%,#aab3b7 55%,#eef1f2 72%,#6d777c 100%)"; const speckle = "radial-gradient(circle at 22% 31%, rgba(255,255,255,0.045) 0 0.6px, rgba(0,0,0,0) 1.1px), radial-gradient(circle at 71% 64%, rgba(0,0,0,0.07) 0 0.7px, rgba(0,0,0,0) 1.2px), radial-gradient(circle at 44% 83%, rgba(255,255,255,0.035) 0 0.6px, rgba(0,0,0,0) 1.1px)"; const speckleSize = "5px 7px, 11px 9px, 13px 17px"; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); function Louvres({ top }: { top: number }) { return (

{[0, 1, 2, 3].map((n) => (

))}

); } function ShelfThing({ kind, id }: { kind: Shelf; id: string }) { if (kind === "mug") return ( ); if (kind === "books") return ( ); if (kind === "flask") return ( ); return ( ); } function HungThing({ kind, id }: { kind: Hung; id: string }) { if (kind === "apron") return ( ); if (kind === "tote") return ( ); if (kind === "keys") return ( ); return ( ); } function Locker({ person, index, open, reduce, onToggle }: { person: (typeof team)[number]; index: number; open: boolean; reduce: boolean; onToggle: () => void }) { const [peek, setPeek] = useState(false); const target = open ? SWING : peek ? PEEK : 0; const raw = useSpring(open ? SWING : 0, { stiffness: 58, damping: 8.5, mass: 1.2 }); // a door cannot swing through its own frame: the spring's undershoot is the slam const angle = useTransform(raw, (v) => clamp(v, 0, 125)); const speed = useVelocity(angle); const lockSwing = useSpring(useTransform(speed, (v) => clamp(v * 0.07, -34, 34)), { stiffness: 120, damping: 5 }); const hungSwing = useSpring(useTransform(speed, (v) => clamp(v * -0.022, -9, 9)), { stiffness: 46, damping: 3.2 }); const door = useTransform(angle, (v) => `rotateY(${(-v).toFixed(2)}deg)`); const inside = useTransform(angle, (v) => 0.42 + clamp(v / 70, 0, 1) * 0.58); const doorShade = useTransform(angle, (v) => clamp(v / 100, 0, 1) * 0.3); const fall = useTransform(angle, (v) => clamp((v - 20) / 70, 0, 1)); const id = `locker-${index}`; const no = String(index * 3 + 11).padStart(2, "0"); useEffect(() => { if (reduce) raw.jump(open ? SWING : 0); else raw.set(target); }, [open, raw, reduce, target]); return (

{/* the opening and what is kept in it */}

{/* shelf */}

{/* the portrait, taped to the back wall */}

{person.photo.alt} — {person.name} {person.tape}

{/* hook and whatever hangs on it */}

{/* light falling in from the room */} {/* the door */}

{/* pressed panel */}

{/* card holder */}

{no} {person.plate}

{/* recessed pull with a padlock through the hasp */}

{/* scuffs low down where boots catch it */}

{/* folded edge */}

{/* inside face */}

{/* hinges stay with the frame */} {[58, 232, 406].map((y) => (

); } const SETS = [ [true, false, true, false], [false, true, false, true], ]; export default function StaffLockerWall() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(SETS[0]); const [focus, setFocus] = useState(1); const hold = useRef({ touched: false, over: false, scale: 1, width: SCENE_W }); const pan = useSpring(0, { stiffness: 90, damping: 18 }); // fit the wall to the frame; on narrow screens keep it large and slide to the locker in play const place = useCallback( (jump: boolean) => { const wrap = wrapRef.current; if (!wrap) return; const w = wrap.clientWidth; const sc = clamp(w / SCENE_W, 0.72, 1.1); hold.current.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc + (w < 640 ? 44 : 0))}px`; const centre = (BANK_X + CELL * (focus + 0.5)) * sc; const x = SCENE_W * sc <= w ? (w - SCENE_W * sc) / 2 : clamp(w / 2 - centre, w - SCENE_W * sc + 20 * sc, -20 * 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]); // two lockers stand open from the first frame; the pairs then swap by themselves until someone takes over useEffect(() => { if (reduce) return; let n = 0; const timers: number[] = []; const swap = () => { const s = hold.current; if (s.touched || s.over || document.hidden) return; n += 1; const next = SETS[n % 2]; setOpen((cur) => cur.map(() => false)); timers.push( window.setTimeout(() => { if (hold.current.touched) return; setOpen(next); setFocus(n % 2 ? 2 : 1); }, 620), ); }; const first = window.setTimeout(swap, 3000); const loop = window.setInterval(swap, 4200); return () => { window.clearTimeout(first); window.clearInterval(loop); timers.forEach((t) => window.clearTimeout(t)); }; }, [reduce]); const toggle = (i: number) => { hold.current.touched = true; setOpen((cur) => cur.map((v, k) => (k === i ? !v : v))); setFocus(i); }; const step = (d: number) => { hold.current.touched = true; const to = (focus + d + team.length) % team.length; setFocus(to); setOpen(team.map((_, k) => k === to)); }; const shown = open[focus] ? focus : open.indexOf(true); const person = team[shown < 0 ? focus : shown]; return (

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

{/* floor */}

{/* shadow the bank throws on wall and floor */}

{/* plinth */}

{person.name}
{person.role}

); } 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/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]