Skip to content

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. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.