Grid Pixelate Wipe
Dissolve from one scene to the next through a deterministic grid of mask cells
Installation
$ pnpm dlx shadcn@latest add @remocn/grid-pixelate-wipeUsage
// 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 |