Rejouice — loading0

Studio landing page

The canonical single-page studio or agency site: one enormous claim, selected work, a short position, and a contact close.

Sections, in page order

  1. 01

    Covers font and hero-image load so the first thing seen is the finished hero, not a reflow.

  2. 02

    Keeps wayfinding available without spending the hero's vertical budget.

  3. 03

    One sentence at display scale. This is the entire first screen.

  4. 04

    The hero's entrance. Used once, so it stays an event.

  5. 05

    Dense enough to show the whole body of work, quiet enough not to compete with the hero.

  6. 06

    Resets rhythm between the work index and the written position.

  7. 07

    The only long text on the page; measure-locked so it stays readable at any width.

  8. 08

    Three numbers, counted once, to make the claim concrete.

  9. 09

    A footer band that gives the end of the page a physical, still-moving quality.

  10. 10

    The single action on the page, made unmissable by being the only thing that moves toward you.

Build order

  1. 01

    Set up tokens and the type scale first — every later pattern reads from them.

  2. 02

    Build the grid and the static page: hero, index, prose, stats, footer, with no motion at all.

  3. 03

    Verify the static page passes contrast, keyboard, and Lighthouse before adding a single transition.

  4. 04

    Layer motion in order of importance: hero reveal, then index hover, then stat count, then the marquee.

  5. 05

    Add the preloader last — it is the only pattern that can hide a broken page, so it must be built on a page you already know is correct.

  6. 06

    Re-run the accessibility pass with prefers-reduced-motion forced on.

Acceptance checks

  • The page is fully readable and navigable with JavaScript disabled.
  • With prefers-reduced-motion: reduce, no element is left translated, faded, or hidden.
  • Exactly one h1; heading levels descend without skipping.
  • Largest Contentful Paint element is the hero statement, and it renders before any animation begins.
  • Every interactive element has a visible focus ring at 3:1 contrast against its background.
  • No hard-coded colour literals outside the token block.
  • Total animated-element count on first screen is at most two.