Grid Pixelate Wipe
The next scene arrives one grid cell at a time.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add grid-pixelate-wipeThe incoming scene is revealed through a cols × rows mask whose cells light
up in turn, with the outgoing scene holding whole underneath so the gaps between
cells always show the old frame rather than the background.
order picks where the fill starts — an edge, the diagonal, or the centre —
and stagger sets how far the cells spread apart in time: 0 pops them all at
once, 1 spreads them across the whole window. shape: "dot" grows each cell
as a point instead of filling it as a block.
Exports 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 →
@/remotion/primitives/grid-pixelate-wipe- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, cols, rows, order, 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
import { transitionGridPixelateWipe } from "@/remotion/primitives/grid-pixelate-wipe";
<TransitionSeries.Transition {...transitionGridPixelateWipe({ cols: 12, rows: 8 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 26 | Transition overlap length. |
| cols | number | 12 | Grid column count. |
| rows | number | 8 | Grid row count. |
| order | "from-left" | "from-top" | "diagonal" | "center" | "from-left" | Which axis or point the cells light up from. |
| shape | "square" | "dot" | "square" | Cells fill as blocks, or as points that grow with their own reveal. |
| stagger | number | 0.82 | 0 pops every cell together; 1 spreads them across the whole window. |