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:T37a1,import { useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring } from "framer-motion"; // One entry per pass. `edge` is the colour of the fluorescent sheet it is cut from. const passes = [ { name: "Tobi Adeyemi", role: "SPEAKER", no: "014", edge: "#c4ff3d", tone: "#8a2bd6", photo: "https://images.pexels.com/photos/9363613/pexels-photo-9363613.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "A man with a round afro in a white shirt, lit violet against a bright purple wall", at: "50% 18%", }, { name: "Mara Vidal", role: "CREW", no: "102", edge: "#4fd8ff", tone: "#c40f3c", photo: "https://images.pexels.com/photos/21352926/pexels-photo-21352926.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "A woman in a green top and black jacket with one arm raised behind her head, against a red backdrop", at: "50% 12%", }, { name: "Sam Okoro", role: "ARTIST", no: "057", edge: "#ff8a2a", tone: "#1f4a37", photo: "https://images.pexels.com/photos/7301578/pexels-photo-7301578.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "A man seen from behind his shoulder in a blue knitted beanie and jumper, against a dark green wall", at: "60% 20%", }, ]; const event = { name: "OFFCUT", year: "26" }; const BW = 188; // pass width const BH = 268; // pass height const THICK = 16; // sheet thickness const RIM = 12; // clear margin round the print const TOP = 36; // clear margin above the print, where the strap slot is cut const GAP = 208; // distance between pass centres const REST = -22; // angle a pass sits at in its slot, in degrees const LIFT = 58; // how far the chosen pass rises const HOLD = 3400; // milliseconds each pass is held up while it plays by itself const BLOCK = { w: 644, h: 38, d: 96 }; const SCENE_H = BH + LIFT + BLOCK.h + 8; const PW = BW - RIM * 2, PH = BH - TOP - RIM; // size of the printed photograph export default function ClearAcrylicIdPasses() { const root = useRef(null); const reduce = useReducedMotion(); const [picked, setPicked] = useState(1); const [scale, setScale] = useState(1); const touched = useRef(0); const mx = useMotionValue(0), my = useMotionValue(0); const turn = useSpring(mx, { stiffness: 60, damping: 14 }); const tip = useSpring(my, { stiffness: 60, damping: 14 }); useEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.36, (el.clientWidth - 32) / BLOCK.w)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); // Plays by itself until someone picks a pass, and again a while after they stop. useEffect(() => { if (reduce) return; const id = window.setInterval(() => { if (document.hidden || performance.now() - touched.current < 9000) return; setPicked((p) => (p + 1) % passes.length); }, HOLD); return () => window.clearInterval(id); }, [reduce]); const pick = (i: number) => { touched.current = performance.now(); setPicked(i); }; const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 120, damping: 13, mass: 1.1 }; const layers = Array.from({ length: THICK / 2 - 1 }, (_, i) => -THICK / 2 + 2 + i * 2); return (

{ if (reduce) return; const r = e.currentTarget.getBoundingClientRect(); mx.set(((e.clientX - r.left) / r.width - 0.5) * 16); my.set(((e.clientY - r.top) / r.height - 0.5) * -6); }} onPointerLeave={() => { mx.set(0); my.set(0); }} className="relative flex min-h-[680px] w-full items-center justify-center overflow-hidden bg-[#161924] pb-24 pt-16" >

{/* Sized with zoom, not a scale transform, so the lettering is drawn sharp at the final size. */}

{/* Shadow of the block on the floor. */}

{/* The anodised block: a top with three diagonal slots and a brushed front. */}

{passes.map((p, i) => (

))}

{/* Each sheet throws a little of its colour onto the metal below it. */} {passes.map((p, i) => (

))}

{event.name} / {event.year}

{passes.map((p, i) => { const up = picked === i; return (

{/* Back of the sheet: the photograph is printed here and seen through the plastic. */}

{/* Shadow that the white ink on the front throws back onto the print. */} {/* The body of the sheet: stacked outlines that read as one glowing edge from the side. */} {layers.map((z) => (

))} {/* Light bent at the cut edges: the print mirrored into the clear margin. */}

{[ { box: { left: 3, top: TOP, width: RIM - 3, height: PH }, inner: { left: RIM - 3 - PW, top: 0 }, flip: "scaleX(-1)" }, { box: { left: BW - RIM, top: TOP, width: RIM - 3, height: PH }, inner: { left: 0, top: 0 }, flip: "scaleX(-1)" }, { box: { left: RIM, top: BH - RIM, width: PW, height: RIM - 3 }, inner: { left: 0, top: 0 }, flip: "scaleY(-1)" }, ].map((r, k) => (

))}

{/* Front of the sheet: white ink, the strap slot, bevel and gloss. */}

); })}

{event.name} {event.year} passes Pick a pass to lift it out of the block

); } // Everything printed in white on the front. Drawn twice: once as ink and once, blurred, as its shadow. function Ink({ p }: { p: (typeof passes)[number] }) { return (

{event.name}

{event.year}

{p.role}

{p.name}

No. {p.no}

); } 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/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]