The 27-Transition Catalogue: Cinematic Motion Without Keyframes

Manual keyframing is a productivity killer. When you're building a video automation pipeline or a programmatic content factory, you don't want to calculate easing curves for every simple entrance and exit. You want to declare a "fade" or a "blurResolve" and move on to the next layer.

VideoFlow was built to solve exactly this. While the core builder supports frame-perfect keyframes via .animate(), the heavy lifting is often handled by our library of 27 built-in transition presets. These aren't just simple opacity fades; they are high-quality cinematic primitives that handle the math for you.

The "One-Liner" Motion API

In VideoFlow, transitions are defined in the settings object (the second argument) of any layer. Because VideoFlow treats videos as portable JSON, these transitions are descriptive rather than imperative. You tell the renderer what should happen, and it handles the how across the browser, server, and live preview.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow();

const title = $.addText(
  {
    text: 'Cinematic Motion',
    fontSize: 8,
    color: '#FF5A1F',
  },
  {
    // Define entrance motion
    transitionIn:  { transition: 'slideUp',     duration: '800ms', easing: 'easeOut' },
    // Define exit motion
    transitionOut: { transition: 'blurResolve', duration: '500ms' },
  },
);

$.wait('3s');
title.remove(); // The transitionOut is triggered automatically

This declarative approach is what makes VideoFlow a powerful Remotion alternative. Instead of writing React hooks to interpolate state, you're just defining a data structure that any LLM or backend service can emit.

Browsing the Catalogue

The 27 presets are grouped into logical categories, allowing you to quickly find the right vibe for your project. You can explore these in real-time in the VideoFlow Playground.

1. The Classics: Opacity & Scale

For clean, professional corporate videos or SaaS recaps, you can't go wrong with the basics:

• fade: The standard opacity transition.
• zoom: Scales the layer from 0 to 1.
• overshootPop: A playful scale-up that slightly overshoots before settling (uses easeOutBack).
• radialZoom: A scale effect that originates from a specific point.

2. Directional: The Slide Family

Perfect for lower-thirds or slide-based presentations:

• slideUp, slideDown, slideLeft, slideRight.
• Pro Tip: Use the distance param to control how far the layer travels (e.g., params: { distance: 0.2 }).

3. High-Polished: Blur & 3D

When you need that extra bit of cinematic flair:

• blurResolve: The layer fades in while a Gaussian blur gradually hits zero.
• motionBlurSlide: A slide transition that applies a directional motion blur based on velocity.
• rotate3dY & tilt3d: Use the CSS-like perspective engine to flip or tilt layers into view.

4. Digital & Glitch

For high-energy edits or tech-focused content:

• glitchResolve: A high-frequency digital scramble that resolves into the clean layer.
• rgbSplitSnap: Splits the red, green, and blue channels before snapping them together.
• noiseDissolve: A grainy, procedural dissolve effect.

Fine-Tuning with Params

Presets aren't black boxes. Most of them accept a params object to customize their behavior. For example, the typewriter transition (found in our Text Layer guide) allows you to control the speed and character reveal pattern.

$.addText(
  { text: 'Automated Content' },
  {
    transitionIn: {
      transition: 'typewriter',
      duration: '1.5s',
      params: { scramble: true } // Adds a digital scramble to each letter
    }
  }
);

This level of control is why we suggest developers look at VideoFlow as a more robust FFmpeg alternative. You get the programmatic power of a CLI with the visual primitives of a professional NLE.

Why This Matters for Automation

If you are building an agentic video pipeline where an LLM is composing the timeline, you want the "surface area" of the video to be as small as possible. Asking an LLM to generate complex keyframe math is error-prone. Asking it to pick from a list of 27 presets like lightSweepReveal or scrambleDecode is trivial.

By leveraging the Core API and these presets, you can build a YouTube Shorts factory or a personalized ad engine that produces high-end results with very little code.

Ready to see them in action? Head over to the Transitions Guide for the full technical spec, or dive into the GitHub repo to see how we implement these effects using GLSL under the hood.