Remotion Rule: Transitions

What it is

This is a Remotion skill rule that covers scene transitions and overlays for programmatic video production. Remotion lets you create videos using React components, and this rule teaches the TransitionSeries API for building smooth transitions between scenes: fade, slide, wipe, and custom easing curves. It is a configuration file that guides AI coding agents in producing correct transition code.

Video producers and developers using Remotion for programmatic video creation benefit most. Instead of manually keyframing transitions in a video editor, this rule enables declarative transition definitions in React code.

How it saves time or tokens

Transitions are repetitive to implement from scratch. The TransitionSeries API abstracts the timing, easing, and composition logic into a clean declarative syntax. This rule provides the patterns and examples so an AI coding agent produces correct transition code on the first attempt, avoiding trial-and-error with the Remotion API. Common transitions (fade in/out, slide left/right, crossfade) are covered with ready-to-use code.

How to use

1. Add the Remotion transitions rule to your project's AI configuration.

1. Install the Remotion transitions package:

npm install @remotion/transitions

1. Use TransitionSeries in your composition:

import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import { slide } from '@remotion/transitions/slide';

export const MyVideo: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={90}>
        <SceneOne />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={90}>
        <SceneTwo />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

Example

import { springTiming } from '@remotion/transitions';
import { wipe } from '@remotion/transitions/wipe';
import { slide } from '@remotion/transitions/slide';

// Slide transition with spring easing
<TransitionSeries.Transition
  presentation={slide({ direction: 'from-left' })}
  timing={springTiming({ config: { damping: 200 }, durationInFrames: 30 })}
/>

// Wipe transition
<TransitionSeries.Transition
  presentation={wipe({ direction: 'from-top-left' })}
  timing={linearTiming({ durationInFrames: 20 })}
/>

// Custom overlay transition
<TransitionSeries.Transition
  presentation={fade()}
  timing={linearTiming({ durationInFrames: 15 })}
/>

Related on TokRepo

• AI Coding Tools -- Developer tools for programmatic content creation
• Video Tools -- Video production and editing tools

Common pitfalls

• Transition duration must not exceed the adjacent scene durations. If a 30-frame transition sits between two 20-frame scenes, the render will fail.
• TransitionSeries replaces the standard Series component for scenes that need transitions. Do not mix them in the same composition.
• Spring timing with low damping values creates bouncy transitions that may look unprofessional. Use linearTiming for clean, predictable transitions unless bounce is intentional.