דילוג לתוכן

טיפוגרפיה בתנועה · רטרו שנות ה־70

באנר שקיעה בסגנון שנות ה־70

באנר בסגנון שנות ה־70 עם פסי שקיעה שעולים כמו תווית תקליט ומילה עבה שמתנדנדת בקצב.

Groovy Sunset Banner

  • רטרו
  • שנות ה־70
  • טיפוגרפיה בתנועה

הפרומפט המלא

הצגת הפרומפט שמגדיר את הפריסה, התנועה ושפת העיצוב
Build a "Groovy Sunset Banner" React component.

CONCEPT: A promo banner straight off a 1974 album sleeve: rounded sunset stripes rise behind the word 'Groovy' which sways on a loop.

LAYOUT & CONTENT:
- Five concentric half-arc stripes (orange, mustard, chocolate, cream...) anchored to the bottom center.
- Word 'Groovy' in Shrikhand at ~5rem, chocolate with a cream 4px outline offset shadow; tagline 'Weekend sale: 70% far out'.

INTERACTIONS & MOTION:
- Stripes scale from 0 to 1 from the bottom with 90ms stagger, spring stiffness 120 damping 14.
- Letters sway: rotate [-6, 6] and y [0, -8] looping with per-letter delay for a wave.
- Hover the word: whole word scales 1.06 with a squash.

DESIGN SYSTEM — Retro 70s:
- Burnt orange #E2711D, mustard #F2B134, chocolate #4A2C1D, cream #F6E7CB.
- Rounded stripes and sunset arcs; soft, warm, groovy.
- Type: Shrikhand for display, DM Sans for small copy.

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.