Backstage Pass

Music-festival platform — kinetic lineup + gradient washes + countdown.

Live demo  ·  Build notes  ·  More templates

Use this template — copy the source into a new project:

npx degit bswxyz/backstage-pass my-app

A music-festival platform — lineup, day-by-stage schedule, live countdown to gates, and tiered passes — with no photography at all: kinetic typography and drifting sunset gradients are the entire visual system. Part of the Parable 25 design showcase.

---

The concept

Backstage Pass is a three-day, three-stage festival in the Nevada high desert (Aug 21–23, 2026, Solstice Flats). Festival posters have always been a typography genre — the headliner huge, the supports cascading beneath, the fine print in mono — so the site treats the lineup as the artwork and keeps everything else strictly useful: a real countdown to gates-open, a keyboard-accessible day-tab × stage-column timetable, three honest pass tiers (one selling fast), and a plain-spoken "know before you go" band. Euphoria lives in the display type; facts live in the mono.

Patterns came from studying shipped event products on Mobbin — DICE's poster-first lineup hierarchy and persistent price bar, Booking.com-style day chips, Coffee Meets Bagel's badged tier card, Shazam/Apple Store's plain add-to-calendar affordances (see _research/backstage-pass.md in the showcase plan repo).

Design system

• Palette (sunset on plum): --bg:#14060f deep plum-black · --ink:#fff4fa · --dim:#c9a9bd · --faint:#8a6c80 · --magenta:#ff3d8e · --orange:#ff8a3d · --violet:#8b5cf6 · --line:rgba(255,244,250,.12). The three accents never appear alone as flat fills — they blend in one shared gradient (--grad, magenta → orange → violet) used for headliner text, the primary button, the active day tab and the hot tier's border.
• Type: Unbounded (wide, rounded festival display — the poster voice) · Manrope (body) · IBM Plex Mono (set times, stages, countdown digits, eyebrows). One face for hype, one for reading, one for facts.
• Signature motion: a fast-out, soft-settle ease with a whisper of overshoot — cubic-bezier(.16,1.08,.3,1) — used for the per-letter hero intro, the lineup cascade and every hover lift. Three GPU-cheap gradient washes drift behind everything on 26–38s loops.
• Why it fits: a festival sells a feeling of light — golden hour, stage wash, afterglow. Type filled with moving sunset gradient over near-black gives that feeling without a single photo, and it stays fast on festival-grounds phone connections.

Stack

• Plain HTML / CSS / vanilla JS. No framework, no build step, no images.
• GSAP 3.12 + ScrollTrigger (CDN, deferred) — per-letter hero cascade, scroll-triggered lineup stagger, slow scrub-drift on headliner names, timetable panel transitions. Everything has a CSS/IntersectionObserver fallback if the CDN fails.
• CSS keyframes for the gradient washes, gradient-shift text fill, marquee ribbon and countdown pulse — transform/background-position only, cheap to composite.
• Chosen because the visuals are literally text and gradients; a framework would add weight to a page whose heaviest asset is a font file.

Running it locally

No install. Any static server works because all paths are relative:

git clone https://github.com/bswxyz/backstage-pass
cd backstage-pass
python3 -m http.server 8000      # or: npx serve .
# open http://localhost:8000

There is nothing to build. Edit index.html / styles.css / main.js and refresh.

Structure

index.html          the page (semantic sections; .js gate for progressive enhancement)
styles.css          all styling — design tokens live in :root at the very top
main.js             countdown, day tabs, kinetic type cascade, reveals
guide/index.html    the "how it was built" write-up (self-contained, styled to match)
.nojekyll           tells GitHub Pages to serve files as-is

Design tokens: styles.css :root. The countdown target and tab logic live in main.js (GATES constant and the tablist block). The full lineup and timetable are plain HTML in index.html, so the schedule is readable — all three days stacked — even with JavaScript off.

Demo vs. real — what a production version would need

This is an intentionally-scoped demo. What's fictional/static today:

• The festival, artists and venue are invented. All 24 acts, set times, and Solstice Flats itself are fiction written for this design.
• No ticketing or payments. The pass buttons don't sell anything. A real version needs inventory, checkout (Stripe or a ticketing partner like DICE/Tixr), order emails, wallet passes and refund/transfer flows.
• "Selling fast · 72% claimed" is hardcoded. Real urgency states must come from live inventory, or they're a dark pattern.
• The lineup and schedule are hand-written HTML. A real festival needs a CMS or structured data source (artists, stages, slots) with conflict validation, plus publishing workflow for the inevitable set-time changes.
• No accounts, favorites, or notifications. Real festival apps let you star artists and get set-time alerts; that needs auth and push infrastructure.
• The countdown target is a constant in main.js — fine for one event, but a platform would drive it (and the timetable's timezone handling) from event data.

What's real and reusable as-is: the live countdown (with its accessibility model), the keyboard-accessible tabbed timetable, the data-URI .ics add-to-calendar link, the cascade/reveal system with reduced-motion and no-JS fallbacks, and the whole gradient-wash visual system.

License

MIT. Design & build by Parable. No photographic assets — all visuals are CSS gradients and type.