Music Festival Template

What's Included

Code snippet omitted: it ships with the download.

Quick Start

1. Open index.html in a browser. GSAP, ScrollTrigger, Lenis, and the fonts load from CDN.

2. Replace the festival content:

• Change the name, dates, location, prices, artist names, set times, and stages in index.html
• Add or remove rows inside each [data-lineup-panel] and [data-schedule-panel]
• Replace the bundled placeholder photography in assets/img/ with your own event images (see Photography)
• Edit the palette custom properties near the top of assets/style.css
• Change the event date used by the countdown near the top of assets/script.js

3. Deploy. The template is static and works on Netlify, Vercel, GitHub Pages, or a plain server.

Optional: minify before you go live

assets/script.js is the readable source and is what index.html loads. It is around 14KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:

Code snippet omitted: it ships with the download.

Then point the last <script> tag in index.html at assets/script.min.js. Keep script.js as the file you edit and re-run the command after each change.

Colour System

Property	Purpose
--ink	Charcoal text and dark grounds
--paper	Main cream paper
--paper-deep	Secondary paper sections
--accent	Restrained oxblood campaign accent
--stone	Neutral selected states and secondary sections
--night	Charcoal timetable and partner sections

Lineup Tabs

The lineup opens in a full-weekend view. Friday, Saturday, and Sunday buttons filter the page to one day; Reset returns to the full weekend.

Code snippet omitted: it ships with the download.

Tabs update aria-selected, roving tabindex, and the native hidden attribute. Left and right arrow keys move between tabs.

Nightly Timetable

[data-timetable] contains exactly one visible schedule panel. Day tabs switch between Friday, Saturday, and Sunday; Reset always returns to Friday. There is no drag state or card stack to become unsynchronised.

Code snippet omitted: it ships with the download.

Record Controls

The turntable is pure CSS. Only [data-record-disc] rotates; the plinth and tonearm remain fixed.

• [data-record-toggle] pauses or resumes the disc using animation-play-state
• [data-record-speed] switches between the 33 and 45 RPM visual speeds
• Both controls expose their state through aria-pressed

Venue Gallery

The venue gallery uses one large image and four explicit image choices. Each [data-gallery-choice] supplies the large source, accessible alt text, title, and caption through data attributes.

Code snippet omitted: it ships with the download.

Clicking or focusing a choice updates the main image, caption, counter, and aria-pressed state. Reduced motion changes the content immediately without a crossfade.

Partner Logos

The #partners section provides two large presenting-partner slots and six standard festival-partner slots. Placeholder wordmarks can be replaced by images without changing the layout.

Code snippet omitted: it ships with the download.

Standard logo images are capped at 240px × 72px; presenting logos can use up to 360px × 110px. The default rule converts marks to white for consistent treatment on the charcoal ground. Remove the filter declaration from .partner-logo img when original brand colours are contractually required.

Photography

All placeholder photography ships bundled in assets/img/ as optimised WebP derivatives. Nothing is hotlinked, so the template keeps working offline, behind a firewall, and after any third party reorganises their CDN. Total image weight is about 436 KB across nine files.

The art direction is baked into the pixels rather than applied with a CSS filter: the hero is graded near-monochrome to sit under the poster type, and the venue photographs keep their natural colour with a light desaturation and warm shift so real venue images stay recognisable. Because the grade is baked, there is no filter declaration to fight when you drop your own pictures in.

Files

File	Used by	Size
img/hero.webp	.hero::before in assets/style.css (1920px)	full-bleed
img/venue-01-turbine-hall.webp … venue-04-lights-up.webp	gallery main image, data-src in index.html (1600×1000)	full size
img/venue-0*-thumb.webp	gallery choice buttons (400×260)	thumbnail

Swapping a photograph

Two ways, depending on whether you want the house grade applied.

1. Drop your own file in (simplest). Replace the matching file in assets/img/ keeping the same filename and roughly the same aspect ratio (16:10 for the venue images). Nothing else needs editing. Grade the image yourself first if you want it to match the rest of the set.

2. Re-bake from a source URL. Edit src for that entry in assets/img-manifest.json, then regenerate:

Code snippet omitted: it ships with the download.

The manifest records the source, output name, dimensions, WebP quality and the grade for every image. brightness is set per image rather than globally, because the sources differ in exposure and matching perceived brightness is what makes the set read as one campaign. The Boiler Room frame is a genuinely dark, low-lit room and runs at 1.3 against roughly 0.94–1.06 for its neighbours.

Every photograph also has a background-color fallback beneath it, so a missing or still-loading file shows the charcoal ground rather than a white hole.

Credits

Placeholder photographs are royalty-free images from Unsplash, used here as altered, art-directed derivatives. Replace them with your own event photography before launch.

Motion

• Hero title lines rise into place on load
• Supporting hero content follows with a short stagger
• Sections reveal once with small opacity and vertical movement
• The artist ticker moves continuously unless reduced motion is requested
• No pinned sections, scroll hijacking, dragging, or rotating player wrapper

Accessibility

• Semantic tabs use role="tab", aria-selected, roving tabindex, and arrow-key navigation
• Record controls and gallery choices are real buttons with announced state
• prefers-reduced-motion: reduce removes continuous and entrance motion
• Without JavaScript, every lineup day and timetable remains present in the document
• Gallery image alt text changes with the selected venue

Dependencies

• GSAP 3 core and ScrollTrigger
• Lenis smooth scroll, optional
• Google Fonts: Anton, Archivo, IBM Plex Mono