Grain Dissolve
Disintegrate the outgoing scene into soft grainy shapes and condense the next scene out of the noise
Installation
$ pnpm dlx shadcn@latest add @remocn/grain-dissolveUsage
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:
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#3a3a52", "#4a4a68", "#8f88ae"] | Colors of the grain shapes, up to 7. |
colorBack | string | "#141318" | Backdrop behind the shapes during the transition. |
shape | string | "blob" | Figure family of the field. One of wave, dots, truchet, corners, ripple, blob, sphere. |
noise | number | 0.3 | Amount of per-pixel grain over the shapes. |
zoom | number | 2 | Magnification of the figure field. Raise it until the shapes fill the frame, lower it to show more of the backdrop. |
speed | number | 1 | Shader animation speed. |