Remotion Transitions Library: 59 ready-made scene transitions (free, MIT)

Last updated: November 9, 2026

Yes, there is a library of ready-made transitions for Remotion: Remocn has 59 scene transitions, free and MIT licensed. 41 of them are presentations for TransitionSeries from @remotion/transitions, so you drop one into a TransitionSeries.Transition and pace it with linearTiming or springTiming. The other 18 are self-contained components that play the whole cut themselves.

Install any of them with npx shadcn@latest add @remocn/<name>, for example npx shadcn@latest add @remocn/zoom-blur. The shadcn CLI copies the source into your project, so you own the file and can change it. There is no Remocn runtime package.

Want to see them move? Every transition has a live preview in the gallery at the bottom of this page and on its own docs page.

All 59 Remocn transitions

"Natural length" is how many frames the transition's own motion takes at 30fps. For a presentation, pass it to linearTiming({ durationInFrames }). For a scene, it is when the cut has finished, so give the Sequence at least that many frames plus any hold.

TransitionSeries presentations (41)

Pass these to TransitionSeries.Transition between two TransitionSeries.Sequences.

Transition scenes (16)

Self-contained components: pass the outgoing and incoming content as props (from and to, or a scenes list) and place the component in a Sequence or Composition.

Scene sequencers (2)

Not presentations either. A sequencer takes the whole list of scenes and runs the timeline itself, so scenes never overlap. The length is for the demo's full run of scenes.

How to use a Remocn transition in Remotion

Add Remocn to an existing Remotion project once (installation), then install a transition by name:

npx shadcn@latest add @remocn/zoom-blur

The file lands in components/remocn/. A presentation goes between two sequences in a TransitionSeries, and the timing sets the pace:

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { zoomBlur } from "@/components/remocn/zoom-blur";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 18 })}
      presentation={zoomBlur()}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

A transition scene is an ordinary component. Give it both sides of the cut as props:

import { BandShift } from "@/components/remocn/band-shift";
 
export const Swap = () => <BandShift from="Before." to="Now live." bands={6} />;

Each transition's page lists its props, a usage example, and when to use it or pick something else.

Options for Remotion transitions

There are four ways to get scene transitions into a Remotion video. They work together: Remocn's presentations run on Remotion's own TransitionSeries.

What Remocn adds on top of @remotion/transitions:

• Range. 59 transitions in camera, shader, pixel, graphic, light, type and match-cut styles, next to the built-in set.
• Source in your project. The shadcn CLI copies each transition into components/remocn/. There is no Remocn package to keep up to date, and you can edit the code.
• Timing you can plan with. Every transition states its natural length in frames, plus when to use it and when to pick another one.
• Few dependencies. Most need only Remotion packages. The shader dissolves also install @paper-design/shaders-react through a Remocn shader component, which the CLI adds for you.

What it doesn't change: presentations still run on @remotion/transitions, and Remotion's license applies to Remotion. The five canvas transitions (Glitch Cut, Ember Burn, Particle Dissolve, Grid Wave, Displacement) read real pixels through the experimental html-in-canvas API. Chrome 149+ with chrome://flags/#canvas-draw-element shows the full effect, and other browsers get a CSS approximation, so previews and renders don't break.

Community repos exist as well. As of November 2026, Ashad001/remotion-transitions is a Claude Code skill with six TransitionPresentation patterns, and GTKottman/remotion-transitions is a library of 50 transitions you copy in by hand, with a catalog.json. Both are MIT.

Remocn is an independent community project. It is not affiliated with Remotion or shadcn, and it is listed on Remotion's resources page.

Using Remocn transitions with an AI agent

Agents can pick and install transitions without reading this page:

• MCP server at https://remocn.dev/mcp, no auth. search_components with a query such as "transition" or "glitch cut" returns matching transitions with natural length, use and avoid notes, and the install command. get_component returns one transition's full docs.
• Claude Code / Codex plugin: /plugin install remocn --marketplace Remocn/remocn, then /remocn:video <brief> plans a storyboard, installs the components it picks, transitions included, and writes the video.
• Agent skill: npx skills add Remocn/remocn teaches any skill-loading agent Remocn's timing rules. It reads the live component index from remocn.dev.
• Markdown: this page is at /docs/transitions.md, and every transition is listed with its use and avoid notes in /llms-components.txt.

FAQ

Browse transitions by style

Every transition with a live preview, grouped by how it moves.