Grid Pixelate Wipe

The screen is split into a CSS grid of black mask cells covering the outgoing scene. Each cell fades out on its own schedule, computed from a deterministic pattern function (wave, diagonal, or spiral). Because the per-cell delay is pure math over (x, y) — no Math.random — every frame is reproducible across renders, which is essential for video output.

Installation

$ pnpm dlx shadcn@latest add @remocn/grid-pixelate-wipe

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { GridPixelateWipe } from "@/components/remocn/grid-pixelate-wipe";

const GridPixelateWipeScene = () => (
  <GridPixelateWipe
    from={<SceneA />
);

export const RemotionRoot = () => (
  <Composition
    id="GridPixelateWipe"
    component={GridPixelateWipeScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`from`	`ReactNode`	—	The outgoing scene. Falls back to a labeled colored panel.
`to`	`ReactNode`	—	The incoming scene. Falls back to a labeled colored panel.
`cols`	`number`	`12`	Number of mask grid columns.
`rows`	`number`	`7`	Number of mask grid rows.
`pattern`	`"wave" \| "diagonal" \| "spiral"`	`"wave"`	Deterministic function used to compute per-cell delay.
`transitionStart`	`number`	`durationInFrames * 0.4`	Frame at which the dissolve begins.
`transitionDuration`	`number`	`30`	Total length of the dissolve in frames.
`cellFadeFrames`	`number`	`4`	How many frames a single cell takes to fade out.
`className`	`string`	—	Optional className for the outer container.

Notes

Pick a pattern that fits the beat

wave radiates from the center and feels organic. diagonal reads as a sweep — great for hand-off between two product shots. spiral is the most dramatic and works best for hero reveals.

Never reach for Math.random

Random per-cell delays will resample on every render call, producing flickering noise instead of a clean dissolve. Always derive cell timing from (x, y) coordinates or @remotion/random with a stable seed.