# Music Festival Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A three-page website (index.html, map.html, tickets.html) for [BRAND], an invented three-day summer music festival on [EVENT_DATES] at [LOCATION]. It looks like a saturated festival poster that came alive: a hot sunset gradient and one electric accent over deep violet ink, oversized condensed type, and real outdoor photography. The home hero carries a Canvas 2D visualizer that runs on a designed idle animation until the visitor presses play, then follows real frequency data from an original loop generated by a script in this project. The site also has a poster-wall line-up with day filters and hover previews, an illustrated inline SVG site map, and a tier comparison with a price calculator and no checkout. Every act, stage, vendor and place is invented.

- Audience: People deciding whether to go to the festival and which pass to buy, on a phone as often as on a laptop; they want the line-up, the schedule, how the grounds work and the price without hunting.
- Goal: Make the visitor want to be there within one screen, then get them to the right ticket tier. The ticket call to action is visible at every scroll position on every page.
- Tone: Loud, warm, specific and a little funny, like a poster written by people who run the event. Short sentences and real logistics. Never corporate.

## Stack
- Framework: Vite 5 multi-page + vanilla TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: vite@5 (MIT), typescript@5 (Apache-2.0), [email protected] (MIT), postcss (MIT), autoprefixer (MIT), gsap@3 (core, ScrollTrigger, Flip) (GSAP Standard License, free including commercial use), lucide (ISC), @fontsource/anton (OFL-1.1), @fontsource-variable/instrument-sans (OFL-1.1), @fontsource/dm-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - package.json scripts: "gen:audio": "node scripts/make-loop.mjs"; "dev": "npm run gen:audio && vite"; "build": "npm run gen:audio && tsc --noEmit && vite build".
  - vite.config.ts: base './', build.sourcemap false, build.rollupOptions.input lists index.html, map.html and tickets.html at the project root, so all three are real files in dist/.
  - tailwind.config.ts: content covers ./*.html and ./src/**/*.ts. Extend colors with ink, raised, line, flare, tangerine, sun, volt, paper, haze and lake from Design. Extend fontFamily with display (Anton), sans (Instrument Sans Variable) and mono (DM Mono).
  - src/styles.css: import @fontsource/anton/400.css, @fontsource-variable/instrument-sans, @fontsource/dm-mono/400.css and @fontsource/dm-mono/500.css, then the Tailwind layers. Define the --sunset gradient, the marquee keyframes and font-synthesis: none here. Set overflow-x: clip on html and body.
  - File layout: src/content.ts (all copy, acts, zones, tiers, image paths and links); src/shell.ts (header, marquee, footer, mobile bar, page wipe, scroll reveals); src/pages/home.ts, src/pages/map.ts, src/pages/tickets.ts; src/audio/engine.ts (AudioContext, loop, master gain, ducking); src/audio/visualizer.ts (hero canvas); src/audio/previews.ts (act snippets); scripts/make-loop.mjs. TypeScript strict mode is on.
  - scripts/make-loop.mjs uses only Node built-ins and writes public/audio/loop.wav: 44,100 Hz, 16-bit PCM, mono, 124 BPM, 8 bars of 4/4 (length = round(32 * 60 / 124 * 44100) samples, about 1.4 MB). Mix into a circular buffer so every tail wraps past the end and the loop is seamless.
  - Loop voices. Roots per bar: A2, F2, C3, G2, A2, F2, D2, E2. Kick on every beat: sine sweeping 130 to 48 Hz over 90 ms, exponential decay 240 ms, gain 0.95. Clap on beats 2 and 4: seeded white noise, band-limited as the difference of two one-pole filters, decay 120 ms, gain 0.35. Hat on off-beat eighths: high-passed seeded noise, decay 35 ms, gain 0.16. Bass in eighths on the bar root: sawtooth through a 420 Hz one-pole low-pass, gain 0.42. Pad: three sawtooths detuned by -7, 0 and +7 cents on the bar's minor or major triad through a 1,200 Hz low-pass, total gain 0.12, 300 ms attack. Pluck on a sixteenth grid: seeded mulberry32(7017), 62% chance per step, picks a note from A minor pentatonic between 220 and 880 Hz, triangle wave, exponential decay 180 ms, gain 0.22.
  - Loop mix: multiply every non-kick voice by a sidechain of 0.55 + 0.45 * (1 - exp(-secondsSinceKick / 0.12)), pass the sum through tanh(1.2x), then normalize the peak to 0.89.
  - src/audio/engine.ts: create the AudioContext only inside a user gesture. Fetch import.meta.env.BASE_URL + 'audio/loop.wav', decodeAudioData, and play with an AudioBufferSourceNode with loop = true. Graph: source -> loopGain -> analyser -> masterGain -> destination. AnalyserNode: fftSize 2048, smoothingTimeConstant 0.78. Pause stops the source and stores the offset; resume makes a new source at that offset. Mute sets masterGain only, so the visuals keep moving. If the fetch or decode fails, show the inline note 'Audio could not load. The visuals keep running.' and log nothing to the console as an error.
  - src/audio/previews.ts: each act gets a 16-step snippet from mulberry32(actIndex + 1). Notes come from minor pentatonic offsets [0,3,5,7,10,12] on a root between 110 and 220 Hz; wave type cycles sawtooth, square, triangle by act index; step length is 125 to 190 ms, chosen by the seeded generator. Each note runs through a low-pass at 1,800 Hz, Q 6, with a short gain envelope, then a preview analyser (fftSize 512) into masterGain. While a snippet plays, duck loopGain to 0.18 over 150 ms and restore it afterward. Stop with a 120 ms fade on pointer leave.
  - Reference images from code as import.meta.env.BASE_URL + 'images/<file>' and in HTML as ./images/<file>. Add public/favicon.svg: a half sun in the sunset gradient on ink. Set the title of each page to a plain <title> containing [BRAND].
  - Write ASSETS.md at the project root listing every image with path, source URL, author and license, every font and icon package with its license, and public/audio/loop.wav as 'original, generated by scripts/make-loop.mjs in this project'.

## Variables
- [BRAND] — Festival name (default: "Sunspill"). Invented, one or two words. It fills the hero headline at full width, so the headline is sized by script to fit.
- [EVENT_DATES] — Festival dates (default: "July 16–18, 2027"). Three consecutive days. The day tabs and schedule labels (Fri Jul 16, Sat Jul 17, Sun Jul 18) are derived from it.
- [LOCATION] — Site and town (default: "Cinder Meadows, Port Alder, WA"). An invented place. Map labels such as the lake name follow it.
- [LINEUP_GENRES] — Genres on the bill (default: "indie, disco and warm electronics"). Rewrite the invented act names and genre labels to fit. Never use real artists.
- [GA_PRICE] — 3-Day General pass price (default: "$189"). Sets the currency symbol and the other prices: Day Pass about 42%, Camp Weekend about 142%, Golden Hour VIP about 238%, each rounded to the nearest number ending in 9.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/music-festival-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.