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-scatter

Usage

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.

tsx

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
count	number15 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	number0.92 Peak opacity of the cover fill (0–1). Lower shows more of the swap.
strokeWidth	number2 Stroke width of the icons, in their 24px viewBox units.
flyDistance	number260 How far icons fly on scatter, in pixels.
seed	string"icon-scatter" Seed so two scatters in one video can differ.

countnumber
How many icons populate the field.
Default15
colorstring
Icon stroke color.
Default"#fafafa"
coverColorstring
The fill that hides the swap at the field's peak.
Default"#0a0a0a"
coverOpacitynumber
Peak opacity of the cover fill (0–1). Lower shows more of the swap.
Default0.92
strokeWidthnumber
Stroke width of the icons, in their 24px viewBox units.
Default2
flyDistancenumber
How far icons fly on scatter, in pixels.
Default260
seedstring
Seed so two scatters in one video can differ.
Default"icon-scatter"