static · cinematic day-to-night scroll

PHOEBE

A band's press kit where the scroll itself moves from day into night.

status live · own domainrole designed + built end to end
recorded walkthroughlive →
The day-to-night scroll, recorded end to end.
1 scrollday to night in one continuous transition, no page cuts.
own domainshipped to phoebemusic.com, not a subdomain.
staticno CMS, no JS framework, cheap to keep live.
phone-firstthe transition holds smooth on mid-range mobile.
What it solves

An electronic press kit is where a band gets reduced to a PDF: bio, photos, links, all flattened into a document nobody feels anything about. The design problem was to make the format carry the band's mood, so a booker or journalist scrolling it comes away with an impression, not just an asset pack. The page had to read as authored while staying a fast, static site a band can afford to keep online.

The constraint

Static hosting on Cloudflare Pages, their own domain, and a hard requirement that it stay smooth on a mid-range phone. That ruled out heavy libraries and video-backed hero tricks. The whole atmosphere had to come from CSS and a scroll-driven transition light enough to run anywhere.

Who it serves

An indie band that needed a press kit with a point of view.

Who it is for

Art direction and motion design carried by a single scroll-driven page.

How it works
  1. One scroll, day to nightThe whole page transitions from daylight to night as you move down it.
  2. On their own domainShipped to phoebemusic.com, not a subdomain.
The decision that was not obvious

Let the scroll be the content, not a container for it. The day-to-night shift is not a decorative background, it is the EPK's argument: this band lives in that transition between afternoon and midnight. Palette, light, and type contrast are all tied to scroll position, so moving down the page performs the band's arc instead of just revealing more text. The medium does the pitching.

What I would change if I rebuilt it today

Everything is one long document, which is right for the scroll but means a booker who only wants the tech rider has to travel the whole arc to reach it. I would add a quiet jump-to affordance that skips to the practical sections without breaking the cinematic default, so the mood is the first experience but not a toll on repeat visits.

Built with
HTML/CSS/JS Cloudflare Pages scroll-driven transition