Music Festival Template
An editorial three-day festival site with an interactive vinyl hero, accessible lineup filters, dependable nightly timetables, selectable venue gallery, sponsor logo system, tickets, and practical information.
About This Template
A production-ready one-page site for festivals, club nights, outdoor programmes, and cultural weekends, designed with a monochrome editorial system and one restrained oxblood accent rather than a futuristic interface. The oversized hero title sits above a CSS-drawn turntable whose vinyl can be paused or switched between 33 and 45 RPM while the player itself remains fixed.
Read the full template overview
Friday, Saturday, and Sunday lineup tabs keep artists, times, and stages easy to scan; the timetable displays one stable night at a time; the venue gallery uses a clear main image with accessible choices; and a dedicated sponsor band provides correctly scaled partner-logo space.
Swap the placeholder artists, dates, prices, logos, and photography for your own event and deploy anywhere as static files.
What's Included
- Complete deployable three-day festival site with countdown, hero, lineup, set times, venue gallery, tickets, info, and footer
- CSS-drawn turntable with semantic pause/play and 33/45 RPM controls; only the record disc rotates
- Accessible Friday, Saturday, Sunday, and full-weekend lineup filters with arrow-key tab navigation
- One stable timetable per night with clear tab selection and a reset-to-Friday control
- Selectable venue gallery with one large image, visible thumbnail choices, descriptive captions, and keyboard focus support
- Dedicated presenting-partner and festival-partner logo grids with generous clear space and image sizing rules
- Gentle GSAP entrance and scroll reveals that favour poster movement over digital effects
- Bundled placeholder photography as optimised WebP files with the grade baked in: a near-monochrome hero against full-colour venue frames, plus background-colour fallbacks
- Editorial art direction using mineral grey, off-white, charcoal, restrained oxblood, monochrome photography, and subtle grain
- Lenis smooth scrolling wired in and fully optional
- Accessible reduced-motion and no-JavaScript fallbacks keep event information readable
Perfect For
- Festival and club night sites that need to sell tickets
- Gig, tour date, and album launch pages
- Conference and community event one-pagers with a bolder personality
- Product or venue launch parties
- Learning how GSAP Vault interaction effects compose into a full page
How It Works
Structure
The template initialises inside one gsap.context and uses gsap.matchMedia to separate motion from the reduced-motion state.
Tabs, records and gallery
Semantic buttons drive the lineup and timetable tabs by updating aria-selected, tabindex, hidden panels, and a short GSAP opacity/translate reveal. Record controls toggle CSS classes that affect animation-play-state and duration on the vinyl disc only. Gallery buttons update the main image, alt text, title, copy, counter, and aria-pressed state with a brief crossfade.
Scroll reveals
ScrollTrigger is limited to gentle one-time content reveals and the navigation progress line.
Questions about this template
Can I run it for a one-day event instead of three?
Yes. The lineup filters and the set-time tables are built one night per block, so deleting Saturday and Sunday leaves a working single-day site. If you drop to one day, remove the filter row entirely rather than leaving a single button, since a filter with one option looks broken.
How do I put my own lineup and set times in?
Both are plain HTML lists in index.html, not data files or a CMS. Artist names, stages and times are text you edit directly, and the filters read the day off a data attribute on each entry. Adding an artist is copying one list item and changing the words.
Does it sell tickets?
No. The tickets section is a designed pricing block with buttons that go nowhere by default. Point them at Skiddle, Dice, Eventbrite or whatever you already sell through; the template deliberately does not try to be a payment system.
The photography is monochrome. Do my photos have to be?
No, but the art direction leans on it. The hero ships near-monochrome against full-colour venue frames, and that contrast is the idea. If you drop full-colour shots into the hero it still works, it just becomes a more ordinary festival site. Match the grade or change it deliberately, do not mix by accident.
Will it still make sense the week after the festival?
Partly. The countdown finishes and stops, which is correct, but you should swap the hero copy and tickets block for a thank-you and next-year signup yourself. Nothing switches over automatically, because a static template has no date logic beyond the countdown.
