Media Sequence
An edited run of shots with a chapter strip showing where you are.
SceneScenesAdvanced
media-sequence30fps · 960×540
Install
$ npx remotion-ui@latest add media-sequenceEach item is pushed on by the next through a TransitionSeries of
Media Frame, and a chapter strip along the foot
fills through the item that is playing and stays filled behind it.
Set transition to fade for a dissolve instead of a push, showProgress to
drop the strip, and per-item durationInFrames to hold a shot longer.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/media-sequence- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: items, defaultDurationInFrames, transitionDurationInFrames, transition, 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 { MediaSequence } from "@/remotion/scenes/media-sequence";
<MediaSequence items={[{ src: staticFile("one.png"), title: "Hook" }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | MediaItem[] | - | Timed media items. |
| defaultDurationInFrames | number | 78 | Length of an item that sets no duration of its own. |
| transitionDurationInFrames | number | 14 | Overlap between neighbouring items. |
| transition | "slide" | "fade" | "slide" | Push the next item on, or dissolve to it. |
| showProgress | boolean | true | Chapter strip along the foot. |
| aspect | number | 16 / 9 | Aspect the frames are cut to. |
| accentColor | string | "#E8B86D" | Strip fill and frame rim colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |