clawbot/skills/remotion-prompt-video/references/customization.md

Customization Guide

Adding New Animations

Edit src/components/Scene.tsx. Add cases to getEntranceStyles() and getExitStyles():

// In getEntranceStyles()
case "bounce":
  return {
    opacity: interpolate(frame, [0, entranceDuration * 0.5], [0, 1], { extrapolateRight: "clamp" }),
    transform: `translateY(${interpolate(springProgress, [0, 1], [-50, 0])}px)`,
  };

Then include the new animation name when authoring the VideoScript JSON.

Adding Background Images

To support background images instead of gradients:

1. Add backgroundImage?: string to the Scene type in src/lib/types.ts
2. In Scene.tsx, add an <img> element when scene.backgroundImage is set
3. Include backgroundImage URLs in the VideoScript JSON when authoring scenes

Adding Audio/Music

Remotion supports audio via the <Audio> component:

import { Audio } from "remotion";

// In your composition:
<Audio src="https://example.com/music.mp3" volume={0.3} />

Add a music field to the VideoScript type and include it in the composition.