# Matchbox Card with a Drawer That Slides out and a Photo Print That Stands up from the Matches > 3D card built as a matchbox: drag the drawer out of its sleeve and a photo print stands up from a bed of matches. 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/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches). - Page, with a live preview: https://shadcn.exchange/r/weinc/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches - Screenshot: https://shadcn.exchange/shot/weinc/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches/light.png - Registry item: https://we.inc/r/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches.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/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches.tsx` ```tsx import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** Everything printed on the box and the card inside it. */ const box = { name: "Afterglow", number: "No. 7", line: "Forty safety matches and one print", cover: { src: "https://images.pexels.com/photos/7516560/pexels-photo-7516560.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Woman in a red dress standing in front of a yellow wall with a large red circle", tone: "#e3a70f", focus: "50% 34%" }, print: { src: "https://images.pexels.com/photos/7658850/pexels-photo-7658850.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Profile of a woman lit in orange and green studio light", tone: "#b5561a", focus: "50% 30%" }, }; // Design pixels in the box's own space: x runs along the box, y across it, z up off the table. const W = 400; const DP = 250; const H = 84; const WALL = 5; // gap between sleeve and tray const TRAY_H = 66; const MATCH_Z = 34; // height of the bed of matches inside the tray const OUT = 296; // travel of the drawer const CARD_W = 184; // across the box const CARD_L = 222; // along the box const LIFT = 63; // degrees the print stands up const SCENE_W = 900; const HINGE = 64; // how far in from the drawer's outer end the print is hinged const SCENE_H = 620; // how one design pixel along x lands on screen for the resting camera (used to turn a drag into travel) const TURN = 39; const TIP = 54; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const rad = (d: number) => (d * Math.PI) / 180; const PAPER = "#efe6d2"; const RED = "#cf2f20"; const speckle = "radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16) 0 0.6px, rgba(0,0,0,0) 1px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.5) 0 0.7px, rgba(0,0,0,0) 1.1px), radial-gradient(circle at 45% 85%, rgba(255,255,255,0.1) 0 0.5px, rgba(0,0,0,0) 0.9px)"; export default function MatchboxPrintCard() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(false); const state = useRef({ scale: 1, dragging: false, moved: 0, lastX: 0, lastY: 0, lastT: 0, vel: 0, paused: false, touched: false }); const out = useSpring(0, { stiffness: 150, damping: 17, mass: 1.15 }); const lift = useSpring(0, { stiffness: 90, damping: 11, mass: 1 }); const px = useMotionValue(0); const py = useMotionValue(0); const rz = useSpring(useTransform(px, (v) => TURN + v * 5), { stiffness: 60, damping: 14 }); const rx = useSpring(useTransform(py, (v) => TIP - v * 4), { stiffness: 60, damping: 14 }); const back = useTransform(out, (v) => -v); const mouthShade = useTransform(out, (v) => clamp(v / 50, 0, 1)); const hinge = useTransform(lift, (v) => `translate3d(${W - HINGE}px, ${DP / 2}px, ${MATCH_Z + 5}px) rotateY(${(v * LIFT).toFixed(2)}deg)`); const cardShadow = useTransform(lift, (v) => 0.55 - clamp(v, 0, 1) * 0.3); const cardShadowX = useTransform(lift, (v) => clamp(v, 0, 1.2) * 34); const cardGloss = useTransform(lift, (v) => 0.1 + clamp(v, 0, 1) * 0.5); const tableShadowW = useTransform(out, (v) => (W + v + 44) / (W + 44)); const slide = useCallback( (to: boolean) => { setOpen(to); if (reduce) { out.jump(to ? OUT : 0); lift.jump(to ? 1 : 0); } else out.set(to ? OUT : 0); }, [lift, out, reduce], ); // the print stands up once the drawer has cleared the sleeve, and lies down again as it goes back useEffect(() => out.on("change", (v) => !reduce && lift.set(v > OUT * 0.8 ? 1 : 0)), [lift, out, reduce]); useEffect(() => { if (reduce) { slide(true); return; } const s = state.current; let n = 0; const first = window.setTimeout(() => slide(true), 320); const loop = window.setInterval(() => { if (s.paused || s.touched || document.hidden) return; n += 1; slide(n % 4 !== 3); }, 1700); return () => { window.clearTimeout(first); window.clearInterval(loop); }; }, [reduce, slide]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 40), 0.42, 1); state.current.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc + 84)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // dragging the drawer: project the pointer's movement onto the direction the drawer runs on screen const axis = useMemo(() => { const vx = Math.cos(rad(TURN)); const vy = Math.sin(rad(TURN)) * Math.cos(rad(TIP)); const len = Math.hypot(vx, vy); return { ux: vx / len, uy: vy / len, len }; }, []); const onDown = (e: React.PointerEvent) => { if (e.button !== 0) return; const s = state.current; s.dragging = true; s.touched = true; s.moved = 0; s.vel = 0; s.lastX = e.clientX; s.lastY = e.clientY; s.lastT = performance.now(); e.currentTarget.setPointerCapture(e.pointerId); }; const onDrag = (e: React.PointerEvent) => { const s = state.current; if (!s.dragging) return; const d = ((e.clientX - s.lastX) * axis.ux + (e.clientY - s.lastY) * axis.uy) / (axis.len * s.scale); const now = performance.now(); s.vel = s.vel * 0.6 + (d / Math.max(1, now - s.lastT)) * 0.4; s.moved += Math.abs(d); s.lastX = e.clientX; s.lastY = e.clientY; s.lastT = now; const raw = out.get() + d; // rubber band past either end out.jump(raw < 0 ? raw * 0.5 : raw > OUT ? OUT + (raw - OUT) * 0.35 : raw); }; const onUp = () => { const s = state.current; if (!s.dragging) return; s.dragging = false; if (s.moved < 4) slide(!open); else slide(out.get() + s.vel * 260 > OUT / 2); }; const onMove = (e: React.PointerEvent) => { if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - r.left) / r.width) * 2 - 1); py.set(((e.clientY - r.top) / r.height) * 2 - 1); }; const matches = useMemo( () => Array.from({ length: 17 }, (_, i) => ({ top: 6 + i * 13.4, shift: [0, 5, -3, 7, 2, -4, 6, 0, 4, -2, 8, 1, -5, 3, 6, -1, 4][i], tilt: [0.3, -0.5, 0.2, 0.6, -0.3, 0.1, -0.6, 0.4, 0, -0.2, 0.5, -0.4, 0.2, 0.3, -0.5, 0.1, -0.1][i], })), [], ); const trayW = W - WALL * 2; const trayD = DP - WALL * 2; const kraft = "linear-gradient(180deg, #c9a878, #b08b58)"; return (
); } ```