Build a 5.0s motion-graphics video: Your product springs up on a glowing card with a sheen, then name, tagline and a CTA that presses.

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

## Composition
- id `ProductReveal`, 1080x1920 (9:16), 30 fps, 150 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
  "imageUrl": "",
  "productName": "Cloud Oat",
  "tagline": "Barista oat milk that actually foams.",
  "price": "$4.50",
  "cta": "Shop now"
}
```

## 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: premium product reveal, rounded product card springing up from small scale with 3D tilt settling flat, soft radial glow blooming behind, a single light sheen sweeping across the card, product floating gently, bold name and tagline rising in, pill call-to-action button popping in and pressing with a ripple, pastel studio background.

## Beats
- 0.0s: an accent radial glow blooms behind where the product will sit.
- 0.2s: a rounded product card (with an abstract accent blob that slowly rotates) springs up from 55% scale with a 3D tilt (rotateY 24°, rotateX 10°) that settles flat, then floats gently.
- 1.0s: a single white sheen sweeps diagonally across the card.
- 1.1s: product name "Cloud Oat" rises in, then tagline "Barista oat milk that actually foams.".
- 1.9s: a pill CTA "Shop now" pops in with a bouncy spring, price "$4.50" fades in beside it.
- 3.2s: the CTA presses (scale to 0.9 and back) and emits an expanding ring ripple.

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