Media Frame
One piece of media presented — the frame opens on it under a slow push.
SceneScenesAdvanced
media-frame30fps · 960×540
Install
$ npx remotion-ui@latest add media-frameThe frame opens like a shutter on the media while a slow push runs underneath, then the title masks up out of its own line and the caption settles beneath.
The frame is cut to aspect (16:9 by default) and centred, so contain media
fills it instead of sitting in a letterbox, and the layout reserves only what is
shown — with no title and no caption the frame owns the whole safe area.
Advanced. Installs @remotion/media for video sources.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/media-frame- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: src, title, caption, eyebrow, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { MediaFrame } from "@/remotion/scenes/media-frame";
<MediaFrame src={staticFile("demo.png")} title="Product demo" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | - | Image or video source. |
| title | string | - | Headline above the frame; masks up out of its own line. |
| caption | string | - | Supporting line under the frame. |
| eyebrow | string | - | Small label above the title. |
| fit | "cover" | "contain" | "contain" | Media object-fit behaviour. Use contain for UI screenshots. |
| aspect | number | 16 / 9 | Aspect the frame is cut to, so contain media fills it. |
| radius | number | - | Corner radius in composition pixels. |
| accentColor | string | "#E8B86D" | Rim light and eyebrow colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |