Project
Roulette

Album Drop Page

A page built around one release, made for the day it drops.

BeginnerWeb appMedia6–14hAI-buildable 5/5no setupworth shipping

What you're making

Pick an artist, real or imagined, and build the page for their new release. Cover art that dominates the screen, a scroll that moves through the tracklist like liner notes, streaming links, tour dates. It should feel like the page a label would put up the morning an album drops, not a generic music template.

A single-release landing page: hero cover art, a tracklist that reveals as you scroll, streaming links, and tour dates if the artist tours. The whole page centres on one object, the release, the way a record sleeve does.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Cover art fills the hero and anchors the whole page's palette
  • A tracklist that reveals track by track as you scroll, not all at once
  • Streaming links to every major platform in one row
  • A tour or show date list if relevant, sorted by date
  • An audio preview on at least one track
  • The page's colours and mood are drawn from the cover art itself
  • At least one moment of real scroll-driven motion tied to the release, not a generic fade

The interesting part

  • Building a palette and type system that actually reads like it came from the cover art
  • Timing the tracklist reveal so it feels like pacing, not just a list with delays
  • Autoplay audio is blocked by every browser, so the preview needs a real play button and honest state

Once it works

  • Add lyrics that highlight in time with a preview clip
  • Add a behind-the-scenes photo strip
  • Add a pre-save action for the release

Suggested stack

reacttypescripttailwindframer-motion

Track it