38 lines
1.0 KiB
Markdown
38 lines
1.0 KiB
Markdown
# Customization Guide
|
|
|
|
## Adding New Animations
|
|
|
|
Edit `src/components/Scene.tsx`. Add cases to `getEntranceStyles()` and `getExitStyles()`:
|
|
|
|
```tsx
|
|
// 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:
|
|
|
|
```tsx
|
|
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.
|