# Shoebox with a Hinged Lid That Lifts and Tissue Paper That Parts over a Pair of Leather Shoes > Product reveal built as a shoebox in 3D: the hinged lid lifts, sheets of tissue part and curl, and the shoes lie beneath. 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/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes). - Page, with a live preview: https://shadcn.exchange/r/weinc/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes - Screenshot: https://shadcn.exchange/shot/weinc/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes/light.png - Registry item: https://we.inc/r/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes.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/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes.tsx` ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** What is printed on the box, and the two photographs: the pair on the tissue and the print inside the lid. */ const pair = { maker: "Halden and Rook", style: "Derby 204", colour: "Chestnut calf", size: "EU 43", price: "£245", shoes: { src: "https://images.pexels.com/photos/15059774/pexels-photo-15059774.jpeg?auto=compress&cs=tinysrgb&w=1100", alt: "Pair of brown leather lace-up shoes seen from above on a white sheet" }, print: { src: "https://images.pexels.com/photos/9953932/pexels-photo-9953932.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Man in a red suit and a blue hat holding a red flower against a yellow wall", tone: "#d9a92a", focus: "50% 40%" }, }; // Design pixels in the box's own space: x runs along the box, y from the hinge toward you, z up off the table. const W = 404; const DP = 300; const H = 114; const BOARD = 5; // thickness of the card const LIP = 46; // depth of the lid's skirt const LID_OPEN = 97; // degrees the lid swings back const FLAP_A = 114; // tissue: the panel fixed along the wall const FLAP_B = 104; // tissue: the loose outer panel const SCENE_W = 900; const SCENE_H = 740; const TURN = 26; const TIP = 47; const BLUE = "#2146b4"; const BLUE_DARK = "#152f86"; const CARD = "#d9d2c4"; // raw board on the inside const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; // crumpled tissue: noise lit from one side, so the creases have a bright and a dark face const CRINKLE = svg( "", ); // the tooth of printed board const TOOTH = svg( "", ); const tissue = { backgroundColor: "#fbf9f4", backgroundImage: CRINKLE, backgroundSize: "320px 320px" } as const; export default function ShoeboxWithTissue() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(false); const live = useRef({ open: false, paused: false, touched: false }); const lid = useSpring(0, { stiffness: 58, damping: 8.5, mass: 1.15 }); const part = useSpring(0, { stiffness: 46, damping: 7.5, mass: 1 }); const curl = useSpring(0, { stiffness: 30, damping: 4.6, 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 lidTransform = useTransform(lid, (v) => `translateZ(${H + 3}px) rotateX(${v.toFixed(2)}deg)`); const lidShade = useTransform(lid, (v) => 0.5 - clamp(v / 90, 0, 1) * 0.5); const inGloss = useTransform(lid, (v) => clamp((v - 60) / 50, 0, 1)); const boxShade = useTransform(lid, (v) => 0.62 - clamp(v / 70, 0, 1) * 0.62); const leftA = useTransform(part, (v) => `translateZ(${H - 5}px) rotateY(${(-(3 + v * 101)).toFixed(2)}deg)`); const rightA = useTransform(part, (v) => `translateZ(${H - 3.5}px) rotateY(${(2 + v * 128).toFixed(2)}deg)`); const leftB = useTransform(curl, (v) => `rotateY(${(4 - v * 49).toFixed(2)}deg)`); const rightB = useTransform(curl, (v) => `rotateY(${(-3 + v * 30).toFixed(2)}deg)`); const tissueShadow = useTransform(part, (v) => 0.3 * (1 - clamp(v * 1.6, 0, 1))); const swing = useCallback( (to: boolean) => { live.current.open = to; setOpen(to); if (reduce) { lid.jump(to ? LID_OPEN : 0); part.jump(to ? 1 : 0); curl.jump(to ? 1 : 0); } else if (to) lid.set(LID_OPEN); else part.set(0); }, [curl, lid, part, reduce], ); // the tissue waits for the lid to clear, and the lid waits for the tissue to be folded back useEffect(() => { if (reduce) return; const a = lid.on("change", (v) => live.current.open && v > 52 && part.set(1)); const b = part.on("change", (v) => { curl.set(v); if (!live.current.open && v < 0.32) lid.set(0); }); return () => { a(); b(); }; }, [curl, lid, part, reduce]); useEffect(() => { if (reduce) { swing(true); return; } const s = live.current; let n = 0; const first = window.setTimeout(() => swing(true), 260); const loop = window.setInterval(() => { if (s.paused || s.touched || document.hidden) return; n += 1; swing(n % 4 !== 3); }, 2700); return () => { window.clearTimeout(first); window.clearInterval(loop); }; }, [reduce, swing]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 70), 0.44, 1); wrap.style.height = `${Math.round(SCENE_H * sc + 70)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); const toggle = () => { live.current.touched = true; swing(!live.current.open); }; 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 LW = W + 8; // the lid is a little bigger than the box it covers const LD = DP + 6; const flapSpan = { top: BOARD + 2, height: DP - BOARD * 2 - 4 }; const boardFace = { backgroundColor: BLUE, backgroundImage: TOOTH } as const; return (
); } ```