Grain Dissolve

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

Usage

grainDissolve() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The grain field starts as flat, hard-edged shapes and both intensity and softness sweep from 0 to 1 across the transition — the figures grow, roughen into grain, and the incoming scene condenses out of the dissolved texture. Give the sweep enough frames to read (76 works well).

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

The shape prop picks the figure family the field is built from — "wave", "dots", "truchet", "corners", "ripple", "blob", or "sphere". Shapes are discrete (they cannot blend into each other), but each one gives the same sweep a different character: "blob" reads organic, "wave" calm and banded, "dots" halftone-like, "sphere" volumetric.

Props

grainDissolve(props) accepts: