Displacement

$ pnpm dlx shadcn@latest add @remocn/displacement

Usage

displacement() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The frame divides into a grid of cells and every one of them shears out of place at once, each on its own beat: the picture inside a cell slides away from where it belongs, its colour channels separate along the direction of travel, and film grain settles over the distortion. At the peak the cells hand over, then slide back into register on the next scene.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { displacement } from "@/components/remocn/displacement";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={45}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 18 })}
      presentation={displacement()}
    />
    <TransitionSeries.Sequence durationInFrames={45}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Why this one needs the canvas

Each cell samples its scene at a coordinate pushed away from the pixel being written, by its own seeded direction and distance — so a cell shows a piece of the picture that belongs somewhere else, and the misalignment between neighbouring cells is the whole effect. On top of that the red and blue channels are sampled at two further offsets along the direction of travel, so a displaced tile fringes exactly the way a channel that has slipped does.

A mask cannot move image data. Nothing here is a fade, a tint, or a shaped reveal.

The whole frame at once

There is no band travelling across the picture. Every cell displaces simultaneously, spread only by stagger, and every cell recovers. That is deliberate: a boundary sweeping over one scene to reveal another is a wipe, and a wipe does not need pixels — it would make the html-in-canvas dependency decorative.

The entrance mirrors the exit

The same cell carries both scenes. It shears out holding the outgoing frame and returns holding the incoming one, and the hand-over sits at the peak of the shear, where the frame is furthest out of register and least readable. Played backwards the transition is the same displacement carrying the other scene.

Both ends are exact: the shear follows a half-sine over each cell's own phase, so it is zero at both ends and every cell sits in register on an undistorted frame.

Determinism

Each cell's direction, distance, phase and grain are seeded from its grid coordinate and evaluated as closed-form functions of the transition's progress — the grain advances on a clock derived from progress rather than from wall time, so there is nothing carried between frames. The same frame renders identically in every chunk of a parallel render.

Fallback

Where html-in-canvas is unavailable the two scenes cross with a short lateral jolt in opposite directions. It keeps the knocked-out-of-register feeling and the timing; the per-cell shear needs the scenes' pixels, so none of the props apply there.

Props

displacement(props) accepts: