# Medium Format Contact Sheet Gallery Where a Red Grease Pencil Circles the Keepers and the Last Pick Lands as a Work Print > Contact sheet gallery of square frames on film strips: red wax circles ring your picks and the last lands beside as a work print. 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/medium-format-contact-sheet-gallery-where-a-red-grease-pencil-circles-the-keepers-and-the-last-pick-lands-as-a-work-print). - Page, with a live preview: https://shadcn.exchange/r/weinc/medium-format-contact-sheet-gallery-where-a-red-grease-pencil-circles-the-keepers-and-the-last-pick-lands-as-a-work-print - Screenshot: https://shadcn.exchange/shot/weinc/medium-format-contact-sheet-gallery-where-a-red-grease-pencil-circles-the-keepers-and-the-last-pick-lands-as-a-work-print/light.png - Registry item: https://we.inc/r/medium-format-contact-sheet-gallery-where-a-red-grease-pencil-circles-the-keepers-and-the-last-pick-lands-as-a-work-print.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/medium-format-contact-sheet-gallery-where-a-red-grease-pencil-circles-the-keepers-and-the-last-pick-lands-as-a-work-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/medium-format-contact-sheet-gallery-where-a-red-grease-pencil-circles-the-keepers-and-the-last-pick-lands-as-a-work-print.tsx` ```tsx import { useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; // One roll of twelve. `photo` is a square crop from Pexels; `tone` is the grey shown while the picture loads. const frames = [ { photo: "https://images.pexels.com/photos/10856898/pexels-photo-10856898.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#1b1b1b", alt: "Woman in a black vest top with her hair blown sideways against a dark studio wall" }, { photo: "https://images.pexels.com/photos/12022522/pexels-photo-12022522.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#8d8d8d", alt: "Young woman with long dark hair resting her cheek on her hand" }, { photo: "https://images.pexels.com/photos/16307205/pexels-photo-16307205.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#6f6f6f", alt: "Woman in a dark jumper with both arms raised above her head" }, { photo: "https://images.pexels.com/photos/16929699/pexels-photo-16929699.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#7a7a7a", alt: "Model in a sleeveless top with her hands on her head and her face in shadow" }, { photo: "https://images.pexels.com/photos/17040863/pexels-photo-17040863.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#bdbdbd", alt: "Woman in a trench coat, hat and round sunglasses seen in profile" }, { photo: "https://images.pexels.com/photos/20459101/pexels-photo-20459101.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#1e1e1e", alt: "Woman in a black halter top holding one hand beside her face" }, { photo: "https://images.pexels.com/photos/20480963/pexels-photo-20480963.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#c4c4c4", alt: "Model bent over backwards with her hair hanging down, in a white T-shirt and jeans" }, { photo: "https://images.pexels.com/photos/24972993/pexels-photo-24972993.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#555555", alt: "Woman with short curly hair in a slip dress resting her chin on her hand" }, { photo: "https://images.pexels.com/photos/39553398/pexels-photo-39553398.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#6a6a6a", alt: "Woman with a short bob touching her collar and chin with both hands" }, { photo: "https://images.pexels.com/photos/37524408/pexels-photo-37524408.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#3a3a3a", alt: "Woman in an oversized white shirt in profile in front of a round light" }, { photo: "https://images.pexels.com/photos/36298417/pexels-photo-36298417.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#cfcfcf", alt: "Dancer in a patterned blouse and short skirt caught mid step with ribbons flying" }, { photo: "https://images.pexels.com/photos/9251126/pexels-photo-9251126.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=800&h=800", tone: "#909090", alt: "Woman looking down under the wide brim of a black felt hat" }, ]; const GREASE = "#f2463a"; // the wax colour: circles, slashes and the pencil itself const STOCK = "ORWIN PAN 400"; // edge lettering printed along each strip const JOB = { roll: "ROLL 14", sitter: "N. ROSSET", date: "6 MAR" }; const REJECTS = [2, 7]; // frames that arrive already struck through const START = [1, 9]; // frames that arrive already circled, oldest first const DEMO = [5, 3, 10, 0, 8]; // frames the self-running demo circles in turn const PER_STRIP = 3; // A hand-drawn ring: a little more than one turn, never quite closing on itself, different for every frame. const ringPath = (seed: number) => { let s = seed * 9301 + 49297; const rnd = () => { s = (s * 16807) % 2147483647; return s / 2147483647; }; const rx = 55 + rnd() * 5, ry = 53 + rnd() * 5, tilt = (rnd() - 0.5) * 0.6, a0 = -2.4 + rnd() * 1.3, sweep = 6.9 + rnd() * 0.6, wob = rnd() * 6; const pts: string[] = []; for (let i = 0; i <= 64; i++) { const t = i / 64, a = a0 + sweep * t, grow = 0.95 + 0.11 * t + 0.025 * Math.sin(t * 8 + wob); const x = Math.cos(a) * rx * grow, y = Math.sin(a) * ry * grow; pts.push(`${(50 + x * Math.cos(tilt) - y * Math.sin(tilt)).toFixed(1)} ${(50 + x * Math.sin(tilt) + y * Math.cos(tilt)).toFixed(1)}`); } return "M" + pts.join("L"); }; export default function ContactSheetGreasePencilGallery() { const reduce = useReducedMotion(); const [picked, setPicked] = useState(START); const [shown, setShown] = useState(START[START.length - 1]); const [drawn, setDrawn] = useState([]); // frames whose ring should animate (anything circled after load) const touched = useRef(0); const rings = useMemo(() => frames.map((_, i) => ringPath(i + 3)), []); const strips = useMemo(() => { const out: number[][] = []; for (let i = 0; i < frames.length; i += PER_STRIP) out.push(frames.slice(i, i + PER_STRIP).map((_, k) => i + k)); return out; }, []); const toggle = (i: number, fromUser: boolean) => { if (fromUser) touched.current = Date.now(); setPicked((p) => { if (p.includes(i)) { const rest = p.filter((v) => v !== i); if (rest.length) setShown(rest[rest.length - 1]); return rest; } setShown(i); setDrawn((d) => (d.includes(i) ? d : [...d, i])); return [...p, i]; }); }; // Until someone touches it, the pencil keeps working down the sheet by itself. useEffect(() => { if (reduce) return; let step = 0; let timer = window.setTimeout(function tick() { if (Date.now() - touched.current > 8000 && !document.hidden) { const i = DEMO[step % DEMO.length]; step++; setPicked((p) => { const next = p.filter((v) => v !== i); while (next.length > 2) next.shift(); return [...next, i]; }); setDrawn((d) => (d.includes(i) ? d : [...d, i])); setShown(i); } timer = window.setTimeout(tick, 3400); }, 900); return () => window.clearTimeout(timer); }, [reduce]); const order = picked.indexOf(shown) + 1; return (
{/* The contact sheet: glossy paper, exposed black except for the easel margin. */}
{strips.map((strip, r) => (
    {strip.map((i) => { const on = picked.includes(i); return (
    • ); })}
))}
{/* typed job label stuck along the bottom */}
{/* The work print of the frame circled last. */}
{frames[shown].alt}
Frame {String(shown + 1).padStart(2, "0")} / {order > 0 ? `Keeper ${order} of ${picked.length}` : "Work print"}
{/* The grease pencil: paper-wrapped barrel, torn back from a blunt wax point. */}