Skip to content

An emerald-and-gold accordion with stepped corners and a sunburst that fans open behind each answer.

  • Framer Motion
  • Art Deco
  • Accordion
  • Luxury

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Art Deco FAQ" React component.

CONCEPT: A hotel's FAQ in the style of a 1925 lobby: symmetric gold frame, Poiret One type, and a sunburst fan that opens with each answer.

LAYOUT & CONTENT:
- Title 'Guest Enquiries' centered between two thin double rules.
- Three questions: check-in time, the rooftop bar dress code, airport transfers — with short real answers.
- Each row ends with a gold diamond that rotates into a cross when open.

INTERACTIONS & MOTION:
- Answer panel height auto spring (stiffness 220 damping 28).
- A sunburst (8 thin gold wedges) behind the answer scales from 0 to 1 from the top center, rotate -20 → 0.
- Diamond rotates 45° and turns solid gold when open.

DESIGN SYSTEM — Art Deco:
- Deep emerald #0F3B33 and antique gold #C9A15B with ivory #F3EBD8.
- Symmetry, fan and sunburst motifs, thin double rules, stepped corners.
- Type: Poiret One for display, tracked uppercase labels.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring"). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react where icons are needed.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, 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". Load any Google Font it needs with next/font/google.

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.