Pixel Sort

$ pnpm dlx shadcn@latest add @remocn/pixel-sort

Usage

pixelSort() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The frame is sliced into columns vertical strips. Each outgoing strip melts downward: it stretches from a seeded point in the column while a bright streakColor smear builds over it, with every column starting at a slightly different time. Halfway through, the incoming scene falls in from above column by column as stretched streaks that snap into the real image with a small overshoot.

The per-column timing, stretch and glow come from seed, so the result is deterministic.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { pixelSort } from "@/components/remocn/pixel-sort";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 30 })}
      presentation={pixelSort({ columns: 32 })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

This is the heaviest transition in its group: both scenes are rendered once per column, so the default 40 columns means up to 80 copies of your scenes on a transition frame. Keep scenes light, or drop columns to 16 to 24 if renders slow down. Fewer, wider columns also read more blocky and graphic.

Props

pixelSort(props) accepts: