# Gritmind - Video & Motion

> This is the visual motion language. The production process (brief, beat grid,
> formats and safe zones, sound, licensing, review) is in
> `guidelines/production/video.md`.

The motion language comes from the website's canvas work, where it already
carries meaning: **noise resolving into signal**. Reuse that idea rather than
inventing new transitions.

## Timing

Derived from the site, scaled for screen viewing distance.

| Beat | Duration |
|---|---|
| UI-scale hover / state change | 180ms |
| Element enter (fade + 14px rise) | 250–300ms |
| Title card in | 600ms |
| Noise → signal resolve | 1.2–1.6s |
| Section transition | 400ms |
| Hold on a stat before moving | 2.5s minimum |

Easing:
- General: `cubic-bezier(.16,1,.3,1)` - fast out, long settle
- Overlays: `cubic-bezier(.34,1.3,.5,1)`
- Logo only: `cubic-bezier(.34,1.56,.64,1)` (the arch spring)

Never linear except for continuous loops (marquees, tickers, rotations).

**Social loops** (under 10s, autoplaying muted in a feed) build faster: text
lines rise through masks in 300ms each with a 70ms stagger, the finished card
holds about 3s, and the logo holds only 0.2 to 0.3s either side of the loop
point. The homepage signal lines may run behind them as a held background.
Full rules: "Social loops" in `guidelines/production/video.md`.

The formal logo animation is its own fixed piece, with timing from the After
Effects master: use `assets/graphics/gritmind-logo-animation.js` (0.6s) as built,
and do not retime it or apply these rules to it. Why: it is part of the mark.

## The signature move

The house transition, in three beats:

1. Multiple grey wandering lines, all equally weighted - noise, ~1s
2. One line resolves left-to-right: its jitter flattens and its colour crosses
   from `--ink` to `--signal` over 1.2–1.6s, with a soft glow
   (`shadowBlur: 16` at 55%) arriving with the colour
3. The others drop to ~18% opacity. The resolved line holds.

Use it for opens and for the moment a video states its actual point. Once per
piece - twice makes it a motif instead of a revelation.

## Titles & lower-thirds

**Title card** - off-white or `#20243a` ground. Eyebrow in mono uppercase with
the accent dot, animating in first. Headline in Alliance No.2 500, one accented
word, rising 14px with a fade over 600ms. A 2px accent rule draws left-to-right
under it over 400ms.

**Lower-third** - bottom-left, `120px` from edges. Name in sans 600 at 36px,
role in mono at 20px in `--muted`. A 3px accent bar wipes in vertically at the
left edge over 300ms, then the text slides right from behind it. Hold 4s, exit
by reversing at 0.7× duration.

**Stat reveal** - mono figure counting up over 800ms with `ease-out`, label
fading in at 400ms. Round to the same precision the deck and site use.

## Grading & framing

- Screen recordings: keep them true to the product; no fake cursors, no
  speed-ramping past the part that is actually slow. If it is slow, say so.
- Backgrounds are `#fafafa` or `#20243a` - never pure white or pure black.
- Safe margins: `120px` at 1080p; assume the bottom `180px` may be covered by
  platform chrome.
- Captions in Alliance No.2 500 at 42px, off-white on a
  `rgba(19,25,56,.72)` plate with 12px radius.

## Sound

If there is music, it sits under `-18 LUFS` and drops another 6dB under
narration. No stock corporate-uplift beds. Silence is on-brand; filler is not.

## Accessibility

- Burn in or ship captions for every piece with speech
- No flashing above 3Hz
- When a video is used as an autoplaying page loop, provide a reduced-motion
  alternative: a still frame of the resolved end state, not a frozen first frame