Grid Pixelate Wipe
Grid cell opacity stagger wipe for TransitionSeries.
PrimitiveTransitionsAdvanced
grid-pixelate-wipe30fps · 960×540
Install
$ npx remotion-ui@latest add grid-pixelate-wipeExports transitionGridPixelateWipe() and getTransitionGridPixelateWipeDuration() for use with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/grid-pixelate-wipe- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, cols, rows, direction, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { transitionGridPixelateWipe } from "@/remotion/primitives/grid-pixelate-wipe";
<TransitionSeries.Transition {...transitionGridPixelateWipe({ cols: 12, rows: 8 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 24 | Transition overlap length. |
| cols | number | 12 | Grid column count. |
| rows | number | 8 | Grid row count. |
| direction | "from-left" | "from-top" | "from-left" | Stagger direction. |