# Pull-Down Wall Chart Tabs on Spring Rollers That Snap up to Uncover the Chart Hanging Behind > Tabs built as a rack of schoolroom wall charts: each chart snaps up onto its spring roller to uncover the one hanging behind. Free React and HTML to copy. 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/pull-down-wall-chart-tabs-on-spring-rollers-that-snap-up-to-uncover-the-chart-hanging-behind). - Page, with a live preview: https://shadcn.exchange/r/weinc/pull-down-wall-chart-tabs-on-spring-rollers-that-snap-up-to-uncover-the-chart-hanging-behind - Screenshot: https://shadcn.exchange/shot/weinc/pull-down-wall-chart-tabs-on-spring-rollers-that-snap-up-to-uncover-the-chart-hanging-behind/light.png - Registry item: https://we.inc/r/pull-down-wall-chart-tabs-on-spring-rollers-that-snap-up-to-uncover-the-chart-hanging-behind.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/pull-down-wall-chart-tabs-on-spring-rollers-that-snap-up-to-uncover-the-chart-hanging-behind.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/pull-down-wall-chart-tabs-on-spring-rollers-that-snap-up-to-uncover-the-chart-hanging-behind.tsx` ```tsx import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** One wall chart per tab, front roller first. `tab` is the word in the brass holder on its bottom slat. */ const school = { name: "Saltmarsh Sailing School", hint: "Pull a brass tab to change the chart" }; const charts = [ { tab: "Clouds", title: "Reading the sky", paper: "#dfe8ea", text: "#1f2a33", ink: "#1d3f66", tone: "#3f7fc4", photo: "https://images.pexels.com/photos/8726326/pexels-photo-8726326.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Tall white cumulus clouds piling up against a deep blue sky", fig: "Cumulus building before noon", body: "Flat-bottomed heaps that stay small mean a settled afternoon. When they grow taller than they are wide before lunch, expect gusts underneath them and reef early.", notes: ["Small and scattered: fair", "Towering by noon: squalls", "Anvil on top: stay ashore"] }, { tab: "Tides", title: "Working the tide", paper: "#efe5cf", text: "#2a251d", ink: "#0f5257", tone: "#1c7f8a", photo: "https://images.pexels.com/photos/9940655/pexels-photo-9940655.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Turquoise sea breaking white over dark rocks, seen from directly above", fig: "The ebb over Gull Ledge", body: "The harbour dries for two hours either side of low water. Leave on the flood so that a grounding lifts you off again, and keep clear of the bar when the ebb runs against an onshore wind.", notes: ["Flood: the water is rising", "Ebb: the water is falling", "Slack: the pause between"] }, { tab: "Knots", title: "Three good knots", paper: "#e9d3ae", text: "#2a2118", ink: "#7a2f22", tone: "#8f9aa3", photo: "https://images.pexels.com/photos/2347466/pexels-photo-2347466.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Thick grey mooring rope knotted round a steel rail", fig: "A stern line made fast", body: "Learn three before you learn thirty. A bowline for a loop that will not slip, a clove hitch for a fender, and a round turn with two half hitches for anything you want to find again in the morning.", notes: ["Bowline: a fixed loop", "Clove hitch: quick to adjust", "Round turn: takes the strain"] }, { tab: "Lights", title: "Lights after dark", paper: "#1c2b3d", text: "#e9e1cc", ink: "#f0c46a", tone: "#e9e2d6", photo: "https://images.pexels.com/photos/12323409/pexels-photo-12323409.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A pale lighthouse tower above a sand dune in hazy evening light", fig: "The dune light at dusk", body: "Every light has a rhythm of its own, printed on the chart beside it. Count the flashes against your watch for a full minute before you trust the name you have given it.", notes: ["Fl: one flash at a time", "Oc: lit, with short darks", "Iso: light and dark equal"] }, ]; // Two sets of measurements in pixels: one for desks, one for phones. const WIDE = { w: 720, L: 486, pad: 34, holder: 112, title: 42, text: 15.5, lead: 24, photoH: 262, two: true }; const SLIM = { w: 300, L: 580, pad: 16, holder: 60, title: 26, text: 12.5, lead: 19, photoH: 150, two: false }; type Dims = typeof WIDE; const STEP = 44; // each roller hangs this much lower than the one in front of it const ROLL = 24; // roller diameter const SLAT = 26; // the black bar along the bottom of each chart const EXT = 22; // how far a roller runs past the paper at each end const TOP = 44; const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(`${body}`)}")`; const PAPER = svgUrl(``, 240, 240); const PLASTER = svgUrl(``, 300, 300); const WOOD = svgUrl(``, 700, 40); const BRASS = "linear-gradient(180deg, #fff3c4 0%, #e2bf68 20%, #b98d33 55%, #8a6519 80%, #d9b660 100%)"; function Chart({ i, d, up, wait, reduce, active, uid, onPick, onKey, onFocus, setRef }: { i: number; d: Dims; up: boolean; wait: number; reduce: boolean; active: boolean; uid: string; onPick: () => void; onKey: (e: KeyboardEvent) => void; onFocus: (on: boolean) => void; setRef: (el: HTMLButtonElement | null) => void }) { const c = charts[i]; const upY = ROLL + 4 - ROLL / 2 - (d.L - SLAT); // rolled: only the slat is left showing under the roller const y = useMotionValue(up ? upY : 0); const rattle = useMotionValue(0); const fat = useTransform(y, [upY, 0], [1.42, 1]); const swing = useTransform(rattle, (v) => v * 5); const was = useRef(up); useEffect(() => { if (was.current === up || reduce) { was.current = up; y.set(up ? upY : 0); return; } was.current = up; let live = true; let tail: { stop: () => void } | null = null; // going up the spring takes it, faster and faster, and the slat rattles against the roller; coming down a hand pulls it const run = up ? animate(y, upY, { duration: 0.44, delay: wait, ease: [0.6, 0, 0.9, 0.5] }) : animate(y, 0, { type: "spring", stiffness: 150, damping: 15, mass: 0.9, delay: wait }); run.then(() => { if (live) tail = animate(rattle, up ? [0, -1.6, 1.2, -0.7, 0.3, 0] : [0, 0.5, -0.3, 0], { duration: up ? 0.7 : 0.5, ease: "easeOut" }); }); return () => { live = false; run.stop(); tail?.stop(); }; }, [up, reduce, upY, wait, y, rattle]); const left = EXT + 14; const holderLeft = d.pad - 6 + (i * (d.w - 2 * d.pad + 12 - d.holder)) / (charts.length - 1); return (
{/* the paper is cut off at the middle of its roller, which is where it winds on */}
{/* cloth tape down both edges */} {[0, 1].map((s) => (
); } export default function PullDownWallChartTabs() { const reduce = !!useReducedMotion(); const uid = useId(); const wrapRef = useRef(null); const tabs = useRef<(HTMLButtonElement | null)[]>([]); const [slim, setSlim] = useState(false); const [scale, setScale] = useState(1); const [sel, setSel] = useState({ now: 1, was: 1 }); const idle = useRef({ touched: false, paused: false }); const d = slim ? SLIM : WIDE; const n = charts.length; const W = d.w + 2 * (EXT + 14); const H = TOP + (n - 1) * STEP + ROLL / 2 + d.L + 34; useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; const measure = () => { const w = wrap.clientWidth; const narrow = w < 760; setSlim(narrow); setScale(Math.min(1, (w - 8) / ((narrow ? SLIM : WIDE).w + 2 * (EXT + 14)))); }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // until someone touches it, the charts go up one at a time and then all come back down useEffect(() => { if (reduce) return; const s = idle.current; const t = window.setInterval(() => { if (s.touched || s.paused || document.hidden) return; setSel((v) => ({ now: (v.now + 1) % n, was: v.now })); }, 3300); return () => window.clearInterval(t); }, [reduce, n]); const pick = (i: number, focusIt = false) => { idle.current.touched = true; setSel((v) => (v.now === i ? v : { now: i, was: v.now })); if (focusIt) tabs.current[i]?.focus(); }; const onKey = (i: number) => (e: KeyboardEvent) => { const to = e.key === "ArrowRight" || e.key === "ArrowDown" ? (i + 1) % n : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (i + n - 1) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1; if (to < 0) return; e.preventDefault(); pick(to, true); }; return (
); } ```