Build a 4.3s motion-graphics video: Full-bleed colour blocks slide in from alternating sides, one bold line each. Lists, tips, reasons.

## 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 ColourBlocks out/ColourBlocks-check.png --frame=91 2>&1 | tail -5"
          }
        ]
      }
    ]
  }
}
```

## Composition
- id `ColourBlocks`, 1080x1920 (9:16), 30 fps, 130 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
  "title": "3 reasons to switch",
  "items": [
    "No more milk skin.",
    "Foams in 20 seconds.",
    "Tastes like oats, not cardboard."
  ],
  "beatFrames": 30
}
```

## Look
- Colours: background #FFF1EA, surface #FFD9C7, text #2A1712, single accent #F2552C. Use only these.
- Typeface: Bricolage Grotesque (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: vibrant flat colour-block transitions, full-screen solid colour panels sliding in fast from alternating directions on each beat, one huge bold sans line per panel with a small index number, dark pill title label pinned top-left, no gradients, graphic design motion.

## Beats
- 0.0s: a dark pill title "3 reasons to switch" drops in at the top-left and stays pinned.
- 0.3s: a full-bleed colour block slides in from the left (0.3s, power4 ease) carrying a small index number and the line "No more milk skin." in huge bold type; colours cycle surface, accent, darker surface, ink.
- 1.3s: a full-bleed colour block slides in from the bottom (0.3s, power4 ease) carrying a small index number and the line "Foams in 20 seconds." in huge bold type; colours cycle surface, accent, darker surface, ink.
- 2.3s: a full-bleed colour block slides in from the right (0.3s, power4 ease) carrying a small index number and the line "Tastes like oats, not cardboard." in huge bold type; colours cycle surface, accent, darker surface, ink.

## 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 4.3s without errors, and the Stop hook still renders cleanly.
- You have rendered stills at frames 0, 45, 91 and 129 and checked each for overflow, clipped text and contrast.
- Do not render the final MP4 unless I ask.