Skip to content

A stack of testimonial cards you can fling left or right; the top card rotates with drag and the next one rises to take its place.

  • Framer Motion
  • Drag
  • Gesture
  • Testimonials

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Swipe Deck Testimonials" React component.

CONCEPT: Client testimonials presented as a physical deck of index cards. Drag the top card past a threshold (120px or fast velocity) to throw it; the stack advances and loops.

LAYOUT & CONTENT:
- Cards 280x190 with alternating fills (paper, terracotta-soft #F6DCD9, cobalt-soft #DBE4FB), 1px charcoal border, quote in a serif italic, client name + role in mono.
- Show 3 cards stacked with offsets y 8px and scale 0.96 per depth.
- Prev/Next buttons beneath for keyboard and accessibility.

INTERACTIONS & MOTION:
- Top card: drag='x', rotate = useTransform(x, [-200, 200], [-14, 14]).
- onDragEnd: if |offset.x| > 120 or |velocity.x| > 600, animate x off-screen in that direction then move the card to the back of the array; otherwise spring back.
- Lower cards animate scale/y into new positions with spring stiffness 300 damping 25.

DESIGN SYSTEM (non-negotiable):
- Palette: paper background #FAF9F6, deep charcoal #121212 for text and 1px borders, ONE warm accent: cobalt #1D4ED8 or terracotta #D9534F. Secondary surface #F2EFE8.
- Typography: Swiss / editorial. A tight grotesk for UI (Instrument Sans, Inter Tight or similar) with negative tracking on display sizes; an italic serif (Instrument Serif) used sparingly for one emphasized word.
- NO dark-mode neon, NO glow, NO glassmorphism, NO backdrop blur, NO purple-to-blue gradients, NO emoji icons. Solid fills, hairline rules, honest shadows (hard offset or none).
- Motion: Framer Motion with spring physics (type: "spring", stiffness 300-500, damping 20-35). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react, 1.5px stroke.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring (2px cobalt, 3px offset), keyboard operable, aria attributes where state changes.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client".

How to use this prompt

  1. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.