Motion guidelines.

Motion

Principles

What every animation on the site has to answer to.

1. 01

   Cinematic

   Each section arrives like a cut in a film. Its animation waits until the visitor is there, so they see it begin.

2. 02

   Orient, never decorate

   Motion says where something came from, what changed or where to look next. If it does none of those, it goes.

3. 03

   One feel

   Every reveal, panel and hover uses one family of ease-out curves and a short list of durations.

4. 04

   Measured, not guessed

   Blur and travel were measured from reference sites; timing is checked frame by frame in storyboards.

5. 05

   Reduced motion is a design

   Not a faster version: a still, finished one that makes sense on its own.

6. 06

   Only when seen

   Nothing animates off-screen. Backgrounds pause when they leave the view and resume when they return.

Tokens

Duration

Three durations cover the site. Press Play to compare them on the same ease.

Tokens

Easing

One family: ease-out. Things arrive quickly and settle slowly, the way a camera lands on a subject. Nothing on the site eases in, bounces or overshoots.

Text

The reveal

Headings arrive in pieces: each word (or character) fades in from a blur and a short offset, one after another. The text is real in the page first; it is only split in the browser, with one whole copy kept for screen readers.

Timing

Cinematic start

A section’s background animation starts only once the section’s top has passed 65% of the screen, never while the section above still fills the view. The visitor arrives, then the story begins.

• Applies to every section background: canvas, WebGL, SVG and film.
• The headline and text reveals are not delayed; only the background story waits.
• New backgrounds use the same rule: START_AT in the component.

Page

Scroll

Smooth scrolling gives the page its weight; the header stays on-screen throughout.

Interface

Interaction

Small, quick and always paired with a change of color or state, never movement alone.

Media

Backgrounds and film

The live backgrounds and films behind the words, from the home hero to the case studies. They are storyboarded frame by frame on the About this site page.

• Start at 65%, run only while on-screen, pause when off-screen.
• Films are muted and play inline; they wait in the dark, fade up as their section arrives and pause when it leaves. 10-bit AV1 and HEVC first, so dark gradients don’t band, then H.264 and VP9; each file’s URL carries a content stamp, so a re-cut film is never served stale. A poster frame for each.
• Endings hand off rather than cut: a film into its still, footage into a live halftone, dots into a mark.
• Vignettes are soft and shaped by the footage, never an oval.
• Legibility comes first: anything behind text is checked against the brightest frame.
• Testable: heavy canvases expose a seek hook (qaSeek(t)) that renders one exact moment, paused, for tests and storyboards.

Accessibility

Reduced motion

When a visitor’s system asks for reduced motion, every effect has a still alternative. One switch in the tokens zeroes blur, travel and stagger site-wide.

Engineering

Performance

Motion is only cinematic if it’s smooth.

• Animate transform, opacity and filter only; never layout properties per frame (the accordion’s grid-rows height is the one exception).
• will-change is set for a tween and released the moment it ends.
• Blur is capped at 42 pieces per reveal; past that, coarser pieces.
• Canvases and films stop drawing off-screen (IntersectionObserver), when the tab is hidden and while the Work overlay is open: the page under it is held, so nothing draws behind the overlay.
• Every animation that can start two ways guards itself with a flag, so it never plays twice.
• A script that rebuilds animations kills only the tweens it made, never every ScrollTrigger on the page.

Code

Tokens

The motion block of packages/tokens/tokens.css, printed from the file itself, with the reduced-motion switch.

:root {
  /* ---- Motion ---------------------------------------------------------
     Motion is tokenized exactly like color. Change the feel of every
     reveal on every site from these values. */
  --m-dur-fast:   0.25s;
  --m-dur:        0.9s;   /* the reveal itself                       */
  --m-dur-slow:   1.4s;
  --m-stagger:    0.045s; /* per word                                */
  --m-stagger-ch: 0.018s; /* per character (hero only)               */
  --m-blur:       10px;   /* measured off fantasy.co                 */
  --m-shift:      4rem;   /* measured off fantasy.co                 */
  --m-shift-y:    1.25rem;
  --m-ease:       cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out       */
  --m-ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
}
/* One switch kills the whole motion layer. Blur + translate + smooth
   scroll is a vestibular trigger stack; this is not optional. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-dur: 0.15s;
    --m-dur-slow: 0.15s;
    --m-stagger: 0s;
    --m-stagger-ch: 0s;
    --m-blur: 0px;
    --m-shift: 0px;
    --m-shift-y: 0px;
  }
}