Remotion Rule: Sequencing

What it is

The Remotion Sequencing rule is part of the official Remotion Agent Skill. It provides patterns for controlling when video elements appear, how long they last, and how they overlap in time. Sequencing is the core mechanism for composing multi-element video scenes in Remotion's React-based video framework.

This rule targets developers using Remotion to create programmatic videos who need to control timing precisely. It covers the Sequence component for delaying and trimming, the Series component for sequential playback, and patterns for overlapping elements.

How it saves time or tokens

The rule installs as part of the Remotion Agent Skill and activates automatically when you work on sequencing tasks. Instead of reading through Remotion documentation to figure out timing patterns, your AI assistant already knows the correct components and props for common scenarios.

How to use

1. Install the Remotion Agent Skill:

npx skills add remotion-dev/skills

1. The sequencing rule activates automatically when working with timing in a Remotion project.

1. Use sequencing patterns in your compositions:

import { Sequence, Series, useCurrentFrame } from 'remotion';

export const MyVideo = () => {
  return (
    <>
      {/* Delay an element by 30 frames */}
      <Sequence from={30}>
        <Title text="Hello" />
      </Sequence>

      {/* Limit duration to 60 frames */}
      <Sequence from={0} durationInFrames={60}>
        <Subtitle text="World" />
      </Sequence>
    </>
  );
};

Example

import { Series, Sequence } from 'remotion';

export const VideoTimeline = () => {
  return (
    <Series>
      {/* Each item plays after the previous one ends */}
      <Series.Sequence durationInFrames={90}>
        <IntroScene />
      </Series.Sequence>

      <Series.Sequence durationInFrames={150}>
        <MainContent />
      </Series.Sequence>

      {/* Overlap with previous by 15 frames */}
      <Series.Sequence durationInFrames={60} offset={-15}>
        <OutroScene />
      </Series.Sequence>
    </Series>
  );
};

Related on TokRepo

• Video tools -- Video creation and editing tools for developers
• AI coding tools -- Developer productivity tools

Common pitfalls

• Forgetting that Sequence's from prop is relative to the parent composition's timeline, not the global timeline. Nested Sequences offset from their parent's start.
• Using negative offset in Series without checking that the overlap does not cause elements to render before their content is ready.
• Setting durationInFrames shorter than the content's animation duration cuts it off abruptly. Match duration to your animation timing.