דילוג לתוכן

כפתורים · ארקייד 8 ביט

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