Particle Dissolve

Installation

$ pnpm dlx shadcn@latest add @remocn/particle-dissolve

Usage

particleDissolve() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The frame is ground into fine dust: each speck wanders away from the pixel it came from, colour drains out of it as it goes, and the specks shimmer while they hang in the air. Then the motion reverses — the dust gathers, colour returns, and it settles into the next scene.

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

Why this one needs the canvas

• Bright content throws its dust furthest. How far a speck wanders is set by the luminance of the pixel it came from, so highlights and text disintegrate before flat background does. The scatter field is a function of the picture.
• Every speck carries a real fragment. It samples the scene at the coordinate it drifted in from, not an average of what sits beneath it.
• The dust separates colour. Red and blue are sampled at slightly different offsets while a speck is airborne, so the grain fringes as it flies and resolves clean as it lands.
• Motes catch the light. Each speck has its own size and its own brightness, twinkling on its own phase, and the material thins between them. This is what makes the effect work on flat areas: displacing a uniform colour returns the same colour, so without light of their own the specks would be invisible everywhere except over content, and only the text would appear to dissolve.

None of that survives a mask: a CSS version could only fade a grid of squares tinted by whatever is underneath them.

The entrance mirrors the exit

There is one continuous arc per speck rather than two effects bolted together: dust rises to a peak and falls away again, and the scene swap happens at the peak where the frame is least legible. Played backwards it reads as the same effect applied to the other scene — the incoming frame is assembled out of the same dust that the outgoing one became.

direction sets the order the arc sweeps in. "reveal" starts at the centre and travels outward, so the next scene surfaces in the middle and grows; an axis sweeps the dust across the frame instead.

Determinism

Each speck's heading, wander distance, shimmer phase, and stagger are seeded from its cell coordinate and evaluated as closed-form functions of the transition's progress — no per-frame 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 presentation renders a desaturating blur crossfade — the picture loses colour and definition on the way out and recovers both on the way in, which is the shape of the effect without the grain. The dust needs the outgoing scene's pixels, so none of the props apply there.

Props

particleDissolve(props) accepts: