# Matchbook FAQ Row Where Each Printed Cover Flips up off Its Comb of Matches to Show the Answer Inside
> FAQ drawn as a row of bar matchbooks: press one and its printed cover swings up in 3D to show the answer inside. Free React and Tailwind code, or 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/matchbook-faq-row-where-each-printed-cover-flips-up-off-its-comb-of-matches-to-show-the-answer-inside).
- Page, with a live preview: https://shadcn.exchange/r/weinc/matchbook-faq-row-where-each-printed-cover-flips-up-off-its-comb-of-matches-to-show-the-answer-inside
- Screenshot: https://shadcn.exchange/shot/weinc/matchbook-faq-row-where-each-printed-cover-flips-up-off-its-comb-of-matches-to-show-the-answer-inside/light.png
- Registry item: https://we.inc/r/matchbook-faq-row-where-each-printed-cover-flips-up-off-its-comb-of-matches-to-show-the-answer-inside.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/matchbook-faq-row-where-each-printed-cover-flips-up-off-its-comb-of-matches-to-show-the-answer-inside.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/matchbook-faq-row-where-each-printed-cover-flips-up-off-its-comb-of-matches-to-show-the-answer-inside.tsx`
```tsx
import { useEffect, useId, useRef, useState } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
type Motif = "sun" | "arcs" | "check" | "bars" | "moon" | "slant";
/** The bar, and one matchbook per question: cover colour, ink, the colour of the match heads and the printed motif. */
const bar = { name: "The Lantern Room", line: "Close cover before striking" };
const books: { q: string; a: string; cover: string; ink: string; head: string; motif: Motif }[] = [
{ q: "Do we need to book?", a: "Not at the bar or the six stools by the window. For a table after eight on a Friday or Saturday, book online or ring us after four.", cover: "#d8432b", ink: "#fff1d8", head: "#f4ead2", motif: "sun" },
{ q: "How late are you open?", a: "Until one, Tuesday to Saturday. Last orders are called at half past twelve and the kitchen hatch closes at eleven.", cover: "#e5a91f", ink: "#1b1510", head: "#c8321f", motif: "arcs" },
{ q: "Anything without alcohol?", a: "A whole page of it. Five drinks built from our own cordials and teas, made with the same care and served in the same glasses.", cover: "#14573f", ink: "#f3e7c6", head: "#e8b63c", motif: "check" },
{ q: "Can we bring a big group?", a: "Up to twelve fit in the back snug. Write to us a week ahead and we will hold it for you and set out the long table.", cover: "#efe4cb", ink: "#1c2957", head: "#1c2957", motif: "bars" },
{ q: "Is there a dress code?", a: "No. Come as you are, from work or from the allotment. We only ask that hats come off at the bar so Ada can see who is ordering.", cover: "#2548ad", ink: "#f6ecd4", head: "#f4ead2", motif: "moon" },
{ q: "Do you serve food?", a: "Small plates until eleven: toasties, pickles, a cheese board and whatever the bakery next door had left at closing.", cover: "#ee9bb0", ink: "#57101f", head: "#201418", motif: "slant" },
];
const TOUR = [2, 0, 5, 3, 1, 4]; // the order the row opens its own books in while nobody is touching it
const REST = 171; // degrees an open cover lies back at: card is springy and never goes quite flat
const STICKS = 10;
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(``)}")`;
const CARD = svgUrl(``, 200, 200);
const GRIT = svgUrl(``, 120, 120);
// how each book was dropped on the bar
const LAY = [
{ r: -1.1, y: 4 },
{ r: 0.8, y: -3 },
{ r: -0.5, y: 6 },
{ r: 1.2, y: 0 },
{ r: -0.9, y: -4 },
{ r: 0.6, y: 5 },
];
/** What is printed across the lower part of the cover, drawn with gradients in the cover's ink. */
function motif(kind: Motif, ink: string): React.CSSProperties {
switch (kind) {
case "sun":
return { backgroundImage: `radial-gradient(circle at 50% 100%, ${ink} 0 30%, rgba(0,0,0,0) 30.8%), repeating-conic-gradient(from -90deg at 50% 100%, ${ink} 0 6deg, rgba(0,0,0,0) 6deg 15deg)` };
case "arcs":
return { backgroundImage: `repeating-radial-gradient(circle at 50% 118%, ${ink} 0 5px, rgba(0,0,0,0) 5px 13px)` };
case "check":
return { backgroundImage: `conic-gradient(${ink} 25%, rgba(0,0,0,0) 0 50%, ${ink} 0 75%, rgba(0,0,0,0) 0)`, backgroundSize: "24px 24px" };
case "bars":
return { backgroundImage: `repeating-linear-gradient(90deg, ${ink} 0 9px, rgba(0,0,0,0) 9px 18px)` };
case "moon":
return { backgroundImage: `radial-gradient(circle at 68% 62%, ${ink} 0 27px, rgba(0,0,0,0) 27.8px), radial-gradient(circle at 24% 30%, ${ink} 0 2px, rgba(0,0,0,0) 2.6px), radial-gradient(circle at 40% 74%, ${ink} 0 1.6px, rgba(0,0,0,0) 2.2px), radial-gradient(circle at 12% 66%, ${ink} 0 1.4px, rgba(0,0,0,0) 2px)` };
default:
return { backgroundImage: `repeating-linear-gradient(-52deg, ${ink} 0 7px, rgba(0,0,0,0) 7px 17px)` };
}
}
function Matchbook({ i, open, onPick, reduce, uid }: { i: number; open: boolean; onPick: () => void; reduce: boolean; uid: string }) {
const b = books[i];
const angle = useMotionValue(open ? REST : 0);
const started = useRef(false);
useEffect(() => {
if (reduce) {
angle.set(open ? REST : 0);
return;
}
if (!started.current) {
// first paint: books that start open let their covers bob once
started.current = true;
if (!open) return;
const bob = animate(angle, [REST, REST - 30, REST], { duration: 1, delay: 0.6 + i * 0.12, ease: "easeInOut" });
return () => bob.stop();
}
const run = animate(angle, open ? REST : 0, open ? { type: "spring", stiffness: 150, damping: 12.5, mass: 1 } : { type: "spring", stiffness: 230, damping: 24 });
return () => run.stop();
}, [angle, i, open, reduce]);
const flip = useTransform(angle, (v) => `rotateX(${clamp(v, 0, 178).toFixed(2)}deg)`);
const frontShade = useTransform(angle, (v) => clamp(v / 90, 0, 1) * 0.5);
const backShade = useTransform(angle, (v) => clamp((REST - v) / 80, 0, 1) * 0.42);
const inside = useTransform(angle, (v) => (v > 88 ? "visible" : "hidden"));
const thrown = useTransform(angle, (v) => clamp((v - 96) / 70, 0, 1) * 0.62);
const lifted = useTransform(angle, (v) => Math.sin((clamp(v, 0, 180) * Math.PI) / 180) * 0.55);
const light = b.ink.toLowerCase() > "#8";
return (
{/* empty bar top the cover falls back onto */}
{/* inside the book: the back card and two combs of matches */}
{[1, 0].map((row) => (
{Array.from({ length: STICKS }, (_, k) => (
))}
))}
{/* the cover: printed outside, answer inside, hinged along its top fold */}
{bar.name}No. {i + 1}
{b.q}
AnswerNo. {i + 1}
{b.a}
{/* the folded front flap: staple, striking strip */}
);
}
export default function MatchbookFaq() {
const reduce = !!useReducedMotion();
const uid = useId();
const [open, setOpen] = useState([1, 4]);
const idle = useRef({ touched: false, paused: false, step: 0 });
// until someone touches it, the row opens the next book and shuts the oldest
useEffect(() => {
if (reduce) return;
const s = idle.current;
const t = window.setInterval(() => {
if (s.touched || s.paused || document.hidden) return;
const n = TOUR[s.step % TOUR.length];
s.step += 1;
setOpen((v) => [...v.filter((x) => x !== n).slice(-1), n]);
}, 4000);
return () => window.clearInterval(t);
}, [reduce]);
const pick = (i: number) => {
idle.current.touched = true;
setOpen((v) => (v.includes(i) ? v.filter((x) => x !== i) : [...v, i]));
};
return (