Grid Wave

Installation

$ pnpm dlx shadcn@latest add @remocn/grid-wave

Usage

gridWave() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. A wave travels across the frame; wherever it passes, the picture divides into cells and each one rises off the surface as a solid block — a lit top face carrying its piece of the picture, a shaded side below it where the block has come away, and a highlight around the top edge. The block sets back down as the wave leaves, carrying the next scene.

Each block rises from its own footprint. The frame as a whole never moves: only the ring of blocks under the wave is off the surface at any moment, so the picture stays anchored while the wave travels through it.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { gridWave } from "@/components/remocn/grid-wave";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={60}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 36 })}
      presentation={gridWave()}
    />
    <TransitionSeries.Sequence durationInFrames={60}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

direction decides how the wave travels. "ripple" spreads outward from the centre like a drop landing on the surface; an axis sweeps it straight across.

Why this one needs the canvas

A grid-shaped mask over a crossfade is something CSS can do. A raised solid is not. Each block is projected rather than masked:

• The top face is re-projected. It is offset upward, leaned slightly away from the frame's centre for perspective, and magnified — so the pixel being written samples the scene somewhere else entirely, and the amount depends on how high that particular block has risen.
• The side face is extruded. The strip of footprint the block has vacated samples the top face's own bottom edge and repeats it downward under shading, which is what gives the block visible thickness instead of reading as a floating rectangle.
• Blocks occlude each other. A pixel is resolved against the neighbouring blocks and the highest one wins, so a raised block correctly covers the gap and the shoulder of the one behind it.

All three are reads at coordinates other than the pixel being written, which is exactly what a mask or a blend mode cannot express.

The entrance mirrors the exit

There is no separate treatment for the incoming scene, because it is the same block. A block goes up carrying the outgoing scene and comes down carrying the incoming one, and the hand-over sits at the crest — the moment the block is highest, largest and most lit, and the eye is least on its contents. Play the transition backwards and it is the same wave carrying the other scene, exactly.

Both ends are exact. The wave starts and finishes outside the frame, and every lift is scaled by the wave's own pulse, so at progress 0 nothing is raised and the outgoing frame is untouched; at progress 1 the same is true of the incoming one. Nothing fades at any point.

Determinism

The wave position and every block's lift, lean, magnification, shading and hand-over are closed-form functions of the transition's progress and the block's own coordinate — no simulation, no wall-clock time, nothing carried between frames. The same frame renders identically in every chunk of a parallel render.

Fallback

Where html-in-canvas is unavailable the incoming scene resolves through a short scale-and-fade settle. It keeps the timing; the tiles need the outgoing scene's pixels, so none of the props apply there.

Props

gridWave(props) accepts: