Rejouice — loading0

Case study

A long-form project page: context, process, and results, paced by full-bleed media and a colour inversion at the halfway mark.

Sections, in page order

  1. 01

    Long page; readers need to know how much is left.

  2. 02

    The project's claim, not its name.

  3. 03

    Client, year, and discipline as tracked metadata.

  4. 04

    Editorial imagery with depth, without whitespace gaps at the viewport edges.

  5. 05

    The bulk of the page.

  6. 06

    Marks the shift from context into results.

  7. 07

    Three to five process steps, each given the full viewport in turn.

  8. 08

    The outcome, as numbers.

  9. 09

    Supporting imagery that rewards browsing without demanding it.

Build order

  1. 01

    Write and place the content first. This page type fails when motion is designed before the narrative exists.

  2. 02

    Establish the inversion boundary early — every colour must be a token before the flip works.

  3. 03

    Build the sticky panel stack before the parallax; sticky breaks if any ancestor gains an overflow clip later.

  4. 04

    Add the progress rule last, once the page's real height is settled.

Acceptance checks

  • Contrast passes in both the light and inverted themes, including focus rings and media scrims.
  • No ancestor of a sticky panel has overflow: hidden, clip, or auto.
  • Every sticky panel's content fits within 100svh at 768px wide.
  • Images have width and height attributes; Cumulative Layout Shift is under 0.1.
  • The drag gallery scrolls with keyboard arrows and with JavaScript disabled.