SmartPromptr

Showing Waterfall Title with sample copy. Describe your video above, or browse all templates.

Your prompts

Paste into Claude Code. It sets up skills and hooks, then builds this exact animation.

Build a 4.0s motion-graphics video: A headline cascades up word by word over a breathing glow. Clean openers and title cards.

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

## Composition
- id `WaterfallTitle`, 1080x1920 (9:16), 30 fps, 120 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
  "eyebrow": "New collection",
  "headline": "Summer drops in soft pastel",
  "accentWord": "pastel",
  "subline": "Twelve pieces, made to layer. Online Friday at 9am."
}
```

## Look
- Colours: background #F4EEFF, surface #E2D6FF, text #1E1530, single accent #7C4DFF. Use only these.
- Typeface: Bricolage Grotesque (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: clean title card, large bold sans headline words whipping up from below one after another in an accelerating cascade, soft radial glow breathing behind, pastel flat background, supporting line fades up, short accent underline draws from the left, static camera.

## Beats
- 0.0s: a soft radial glow in the accent colour blooms behind the text and breathes gently (±3% scale).
- 0.1s: eyebrow "New collection" rises 30px in small uppercase accent text.
- 0.3s: headline "Summer drops in soft pastel" cascades up word by word from inside a mask, each word starting before the previous settles (gaps shrinking 6 to 3 frames, power4 ease, 8° rotate-in). Words appear instantly at their start (no fade). The word "pastel" is in the accent colour.
- after the cascade: subline "Twelve pieces, made to layer. Online Friday at 9am." fades and rises 24px.
- then: a short accent underline draws in from the left.

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