דילוג לתוכן

גרידי בנטו · מגזיני חם

גריד בנטו שמתרחב

גריד בנטו שבו לחיצה על אריח מגדילה אותו, והאריחים האחרים מסתדרים מחדש באנימציית layout.

Expanding Bento Grid

  • אנימציית פריסה
  • בנטו
  • שוויצרי

הפרומפט המלא

הצגת הפרומפט שמגדיר את הפריסה, התנועה ושפת העיצוב
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".

איך משתמשים בפרומפט

  1. 1. מעתיקיםלחיצה על „העתקת הפרומפט” מעתיקה את כל ההנחיות: פריסה, תנועה וכללי עיצוב.
  2. 2. מדביקים ב-Claudeכדאי להוסיף בתחילת הפרומפט את שם העסק, הטקסטים והצבעים שלך.
  3. 3. משלבים באתרמתקבל קובץ React אחד. צריך להתקין את framer-motion ואת lucide-react.

לפי סוג ולפי סגנון