כפתור START בסגנון ארקייד
מסך פתיחה בסגנון 8 ביט עם הודעה מהבהבת, כפתור פיקסלים שנלחץ בדיוק ארבעה פיקסלים ומונה מטבעות.
Pixel Arcade Start Button
- פיקסל ארט
- ארקייד
- רטרו
הפרומפט המלא
הצגת הפרומפט שמגדיר את הפריסה, התנועה ושפת העיצוב
Build a "Pixel Arcade Start Button" React component.
CONCEPT: A game-start screen where the primary button behaves like an arcade cabinet button: hard pixel shadow, a one-step press, and a coin counter.
LAYOUT & CONTENT:
- Title 'VAULT QUEST' in two pixel colors with a stepped drop shadow.
- Blinking 'PRESS START' text; button 'INSERT COIN' red with 4px pixel shadow; 'CREDITS 00' counter top-right.
INTERACTIONS & MOTION:
- Blink with steps: opacity [1,1,0,0] repeat at 1s, ease 'linear' discrete.
- Button press moves exactly 4px down-right and removes the shadow (no squish — pixels don't squish).
- Each press increments credits with a quick y bounce on the number.
DESIGN SYSTEM — 8-bit Arcade:
- Arcade black #111 screen, pixel palette: red #FF004D, yellow #FFEC27, green #00E436, blue #29ADFF, white.
- Square pixels only: no radius, stepped (steps()) easing allowed for blinks.
- Type: Press Start 2P.
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.איך משתמשים בפרומפט
- 1. מעתיקיםלחיצה על „העתקת הפרומפט” מעתיקה את כל ההנחיות: פריסה, תנועה וכללי עיצוב.
- 2. מדביקים ב-Claudeכדאי להוסיף בתחילת הפרומפט את שם העסק, הטקסטים והצבעים שלך.
- 3. משלבים באתרמתקבל קובץ React אחד. צריך להתקין את framer-motion ואת lucide-react.