Remotion Custom Presentation — effect skill for transitions

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

Write your own transition as a component that receives progress (0→1) and whether it is entering or exiting.

What it does

Anything CSS can do (scale, rotate, clip-path, blur), or a WebGL shader via HTML-in-canvas.

When: Pull-out zooms, spins, splits, brand-specific moves missing from the built-ins.

Watch out: Non-absolute layouts inside scenes; both scenes are stacked during the overlap and must stay absolutely positioned.

Timing: Whatever timing you pass to the Transition

Also called: TransitionPresentation, presentationProgress, makeHtmlInCanvasPresentation, custom transition

In Remotion

import type {TransitionPresentation, TransitionPresentationComponentProps} from '@remotion/transitions';
import {AbsoluteFill} from 'remotion';

type P = {maxScale: number};
const PullOut: React.FC<TransitionPresentationComponentProps<P>> = ({children, presentationDirection, presentationProgress: p, passedProps}) => {
  const s = presentationDirection === 'exiting'
    ? 1 - (1 - 1 / passedProps.maxScale) * p          // A shrinks
    : passedProps.maxScale - (passedProps.maxScale - 1) * p; // B settles from big
  return <AbsoluteFill style={{transform: `scale(${s})`, opacity: presentationDirection === 'entering' ? p : 1}}>{children}</AbsoluteFill>;
};
export const pullOut = (props: P): TransitionPresentation<P> => ({component: PullOut, props});
// <TransitionSeries.Transition presentation={pullOut({maxScale: 1.4})} timing={linearTiming({durationInFrames: 12})} />

For a GPU shader, makeHtmlInCanvasPresentation(shader) (exported from @remotion/transitions) wraps a function that receives prevImage, nextImage, width, height, time and passedProps on an OffscreenCanvas.

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/ed7bb25f25f2/take-remotion-custom-presentation.mp4 — diagtl between two shots, with the timeline strip of the edit. Footage: Big Buck Bunny (2008), (c) copyright 2008, Blender Foundation | www.bigbuckbunny.org, CC BY 3.0; WING IT! (2023), Blender Studio | studio.blender.org, CC BY 4.0. (credit: Rendered by varg · Big Buck Bunny (2008) + WING IT! (2023))

More transitions skills