# 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.

- **Type:** [Effect](https://varg.ai/how-to/effects.md) · [Transitions](https://varg.ai/how-to/browse/skills/transitions.md)
- **Slug:** `remotion-custom-presentation`
- **Status:** live
- **Publisher:** varg (varg, verified)
- **License:** MIT
- **Source:** https://github.com/vargHQ/skills/blob/main/varg-video-edit-library/references/transitions.md#remotion-custom-presentation
- **Works in:** Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- **Requires:** Remotion
- **Cost:** Free — the take renders locally; generated footage, if any, bills by the model

## 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

```tsx
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

- [Remotion: custom presentations](https://www.remotion.dev/docs/transitions/presentations/custom)
- [Remotion: presentations](https://www.remotion.dev/docs/transitions/presentations)

## Use when

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

## Not for

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

## Install

- Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg`
- Codex: `npx skills add vargHQ/skills --skill varg-video-edit-library -a codex -y`
- Cursor: `npx skills add vargHQ/skills --skill varg-video-edit-library -a cursor -y`

## 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

- [editly](https://varg.ai/how-to/skills/editly.md): Declarative JSON5 video editing CLI/API: clips, titles, transitions, audio mixing, rendered with ffmpeg.
- [Mix (Cross Dissolve)](https://varg.ai/how-to/skills/mix-dissolve.md): The two shots blend through each other. The quietest transition: "time passes" or "this continues".
- [Dip to Black](https://varg.ai/how-to/skills/black-fade.md): A fades to black, then B fades up. Marks the end of a section or a bigger jump in time.
- [White Flash](https://varg.ai/how-to/skills/white-flash.md): The frame blows out to white for a moment and opens on the next shot. Energy, memory or a camera snap.
- [Pull In (Zoom In)](https://varg.ai/how-to/skills/pull-in-zoom.md): The camera rushes into shot A and lands, still moving forward, in shot B. The signature short-form transition.
- [Pull Out (Zoom Out)](https://varg.ai/how-to/skills/pull-out-zoom.md): The camera jerks backwards out of shot A and keeps pulling back as shot B settles in.