# Dot Field Morph
URL: https://remocn.dev/docs/motion-graphics/dot-field-morph

A drifting field of dots swirls into icon shapes, then gathers into the logo

- Install: `npx shadcn@latest add @remocn/dot-field-morph`
- Vibe: tech
- Natural length: 206f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/dot-field-morph
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DotFieldMorph } from "@/components/remocn/dot-field-morph";

const DotFieldMorphScene = () => (
  <DotFieldMorph labels={["Animations", "Transitions", "Captions", ""]} count={2000} />
);

export const RemotionRoot = () => (
  <Composition
    id="DotFieldMorph"
    component={DotFieldMorphScene}
    durationInFrames={250}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A scattered field of dots drifts, then swirls into the first shape, holds with a caption, and morphs through the next shapes until the last one, the wordmark, holds. Pass `shapes` (SVG path data or parts, stroked or filled) and matching `labels`; with the default set it shows three icons then the Remocn wordmark. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `shapes` | `DotShape[]` | `DEFAULT_SHAPES` | Shapes in order after the scattered field; the last one holds. |
| `labels` | `string[]` | `DEFAULT_LABELS` | Optional caption under each shape, same order. Empty string for none. |
| `count` | `number` | `2000` | Number of dots; 1,500 to 2,500 reads as a field. |
| `accent` | `string` | `"#3B5BFD"` | Color of accent-flagged parts of a shape. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |

## Use when
- A feature tour where each capability is an icon formed from dots, ending on your logo.
- A logo reveal that needs a longer build than a single entrance, with labelled stages.
- An abstract intro for a tech or AI product on a dark or light ground.

## Don't use when
- You want birds flying into an arrow and then the mark — use `flock-form`.
- The particles should come from a counter or waitlist — use `waitlist-swarm`.
- You want a quick dissolve of an existing element into particles — use `particle-dissolve`.