Build a 5.9s motion-graphics video: A quote holds still while colour travels through it word by word. For reviews and press lines.

## Skills
- Use the `remotion-best-practices` skill for all composition code. If this project uses HyperFrames instead of Remotion, use `/hyperframes` with `hyperframes-animation` and keep the same beats.
- Use the `motion-graphics` skill (if installed) for motion direction and polish.
- If there is no Remotion project yet, scaffold one first with the `remotion-create` workflow, then open Studio so I can watch the preview while you build.

## Hooks (set up first)
Merge this into `.claude/settings.json` so every edit is type-checked and every finished turn renders a verification still:
```json
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "npx tsc --noEmit -p . 2>&1 | head -30"
          }
        ]
      }
    ],
    "Stop": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "npx remotion still QuoteSweep out/QuoteSweep-check.png --frame=123 2>&1 | tail -5"
          }
        ]
      }
    ]
  }
}
```

## Composition
- id `QuoteSweep`, 1080x1920 (9:16), 30 fps, 177 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
  "quote": "Have nothing in your houses that you do not know to be useful, or believe to be beautiful.",
  "author": "William Morris",
  "role": "Designer, 1880 lecture"
}
```

## Look
- Colours: background #EAF4FF, surface #CCE2FF, text #0E1E33, single accent #2F6BFF. Use only these.
- Typeface: DM Serif Display (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: editorial quote card, oversized quotation mark springing in, quote text held still while an accent colour travels through the words left to right then settles to dark ink, attribution sliding in with a short accent rule, flat pastel background, no camera movement.

## Beats
- 0.0s: an oversized accent quotation mark springs in with a rotate from -20°.
- 0.3s: the quote "Have nothing in your houses that you do not know to be useful, or believe to be beautiful." fades up and holds still, words dimmed.
- 0.7s onward: an accent highlight travels through the words left to right (about 4 frames per word), each lit word lifting 6px, then settling to solid ink once passed.
- after the sweep: attribution slides in from the left with a short accent rule: "William Morris", "Designer, 1880 lecture".

## Rules
- Drive every animation from `useCurrentFrame()` with `interpolate()`/`spring()` and clamped extrapolation. No CSS transitions or Tailwind animation classes.
- Deterministic only: no `Math.random()` or `Date.now()`; use `random(seed)` from remotion.
- Animate transforms and opacity only (`scale`, `translate`, `rotate`); never linear easing for movement.
- Keep key content inside the platform safe area (on 9:16 leave about 220px top and 420px bottom clear). Size display text so the longest word never overflows.
- One accent colour. Strong contrast for all text. No em dashes in on-screen copy.

## Done when
- Studio plays the full 5.9s without errors, and the Stop hook still renders cleanly.
- You have rendered stills at frames 0, 61, 123 and 176 and checked each for overflow, clipped text and contrast.
- Do not render the final MP4 unless I ask.