# Icon Scatter
URL: https://remocn.dev/docs/transitions/icon-scatter

Scatter a field of icons over the cut, hiding the scene swap at the field's peak

- Install: `npx shadcn@latest add @remocn/icon-scatter`
- Vibe: playful
- Natural length: 40f @ 30fps

## Installation

```bash
npx 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 | 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. |

## Use when
- Playful product or app transitions where icons are part of the brand's visual language.
- A feature-to-feature cut wants a moment of energy before settling into the next scene.
- The cover fill can be tuned to match the outgoing scene's background so the swap hides cleanly.

## Don't use when
- The piece is minimal or serious — use `fade-through` for a quieter cut instead.
- The brand has no icon system to draw from — a generic icon field would look unrelated to the product.