Stop scrolling. This foams.
Coffee shop hook: three words slam in on the beat, the last one in hot pink.
Preview it live, then copy one prompt that has Claude Code build the exact animation.
Kinetic Slam
Describe
One sentence about what you are posting. We pick the template that fits and write the on-screen copy.
Tune
Edit any word, colour or beat and watch the preview update as you type. Switch formats from 9:16 to 16:9.
Paste into Claude Code
One prompt with the exact copy, colours and beats. Claude Code loads the right skills, sets up hooks and builds it.
Example output for “Launch teaser for Cloud Oat barista milk, playful”
Paste into Claude Code. It sets up skills and hooks, then builds this exact animation.
Build a 3.9s motion-graphics video called "Cloud Oat teaser": Punchy phrases slam in on the beat with colour-block flips. Built for hooks and taglines.
## 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 CloudOatTeaser out/CloudOatTeaser-check.png --frame=81 2>&1 | tail -5"
}
]
}
]
}
}
```
## Composition
- id `CloudOatTeaser`, 1080x1920 (9:16), 30 fps, 117 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
"phrases": [
"Launch teaser",
"for Cloud",
"Oat barista",
"milk, playful"
],
"accentIndex": 3,
"beatFrames": 18
}
```
## Look
- Colours: background #FFF1EA, surface #FFD9C7, text #2A1712, single accent #F2552C. Use only these.
- Typeface: Unbounded (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: kinetic typography, giant bold sans words slamming onto a flat colour field on each beat, scale overshoot 1.7 to 1, side snaps and rise-rotate entrances, background colour flips every beat, one accent word, final word locks with an underline sweep, no camera movement.
## Beats
- 0.0s: "Launch teaser" scale-slam: scale 1.7 to 1 with a bouncy spring and a ±5° rotation settle. Background alternates between background and surface colours each beat with a quick accent flash (18% to 0 over 6 frames). Previous phrase squashes out over the last 3 frames of its beat.
- 0.6s: "for Cloud" side-snap: slides in from the left edge on a snappy spring. Background alternates between background and surface colours each beat with a quick accent flash (18% to 0 over 6 frames). Previous phrase squashes out over the last 3 frames of its beat.
- 1.2s: "Oat barista" rise-rotate: rises 260px from below while rotating from -9° to 0°. Background alternates between background and surface colours each beat with a quick accent flash (18% to 0 over 6 frames). Previous phrase squashes out over the last 3 frames of its beat.
- 1.8s: "milk, playful" scale-slam: scale 1.7 to 1 with a bouncy spring and a ±5° rotation settle. Background alternates between background and surface colours each beat with a quick accent flash (18% to 0 over 6 frames). Previous phrase squashes out over the last 3 frames of its beat. This phrase is in the accent colour.
- 2.4s: final phrase locks; an accent underline bar sweeps out from the centre (power4 ease over 18 frames) and holds for 1.5s.
## 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 3.9s without errors, and the Stop hook still renders cleanly.
- You have rendered stills at frames 0, 40, 81 and 116 and checked each for overflow, clipped text and contrast.
- Do not render the final MP4 unless I ask.Twelve motion styles. Hover to play, open one to make it yours.
Short-form motion turned into reusable briefs. Paste any TikTok or Reel to match its style.
Stop scrolling. This foams.
Coffee shop hook: three words slam in on the beat, the last one in hot pink.
Glow, bottled.
Skincare bottle springs up on a peach card with a light sheen, price and Shop now pill press.
3 mistakes slowing your 5k
Three running mistakes as full-screen colour blocks sliding in from alternating sides.
Plan a rainy Sunday in Lisbon
An AI trip planner: the prompt types itself, send presses, the itinerary assembles line by line.
Plans
Free
Try it right now.
Pro
For people who post every day.
Type what you want to say and watch it move.