# Clear Acrylic ID Passes in a Slotted Block That Lift out and Turn, with Neon Edges and a Floating Print > ID badges cut from clear acrylic stand in a slotted block and the one you pick lifts out and turns to face you. Free React and Tailwind code, or HTML. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print). - Page, with a live preview: https://shadcn.exchange/r/weinc/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print - Screenshot: https://shadcn.exchange/shot/weinc/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print/light.png - Registry item: https://we.inc/r/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/clear-acrylic-id-passes-in-a-slotted-block-that-lift-out-and-turn-with-neon-edges-and-a-floating-print.tsx` ```tsx 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" >