Skip to content

Bento Feature Grids · Warm Editorial

Expanding Bento Grid

A four-tile bento where clicking any tile expands it to dominate the grid using shared layout animation; the others reflow with springs.

  • Framer Motion
  • Layout Animation
  • Bento
  • Swiss

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Expanding Bento Grid" React component.

CONCEPT: A feature bento grid where one tile is always 'open'. Clicking another tile makes it the open one; every tile animates to its new size and position with layout springs.

LAYOUT & CONTENT:
- Four features: 'Spring physics', 'Swiss type', 'Hairline grid', 'One accent'. Each tile shows a mono index, a title, and (only when open) a one-sentence description.
- Open tile spans 2 columns and 2 rows; others are 1x1 on a 3x2 grid. Cream tiles with 1px charcoal borders; the open tile fills cobalt with cream text.

INTERACTIONS & MOTION:
- Use the layout prop on each tile with transition { type: 'spring', stiffness: 350, damping: 32 }.
- Description fades in with AnimatePresence after a 120ms delay; inner text uses layout='position' to avoid stretching.
- Tiles are <button> elements with aria-expanded.

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.