Full Website Designs · Retro 70s
Sunwave Festival Website
A retro 70s desert festival site: sunset arcs where moving the pointer sets the sun and warms the sky, a centred lineup poster whose names pop a sticker with their set time, schedule tabs, ticket tiers with a sold-out stamp and a camping map.
- Full Site
- Events
- Music
- Retro
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "Sunwave Festival Website" React component.
CONCEPT: The website of a three-day desert music festival with a 1970s soul. It sells tickets and shows the lineup like a vintage poster.
LAYOUT & CONTENT:
- Nav: logo 'Sunwave' in Shrikhand, links Lineup / Schedule / Tickets / Camping, a 'Get tickets' pill.
- Hero: concentric sunset arcs rising behind 'Sunwave '26', dates 'Aug 14-16, Mitzpe Ramon crater, 2026', a big mustard sun behind the arcs and a small 'Move to set the sun' pill.
- Lineup poster: headliners big, then smaller rows, in alternating colors, centered like a poster.
- Schedule: tabs Fri / Sat / Sun switching a list of set times on three stages.
- Tickets: three tiers (Day pass, Weekend, Weekend + Camping) with prices and sold-out state on the first.
- Camping: a stylized map block made of shapes with labels (Stage, Camp, Pool, Food).
- Footer: wavy top edge, socials, newsletter.
INTERACTIONS & MOTION:
- Sunset arcs rise from scaleY 0.2 with a springy stagger on load; the logo letters sway gently.
- Pointer Y over the hero moves the sun (spring stiffness 60, damping 18) so it can set behind the arcs, and the sky colour shifts from sand #F6E7CB to dusk #F3B98A.
- Lineup names are buttons: hover or focus pops a tilted mustard sticker with the artist's day, time and stage (spring 500/20).
- Schedule tab change crossfades the list with a slide.
- Ticket cards lift 8px and tilt -1° on a spring; the sold-out card has a rotated 'SOLD OUT' stamp.
DESIGN SYSTEM — Retro 70s:
- Cream #F6E7CB, burnt orange #E2711D, mustard #F2B134, chocolate #4A2C1D, teal #2A7F7A.
- Rounded sunset stripes, wavy dividers, pill shapes; warm and loose.
- Shrikhand for display, DM Sans bold for UI.
CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.
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.How to use this prompt
- 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
- 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
- 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.