# Bubble Wrap Sheet over a Photo Print with Air Cells That Magnify the Picture until You Pop Them Flat > Waiting state of bubble wrap over a photo print: each air cell bends the picture like a lens until you pop it. Free React and Tailwind code, plus 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/bubble-wrap-sheet-over-a-photo-print-with-air-cells-that-magnify-the-picture-until-you-pop-them-flat). - Page, with a live preview: https://shadcn.exchange/r/weinc/bubble-wrap-sheet-over-a-photo-print-with-air-cells-that-magnify-the-picture-until-you-pop-them-flat - Screenshot: https://shadcn.exchange/shot/weinc/bubble-wrap-sheet-over-a-photo-print-with-air-cells-that-magnify-the-picture-until-you-pop-them-flat/light.png - Registry item: https://we.inc/r/bubble-wrap-sheet-over-a-photo-print-with-air-cells-that-magnify-the-picture-until-you-pop-them-flat.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/bubble-wrap-sheet-over-a-photo-print-with-air-cells-that-magnify-the-picture-until-you-pop-them-flat.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/bubble-wrap-sheet-over-a-photo-print-with-air-cells-that-magnify-the-picture-until-you-pop-them-flat.tsx` ```tsx import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; /** The wrapped print and the words round it. */ const wrap = { title: "Packing your print", note: "Pop a few while the label prints", photo: { src: "https://images.pexels.com/photos/7035194/pexels-photo-7035194.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Woman in a coral jacket framing her face with her hands in front of a blue velvet curtain", tone: "#2f66a8" }, }; /** Sound is off. Set to true for a short dry click on every pop. */ const POP_SOUND_ON = false; const CELL = 40; // diameter of one air cell const PITCH = 46; // centre to centre along a row const ROW = 40; // centre to centre between rows const ROWS = 10; const EDGE = 15; // film left over round the cells const LENS = 1.1; // how much a full cell magnifies the picture under it const MAX_COLS = 14; const MIN_COLS = 6; // creased film for a popped cell: a lit noise field, laid over the picture with a blend mode const creased = `url("data:image/svg+xml,${encodeURIComponent( "", )}")`; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); type Cell = { i: number; r: number; c: number; x: number; y: number }; function layout(cols: number) { const cells: Cell[] = []; for (let r = 0; r < ROWS; r++) for (let c = 0; c < cols; c++) cells.push({ i: cells.length, r, c, x: EDGE + c * PITCH + (r % 2 ? PITCH / 2 : 0), y: EDGE + r * ROW }); return { cells, w: EDGE * 2 + cols * PITCH + PITCH / 2 - (PITCH - CELL), h: EDGE * 2 + (ROWS - 1) * ROW + CELL }; } /** The order a bored hand would pop them in: always a cell next to the last one, wandering. */ function walk(cells: Cell[], popped: Set, from: number, step: number) { let best = -1; let score = Infinity; const a = cells[from]; for (const b of cells) { if (popped.has(b.i)) continue; const d = Math.hypot(a.x - b.x, a.y - b.y) + ((b.i * 37 + step * 53) % 29); if (d < score) { score = d; best = b.i; } } return best; } function starter(cells: Cell[], cols: number, sheet: number) { const set = new Set(); let at = Math.min(cells.length - 1, (3 + (sheet % 3)) * cols + Math.floor(cols * 0.62)); const n = Math.round(cells.length * 0.17); for (let k = 0; k < n; k++) { set.add(at); const next = walk(cells, set, at, k + sheet * 7); if (next < 0) break; at = next; } return { set, at }; } export default function BubbleWrapSheet() { const reduce = !!useReducedMotion(); const holder = useRef(null); const audio = useRef(null); const [cols, setCols] = useState(MAX_COLS); const [sheet, setSheet] = useState(1); const grid = useMemo(() => layout(cols), [cols]); const first = useMemo(() => starter(grid.cells, cols, sheet), [grid, cols, sheet]); const [popped, setPopped] = useState>(first.set); const [focus, setFocus] = useState(0); const live = useRef({ popped: first.set, at: first.at, step: 0, touched: false, down: false, hidden: false }); // a new sheet, or a narrower one on a phone, starts from its own part-popped pattern useEffect(() => { live.current.popped = first.set; live.current.at = first.at; live.current.step = 0; setPopped(first.set); }, [first]); useEffect(() => { const el = holder.current; if (!el) return; const measure = () => setCols(clamp(Math.floor((el.clientWidth - 32 - EDGE * 2 - PITCH / 2) / PITCH), MIN_COLS, MAX_COLS)); measure(); const ro = new ResizeObserver(measure); ro.observe(el); const io = new IntersectionObserver(([e]) => (live.current.hidden = !e.isIntersecting)); io.observe(el); return () => { ro.disconnect(); io.disconnect(); }; }, []); const click = useCallback(() => { if (!POP_SOUND_ON) return; const Ctx = window.AudioContext; if (!Ctx) return; const ctx = audio.current ?? (audio.current = new Ctx()); const len = Math.floor(ctx.sampleRate * 0.05); const buf = ctx.createBuffer(1, len, ctx.sampleRate); const d = buf.getChannelData(0); for (let k = 0; k < len; k++) d[k] = (Math.random() * 2 - 1) * Math.pow(1 - k / len, 5); const src = ctx.createBufferSource(); const gain = ctx.createGain(); gain.gain.value = 0.35; src.buffer = buf; src.connect(gain).connect(ctx.destination); src.start(); }, []); useEffect(() => () => void audio.current?.close(), []); const pop = useCallback( (i: number) => { const s = live.current; if (s.popped.has(i)) return; const next = new Set(s.popped); next.add(i); s.popped = next; s.at = i; setPopped(next); click(); }, [click], ); const fresh = useCallback(() => setSheet((n) => n + 1), []); // idle hand: pops a neighbouring cell every so often until a person joins in useEffect(() => { if (reduce) return; const id = window.setInterval(() => { const s = live.current; if (s.touched || s.hidden || document.hidden) return; s.step += 1; const next = walk(grid.cells, s.popped, s.at, s.step + sheet * 7); if (next >= 0) pop(next); }, 620); return () => window.clearInterval(id); }, [grid, pop, reduce, sheet]); // when every cell is flat the sheet is swapped for a new one const total = grid.cells.length; const done = popped.size >= total; useEffect(() => { if (!done) return; const id = window.setTimeout(fresh, 1100); return () => window.clearTimeout(id); }, [done, fresh]); useEffect(() => { const up = () => (live.current.down = false); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); return () => { window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, []); const onKey = (e: React.KeyboardEvent, cell: Cell) => { const move = { ArrowLeft: [0, -1], ArrowRight: [0, 1], ArrowUp: [-1, 0], ArrowDown: [1, 0] }[e.key]; if (!move) return; e.preventDefault(); const r = clamp(cell.r + move[0], 0, ROWS - 1); const c = clamp(cell.c + move[1], 0, cols - 1); const to = r * cols + c; setFocus(to); holder.current?.querySelector(`[data-cell="${to}"]`)?.focus(); }; const lensSize = `${(grid.w * LENS).toFixed(1)}px ${(grid.h * LENS).toFixed(1)}px`; return (
); } ```