Dynamic Accordions · Japanese Minimal
Washi Vertical Tabs
A Japanese-minimal accordion of tall vertical-text columns; opening one unrolls it like a scroll and stamps a vermilion seal.
- Framer Motion
- Japanese
- Vertical Text
- Accordion
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "Washi Vertical Tabs" React component.
CONCEPT: A tea house menu as an accordion of vertical columns written top-to-bottom. The open column widens to show the description.
LAYOUT & CONTENT:
- Four columns: 煎茶 Sencha, 抹茶 Matcha, 焙じ茶 Hojicha, 玄米茶 Genmaicha; collapsed shows only the vertical kanji.
- Open column: kanji, romaji name, one-line description, price ¥680-style, and a small vermilion square seal.
INTERACTIONS & MOTION:
- Width animates via flexGrow 1 → 4 with spring stiffness 180 damping 26 (calm).
- Seal stamps in: scale 1.6 → 1, rotate -12 → -4, opacity 0 → 1.
- Text fades in 150ms after the column opens.
DESIGN SYSTEM — Japanese Minimal:
- Washi off-white #F4F0E6, sumi ink #1B1B1B, one vermilion #C8372D seal.
- Asymmetry, generous negative space, vertical writing where it helps.
- Type: Noto Serif JP for Japanese, Shippori-like serif feel for Latin.
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. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
- 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
- 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.