# Clocking in Card Rack Team Section Where a Time Card Slides out with a Stapled Portrait and Is Stamped with the Hour > Team section of manila time cards in a steel rack: pull one and it slides out with a stapled portrait and the hour stamped in. Free React and HTML code. 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/clocking-in-card-rack-team-section-where-a-time-card-slides-out-with-a-stapled-portrait-and-is-stamped-with-the-hour). - Page, with a live preview: https://shadcn.exchange/r/weinc/clocking-in-card-rack-team-section-where-a-time-card-slides-out-with-a-stapled-portrait-and-is-stamped-with-the-hour - Screenshot: https://shadcn.exchange/shot/weinc/clocking-in-card-rack-team-section-where-a-time-card-slides-out-with-a-stapled-portrait-and-is-stamped-with-the-hour/light.png - Registry item: https://we.inc/r/clocking-in-card-rack-team-section-where-a-time-card-slides-out-with-a-stapled-portrait-and-is-stamped-with-the-hour.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/clocking-in-card-rack-team-section-where-a-time-card-slides-out-with-a-stapled-portrait-and-is-stamped-with-the-hour.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`, `lucide-react` ## Files ### `components/we-inc/clocking-in-card-rack-team-section-where-a-time-card-slides-out-with-a-stapled-portrait-and-is-stamped-with-the-hour.tsx` ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion, useSpring } from "framer-motion"; import { ChevronDown, ChevronUp } from "lucide-react"; /** One card per person, top pocket first. `week` is Monday to Wednesday, in and out; today's line is stamped when the card is pulled. */ const staff: { name: string; role: string; dept: string; since: string; band: string; week: [string, string][]; photo: { src: string; alt: string; tone: string; focus: string } }[] = [ { name: "Adaeze Nwosu", role: "Head baker", dept: "Bench", since: "2015", band: "#b3341f", week: [["03:58", "11:34"], ["04:01", "11:40"], ["03:56", "12:05"]], photo: { src: "https://images.pexels.com/photos/32222061/pexels-photo-32222061.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a mustard headwrap and dark top lit against a burnt orange wall", tone: "#8a3c1c", focus: "50% 22%" }, }, { name: "Kofi Mensah", role: "Ovens, nights", dept: "Deck oven", since: "2019", band: "#1f5f8a", week: [["21:47", "05:32"], ["21:52", "05:30"], ["21:49", "05:41"]], photo: { src: "https://images.pexels.com/photos/15689960/pexels-photo-15689960.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Young man in a white striped shirt looking into the lens against a red wall", tone: "#b33a22", focus: "50% 30%" }, }, { name: "Mina Sato", role: "Pastry", dept: "Lamination", since: "2021", band: "#2f7d57", week: [["04:28", "12:02"], ["04:31", "12:10"], ["04:26", "11:58"]], photo: { src: "https://images.pexels.com/photos/35537926/pexels-photo-35537926.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Smiling woman with a dark bob and orange tinted glasses in a blue jumper against a pink wall", tone: "#f2b9bd", focus: "50% 30%" }, }, { name: "Priya Nair", role: "Counter", dept: "Shop", since: "2022", band: "#c98a12", week: [["06:44", "14:31"], ["06:47", "14:30"], ["06:41", "15:02"]], photo: { src: "https://images.pexels.com/photos/37851040/pexels-photo-37851040.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman with long wavy hair in a black top against a bright yellow wall", tone: "#f1d93c", focus: "50% 34%" }, }, { name: "Douglas Hart", role: "Deliveries", dept: "Van and bike", since: "2012", band: "#5a3f8c", week: [["05:12", "10:48"], ["05:15", "10:52"], ["05:09", "11:20"]], photo: { src: "https://images.pexels.com/photos/32063767/pexels-photo-32063767.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Bald man with a long grey beard in a leather jacket, hand at his chin, dark green backdrop", tone: "#2c3a30", focus: "40% 26%" }, }, { name: "Bruno Albani", role: "Mills the flour", dept: "Stone mill", since: "2009", band: "#3a3a3a", week: [["07:02", "13:15"], ["07:00", "13:22"], ["07:05", "13:11"]], photo: { src: "https://images.pexels.com/photos/7322082/pexels-photo-7322082.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "White haired man in a white shirt resting his chin on his hand against a grey wall", tone: "#9a9894", focus: "46% 24%" }, }, ]; const bakery = "Fallow and Rye Bakehouse"; const days = ["Mon", "Tue", "Wed", "Thu"]; // Design pixels: the wall is drawn at this size and scaled to the frame. const SCENE_W = 940; const SCENE_H = 664; const CARD_W = 170; const CARD_H = 380; const TIER = 58; // how much of each card shows above the one in front const LIP = 12; // folded steel edge of each pocket const RACK_X = 556; // left edge of the cards in the rack const RACK_Y = 98; // top of the first card const PLATE_L = 38; // bare plate to the left of the cards, for the pocket numbers const SHOW_X = 198; const SHOW_Y = 40; const SHOW_SCALE = 1.38; const LIFT = 30; // a card rises this far before it will slide out sideways const FLOOR = RACK_Y + TIER * staff.length + 150; // bottom of the rack const INK = "#3a2d86"; const RULE = "rgba(150,66,38,0.6)"; const fibre = "radial-gradient(circle at 18% 26%, rgba(255,255,255,0.14) 0 0.5px, rgba(0,0,0,0) 1px), radial-gradient(circle at 66% 58%, rgba(120,80,20,0.1) 0 0.6px, rgba(0,0,0,0) 1.1px), radial-gradient(circle at 40% 88%, rgba(120,80,20,0.07) 0 0.5px, rgba(0,0,0,0) 1px)"; const hammered = "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.07) 0 1.4px, rgba(0,0,0,0) 2.6px), radial-gradient(circle at 70% 66%, rgba(0,0,0,0.28) 0 1.5px, rgba(0,0,0,0) 2.8px), radial-gradient(circle at 52% 12%, rgba(255,255,255,0.05) 0 1.2px, rgba(0,0,0,0) 2.4px)"; const screw = "radial-gradient(circle at 35% 30%,#fff,#b1b7ba 50%,#565e62)"; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const wobble = (n: number) => ((n * 37) % 11) / 11 - 0.5; // the same small error every render, like a worn mechanism const clock = () => { const d = new Date(); return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`; }; function Stamp({ text, n, faint }: { text: string; n: number; faint?: boolean }) { return ( {text} ); } export default function ClockingInCardRack() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [out, setOut] = useState(2); const [back, setBack] = useState(-1); const [peek, setPeek] = useState(-1); const [stamps, setStamps] = useState>({}); const hold = useRef({ touched: false, over: false }); const pan = useSpring(0, { stiffness: 90, damping: 18 }); useEffect(() => { const place = () => { const wrap = wrapRef.current; if (!wrap) return; const w = wrap.clientWidth; const sc = clamp(w / SCENE_W, 0.62, 1.1); wrap.style.height = `${Math.round(SCENE_H * sc + (w < 640 ? 40 : 0))}px`; const centre = ((SHOW_X + RACK_X + CARD_W) / 2 + 4) * sc; if (sceneRef.current) sceneRef.current.style.transform = `scale(${sc.toFixed(4)})`; pan.jump(SCENE_W * sc <= w ? (w - SCENE_W * sc) / 2 : w / 2 - centre); }; place(); const ro = new ResizeObserver(place); if (wrapRef.current) ro.observe(wrapRef.current); return () => ro.disconnect(); }, [pan]); const pull = useCallback((i: number) => { setOut((cur) => { if (cur !== i) setBack(cur); return i; }); }, []); // the clock strikes once the card has come to rest useEffect(() => { if (stamps[out]) return; const t = window.setTimeout(() => setStamps((s) => ({ ...s, [out]: clock() })), reduce ? 0 : 1250); return () => window.clearTimeout(t); }, [out, reduce, stamps]); // cards are pulled one after another until somebody takes over useEffect(() => { if (reduce) return; const order = [4, 0, 3, 1, 5, 2]; let n = 0; const go = () => { const s = hold.current; if (s.touched || s.over || document.hidden) return; pull(order[n % order.length]); n += 1; }; const first = window.setTimeout(go, 3000); const loop = window.setInterval(go, 4800); return () => { window.clearTimeout(first); window.clearInterval(loop); }; }, [pull, reduce]); const choose = (i: number) => { hold.current.touched = true; pull(i); }; const dur = reduce ? 0 : 1.05; const person = staff[out]; return (
); } ```