SmartPromptr

Showing Orbit Features 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.0s motion-graphics video: Features flip in around your product and settle into a slow orbit. For "everything you get" moments.

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

## Composition
- id `OrbitFeatures`, 1080x1920 (9:16), 30 fps, 180 frames.
- Define a zod schema for the props below and pass them as `defaultProps`, so the copy stays editable in Studio.
- Default props:
```json
{
  "center": "Pebble",
  "features": [
    "Offline mode",
    "Shared lists",
    "Widgets",
    "Dark mode",
    "Siri"
  ],
  "caption": "Everything in one small app."
}
```

## Look
- Colours: background #EAF4FF, surface #CCE2FF, text #0E1E33, single accent #2F6BFF. Use only these.
- Typeface: Geist (load it with `@remotion/google-fonts`), heavy weights for display text, tight negative tracking.
- Motion vocabulary: feature constellation, glowing pill at the centre, rounded feature chips flipping in from 3D space at their orbit positions, dashed connector lines drawing outward, chips slowly orbiting on an ellipse with depth scaling, pastel background, clean UI style.

## Beats
- 0.0s: the centre pill "Pebble" pops in on a bouncy spring with a soft accent halo.
- 0.3s: feature chips "Offline mode", "Shared lists", "Widgets", "Dark mode", "Siri" flip in from 3D at their positions on an ellipse (not from the centre), staggered 5 frames apart, while dashed connector lines draw outward.
- 1.3s onward: the chips slowly orbit a quarter turn with depth scaling (back chips smaller).
- 1.7s: caption "Everything in one small app." fades in below.

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