# Undo History Split-Flap Board That Rewinds a Homepage One Leaf at a Time > Undo and redo demo where each saved version of a homepage is a leaf on a split-flap board that rewinds one leaf at a time. 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/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time). - Page, with a live preview: https://shadcn.exchange/r/weinc/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time - Screenshot: https://shadcn.exchange/shot/weinc/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time/light.png - Registry item: https://we.inc/r/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time.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/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time.tsx` ```tsx import { useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; const BLUE = "#4F98FB"; const INK = "#0B0D12"; const PAPER = "#F8F6F1"; const NIGHT = "#12151C"; const sans = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const site = { brand: "Saltline Surf School", links: ["Lessons", "Camps", "Find us"], plain: ["Surf", "lessons in", "Ericeira."], bold: ["Stand up on", "your first", "wave."], sub: "Small groups, soft boards and warm wetsuits, all year.", cta: "Book a lesson", beach: { src: "https://images.pexels.com/photos/5689762/pexels-photo-5689762.jpeg?auto=compress&cs=tinysrgb&w=600", tone: "#9db4c4" }, wave: { src: "https://images.pexels.com/photos/14793463/pexels-photo-14793463.jpeg?auto=compress&cs=tinysrgb&w=600", tone: "#7f9c9a" }, }; /** The history, oldest first. Each sentence produced the leaf with the same number. */ const edits = ["First draft.", "Make the headline bolder.", "Use the photo of the wave.", "Give it a dark header.", "Make the button blue."]; const N = edits.length; // Design pixels. The scene is scaled to fit its frame. const W = 500; const H = 360; const HALF = H / 2; const BOX_W = 596; const BOX_H = 470; const SCENE_W = 900; const SCENE_H = 530; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /** The page after `i` edits. */ function Face({ i }: { i: number }) { const band = i >= 3; const bold = i >= 1; const photo = i >= 2 ? site.wave : site.beach; return (
{site.brand} {site.links.map((l) => ( {l} ))}

{(bold ? site.bold : site.plain).map((l) => ( {l} ))}

{site.sub}

= 4 ? BLUE : INK, color: i >= 4 ? INK : "#ffffff" }}> {site.cta}
); } /** One leaf: the upper or lower half of a page, printed on a thin card. */ function Leaf({ i, lower, flip }: { i: number; lower?: boolean; flip?: boolean }) { return ( ); } const all = Array.from({ length: N }, (_, i) => i); export default function SplitFlapUndoBoard() { const reduce = useReducedMotion(); const stageRef = useRef(null); const wrapRef = useRef(null); const sceneRef = useRef(null); const boxRef = useRef(null); const flapRef = useRef(null); const knobRef = useRef(null); const [ver, setVer] = useState(N - 1); const api = useRef<{ step: (d: number) => void } | null>(null); useEffect(() => { const stage = stageRef.current, wrap = wrapRef.current, scene = sceneRef.current, box = boxRef.current, flap = flapRef.current, knob = knobRef.current; if (!stage || !wrap || !scene || !box || !flap || !knob) return; const q = (sel: string) => Array.from(box.querySelectorAll(sel)); const tops = q("[data-top]"), bots = q("[data-bot]"), fronts = q("[data-front]"), backs = q("[data-back]"), lamps = q("[data-lamp]"), above = q("[data-above]"), below = q("[data-below]"); const shadeF = box.querySelector("[data-shade-front]"), shadeB = box.querySelector("[data-shade-back]"), castT = box.querySelector("[data-cast-top]"), castB = box.querySelector("[data-cast-bot]"); if (!shadeF || !shadeB || !castT || !castB) return; const s = { pos: N - 1, v: 0, target: N - 1, rate: 1.7, kick: 0, vkick: 0, px: 0, py: 0, tpx: 0, tpy: 0, user: -1e9, demoT: performance.now() + 900, demoDir: -1, shown: N - 1, lo: -1 }; let raf = 0; let visible = true; let last = performance.now(); const measure = () => { const sc = clamp(wrap.clientWidth / 760, 0.42, 1.06); wrap.style.height = `${Math.round(SCENE_H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const paint = () => { const lo = clamp(Math.floor(s.pos), 0, N - 2); const a = clamp(s.pos - lo, 0, 1); const ang = 180 * a; if (lo !== s.lo) { s.lo = lo; // upper window shows the newer page, lower window the older one, and the leaf between them carries one half of each tops.forEach((el, i) => (el.style.visibility = i === lo + 1 ? "visible" : "hidden")); bots.forEach((el, i) => (el.style.visibility = i === lo ? "visible" : "hidden")); fronts.forEach((el, i) => (el.style.visibility = i === lo ? "visible" : "hidden")); backs.forEach((el, i) => (el.style.visibility = i === lo + 1 ? "visible" : "hidden")); } flap.style.transform = `translateZ(1.5px) rotateX(${(-ang).toFixed(2)}deg)`; const mid = Math.sin((ang * Math.PI) / 180); shadeF.style.opacity = (ang < 90 ? mid * 0.5 : 0).toFixed(3); shadeB.style.opacity = (ang >= 90 ? mid * 0.38 : 0).toFixed(3); castT.style.opacity = (a > 0.001 && a < 0.5 ? 0.42 * (1 - a * 2) + 0.12 : a >= 0.5 && a < 0.999 ? 0.12 * (1 - a) * 2 : 0).toFixed(3); castB.style.opacity = (ang > 90 && a < 0.999 ? 0.6 * (1 - mid) + 0.1 : ang > 4 && ang <= 90 ? 0.1 * mid : 0).toFixed(3); knob.style.transform = `rotate(${(s.pos * 67).toFixed(2)}deg)`; lamps.forEach((el, i) => el.style.setProperty("--lit", clamp(s.pos - i + 1, 0, 1).toFixed(3))); const now = Math.round(s.pos); above.forEach((el, i) => (el.style.opacity = i < N - 1 - now ? "1" : "0")); below.forEach((el, i) => (el.style.opacity = i < now ? "1" : "0")); if (now !== s.shown) { s.shown = now; setVer(now); } }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; // with nobody touching it, the board rewinds to the first draft and then lets the edits fall back in if (!reduce && now - s.user > 7000 && s.pos === s.target && now > s.demoT) { if (s.demoDir < 0) { s.target = 0; s.rate = 1.55; } else s.target = N - 1; s.demoDir = -s.demoDir; } if (reduce) s.pos = s.target; else if (s.pos > s.target) { // undo: the spindle is driven backwards at a steady rate and each leaf is carried up and over const before = Math.ceil(s.pos - 1e-6); s.pos = Math.max(s.target, s.pos - s.rate * dt); if (Math.ceil(s.pos - 1e-6) < before || s.pos === s.target) s.vkick += 46; if (s.pos === s.target) s.demoT = now + 1500; s.v = 0; } else if (s.pos < s.target) { // redo: a leaf is let go and falls under its own weight const edge = Math.floor(s.pos + 1e-6) + 1; s.v += 26 * dt; s.pos += (0.7 + s.v) * dt; if (s.pos >= edge) { s.pos = edge; s.v = 0; s.vkick -= 80; if (s.pos === s.target) s.demoT = now + 2600; } } paint(); s.vkick += (-520 * s.kick - 20 * s.vkick) * dt; s.kick += s.vkick * dt; s.px += (s.tpx - s.px) * 0.07; s.py += (s.tpy - s.py) * 0.07; const idle = reduce ? 0 : Math.sin(now / 2600) * 2.4; box.style.transform = `translateY(${(-s.kick).toFixed(2)}px) rotateX(${(6 - s.py * 4).toFixed(2)}deg) rotateY(${(-15 + s.px * 7 + idle).toFixed(2)}deg)`; if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(stage); paint(); raf = requestAnimationFrame(tick); const move = (e: PointerEvent) => { const r = stage.getBoundingClientRect(); s.tpx = clamp(((e.clientX - r.left) / r.width - 0.5) * 2, -1, 1); s.tpy = clamp(((e.clientY - r.top) / r.height - 0.5) * 2, -1, 1); }; const leave = () => { s.tpx = 0; s.tpy = 0; }; stage.addEventListener("pointermove", move); stage.addEventListener("pointerleave", leave); api.current = { step: (d) => { s.user = performance.now(); s.rate = 4.6; s.target = clamp(Math.round(s.target) + d, 0, N - 1); s.demoDir = s.target === 0 ? 1 : -1; }, }; return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); stage.removeEventListener("pointermove", move); stage.removeEventListener("pointerleave", leave); api.current = null; }; }, [reduce]); const steel = "linear-gradient(180deg, #f4f5f7 0%, #b9bdc4 38%, #7d828b 62%, #d5d8dd 100%)"; const pill = "inline-flex h-12 items-center gap-2 rounded-full px-6 text-[14px] font-extrabold tracking-[-0.01em] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0B0D12] focus-visible:ring-offset-2 focus-visible:ring-offset-[#4F98FB] disabled:opacity-40"; return (
); } ```