Icon Scatter
Scatter a field of icons over the cut, hiding the scene swap at the field's peak
Installation
$ pnpm dlx shadcn@latest add @remocn/icon-scatterUsage
iconScatter() is a Remotion transition presentation. Pass it to a
TransitionSeries.Transition between two sequences. A field of line icons flies
in and fills the frame, a cover fill hides the swap at the field's peak, then
the icons scatter away to reveal the incoming scene.
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { iconScatter } from "@/components/remocn/icon-scatter";
export const MyVideo = () => (
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={70}>
<SceneA />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
timing={linearTiming({ durationInFrames: 40 })}
presentation={iconScatter({ count: 15 })}
/>
<TransitionSeries.Sequence durationInFrames={70}>
<SceneB />
</TransitionSeries.Sequence>
</TransitionSeries>
);Props
iconScatter(props) accepts:
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 15 | How many icons populate the field. |
color | string | "#fafafa" | Icon stroke color. |
coverColor | string | "#0a0a0a" | The fill that hides the swap at the field's peak. |
coverOpacity | number | 0.92 | Peak opacity of the cover fill (0–1). Lower shows more of the swap. |
strokeWidth | number | 2 | Stroke width of the icons, in their 24px viewBox units. |
flyDistance | number | 260 | How far icons fly on scatter, in pixels. |
seed | string | "icon-scatter" | Seed so two scatters in one video can differ. |