Deck FAQ

Written for the variant you picked above: Paper

Build an FAQ played as a deck of cards. Props: title, cards [{id, topic, q, a}], support {label, href}, onNavigate, theme and className. Deck (pure functions): a queue of card ids plus lists of helpful and unclear ones; judging the top card helpful or unclear moves it to that list, and skipping moves it to the back (unless it's the last); a drag counts once it passes 110px either way — right is helpful, left is unclear. Layout: a 520px panel — the title and "3 of 6 answered" with a thin progress bar in the helpful colour. The table shows the top three cards stacked, each one further back 15px lower and 5% smaller, the third faded. A card has two faces in 3D (preserve-3d, backface hidden): the front on the card colour with a topic chip, the question in a large serif and "Tap to turn over"; the back in a dark ink colour with the answer. Clicking or tapping the card, Space or Enter turns it over (rotateY 180°, 520ms). The top card is focusable (a group named "Question 2 of 6: … Press Space to see the answer", including the answer once turned). Dragging it (pointer capture) moves it with the pointer, rotated by x/18, and fades in a tilted "Helpful" stamp on the right or "Not quite" on the left as it leans; letting go past the threshold throws it off that side (translate 140%, rotated 18°, 360ms), otherwise it springs back. → and ← do the same, ↓ skips (the card drops away and goes to the back). Buttons under the deck: Not quite, Answer/Question (aria-pressed), Skip (disabled with one card left) and Helpful. A polite live region says what happened. When the deck is empty, a closing card says that's everything, lists any questions that didn't help with a link to support, and offers Start over. Reduced motion skips the throws and the turn. Two themes, paper and night. Selected variant — Paper (paper): Palette for this theme (Paper): --df-accent #1f2a44; --df-back #1f2a44; --df-back-ink #f3f5fb; --df-bg #f4f1ea; --df-card #fffdf8; --df-ink #1d1b17; --df-line rgba(29, 27, 23, 0.12); --df-muted #625d54; --df-no #b5452a; --df-yes #1a7a4c. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "paper". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Turn the top card over, then drag it right if it helped or left if it didn't; or use Space, the arrow keys or the buttons. Skip sends it to the back. Motion: Cards turn in 520ms and are thrown off in 360ms; the stack shuffles up in 340ms. Reduced motion changes instantly. Accessibility: The top card is a focusable, labelled group with keyboard controls, every action also has a real button, results are announced politely, and the cards behind are hidden from assistive tech. Responsive behavior: Up to 520px wide; on phones the buttons wrap into two rows and the cards get a little taller. Touch: Swipe the card left or right, tap to turn it, or use the buttons. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Turn the top card over, then drag it right if it helped or left if it didn't; or use Space, the arrow keys or the buttons. Skip sends it to the back.

Motion

Cards turn in 520ms and are thrown off in 360ms; the stack shuffles up in 340ms. Reduced motion changes instantly.

Accessibility

The top card is a focusable, labelled group with keyboard controls, every action also has a real button, results are announced politely, and the cards behind are hidden from assistive tech.

Responsive

Up to 520px wide; on phones the buttons wrap into two rows and the cards get a little taller.

On touch

Swipe the card left or right, tap to turn it, or use the buttons.