# Waitlist Swarm
URL: https://remocn.dev/docs/social/waitlist-swarm

Cursors and avatar dots swarm in from the edges to form a logo while a waitlist counter rolls up

- Install: `npx shadcn@latest add @remocn/waitlist-swarm`
- Vibe: social
- Natural length: 115f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/waitlist-swarm
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WaitlistSwarm } from "@/components/remocn/waitlist-swarm";

const WaitlistSwarmScene = () => (
  <WaitlistSwarm value={12480} label="on the waitlist" count={760} />
);

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

Hundreds of dots and cursors fly in along curved paths from beyond the frame and settle into the outline and fill of a shape, while a counter climbs to `value` beside it with a `label`; a pulse ripples out when the last one lands. Pass `shape` (SVG path data, or parts with an `accent` flag) to swap the default R mark. Ships dark and light via `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `shape` | `string \| SwarmShapePart[]` | `DEFAULT_SHAPE` | SVG path data to form, or parts where `accent: true` uses the accent. |
| `value` | `number` | `12480` | Final number the counter rolls up to. |
| `label` | `string` | `"on the waitlist"` | Caption beside the counter. |
| `count` | `number` | `760` | How many particles form the shape. |
| `accent` | `string` | `"#3B5BFD"` | Color of accent-flagged shape parts and the glow. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the animated ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground shader parameters. |

## Use when
- A waitlist or community milestone where many people arrive and assemble into your logo.
- A launch-day beat that pairs a growing signup number with a shape formed from particles.
- A teaser that wants a big count ("12,480 on the waitlist") tied to a visual of many users.

## Don't use when
- The shape should morph through several icons before the logo — use `dot-field-morph`.
- You only need the number rolling up, with no swarm — use `rolling-number`.
- The focus is live collaboration cursors moving around a screen — use `multiplayer-cursors`.