Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.110
remotion-markup/video-editing.mdMarkdown3 KBView on GitHub
Remotion can be used for bare-bones video editing in the Studio. Choose the source structure based on the editing behavior you want:
Keep every editable clip as its own authored JSX node. Do not generate editable clips with .map() or another programmatic loop.
Place every <Video> directly in the composition and hardcode its timing props. from={0} may be omitted:
<Video
src="https://remotion.media/video.mp4"
trimBefore={0}
durationInFrames={78}
/>
<Video
src="https://remotion.media/video.webm"
trimBefore={12}
from={78}
durationInFrames={66}
/>
<Video
src="https://remotion.media/video.mp4"
trimBefore={72}
from={144}
durationInFrames={90}
/>
<Video
src="https://remotion.media/video.webm"
trimBefore={58}
from={234}
durationInFrames={72}
/>
<Video
src="https://remotion.media/video.mp4"
trimBefore={180}
from={306}
durationInFrames={60}
/>from is the clip’s absolute start frame in its parent timeline.durationInFrames is how many frames the clip remains visible.trimBefore is how many source frames are skipped before playback begins.<Video> must be a separate JSX node. Add a descriptive name when useful in the Studio timeline.from, durationInFrames, and trimBefore must be hardcoded frame values. Do not compute them.<Video> from @remotion/media.Moving or resizing one of these clips does not reposition later clips. Gaps and overlaps are therefore allowed.
“Ripple editing” is the standard video-editing term for changing one clip and automatically shifting everything after it.
In Remotion, a <TransitionSeries> provides this sequential, cascading timing model while also allowing transitions between clips.
Read transitions.md for transition types, timing options, installation instructions, and composition-duration calculation.
Keep the markup like this:
<TransitionSeries name="Video timeline">
<TransitionSeries.Sequence name="Clip 1" durationInFrames={39}>
<Video
src="https://remotion.media/video.mp4"
trimBefore={0}
/>
</TransitionSeries.Sequence>
<TransitionSeries.Sequence name="Clip 2" durationInFrames={45}>
<Video
src="https://remotion.media/video.webm"
trimBefore={8}
/>
</TransitionSeries.Sequence>
<TransitionSeries.Sequence name="Clip 3" durationInFrames={43}>
<Video
src="https://remotion.media/video.mp4"
trimBefore={60}
/>
</TransitionSeries.Sequence>
</TransitionSeries><TransitionSeries.Sequence> is the editable clip row in the Studio timeline.durationInFrames and repositions every later sequence.from on <TransitionSeries.Sequence>; the series calculates each start frame.<TransitionSeries.Sequence> (no .map). Each instance must be hard-coded.<Video> from @remotion/media. Import <TransitionSeries> from @remotion/transitions. If needing to install: npx remotion add @remotion/media @remotion/transitions