Showing Prompt to Result 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 6.2s motion-graphics video: A prompt types itself, the send button presses, and the answer assembles. For AI tools and app demos.
## 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 PromptToResult out/PromptToResult-check.png --frame=130 2>&1 | tail -5"
}
]
}
]
}
}
```
## Composition
- id `PromptToResult`, 1080x1920 (9:16), 30 fps, 186 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
"appName": "Trip Buddy",
"prompt": "Plan a rainy Sunday in Lisbon for two",
"resultTitle": "Your Sunday",
"resultLines": [
"10:00 Pastéis at Manteigaria",
"12:30 Tile museum",
"16:00 LX Factory bookshop"
]
}
```
## Look
- Colours: background #F4EEFF, surface #E2D6FF, text #1E1530, single accent #7C4DFF. Use only these.
- Typeface: Space Grotesk (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: clean UI motion graphic, a rounded input card where a prompt types itself character by character with a blinking cursor, round send button compresses on press, shimmering skeleton placeholder, result card springs in with bullet lines sliding in one by one, soft pastel background, flat UI design, no camera movement.
## Beats
- 0.0s: an input card labelled "Trip Buddy" springs up from below.
- 0.5s: the text "Plan a rainy Sunday in Lisbon for two" types itself at about 1.6 frames per character with a blinking accent cursor.
- after typing: the round send button turns accent and compresses on press.
- then: a result card springs in showing a shimmering skeleton for under a second.
- then: the result assembles: title "Your Sunday", then lines "10:00 Pastéis at Manteigaria", "12:30 Tile museum", "16:00 LX Factory bookshop" sliding in one by one with accent bullets.
## 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 6.2s without errors, and the Stop hook still renders cleanly.
- You have rendered stills at frames 0, 65, 130 and 185 and checked each for overflow, clipped text and contrast.
- Do not render the final MP4 unless I ask.