# World Signups
URL: https://remocn.dev/docs/product-scenes/world-signups

A dotted world map pings signup locations next to a rolling signup counter and live feed

- Install: `npx shadcn@latest add @remocn/world-signups`
- Vibe: data
- Natural length: 175f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/world-signups
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WorldSignups } from "@/components/remocn/world-signups";

const WorldSignupsScene = () => (
  <WorldSignups title="Signups around the world" startCount={12847} accent="#3B5BFD" />
);

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

A dotted world map fades in as signup pings land on their cities one by one, heating the map while a counter rolls up, the feed lists each new user and a top-countries strip fills in. Pass `signups` (name, city, country, lon, lat, plan and the frame `at`), `startCount`, `countries`, `title` and `counterLabel` to make it yours. It ships light and dark through `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 |
|---|---|---|---|
| `signups` | `Signup[]` | `DEFAULT_SIGNUPS` | Signup events with city, coordinates, plan and the frame they land at. |
| `startCount` | `number` | `12847` | Counter value before the first signup lands. |
| `countries` | `CountryStat[]` | `DEFAULT_COUNTRIES` | Top countries listed under the map, with counts. |
| `title` | `string` | `"Signups around the world"` | Heading of the window. |
| `counterLabel` | `string` | `"Signups today"` | Label next to the rolling counter. |
| `delta` | `string` | `"+18.2% vs. yesterday"` | Change text shown beside the counter. |
| `theme` | `"light" \| "dark"` | `"light"` | Visual theme; ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and controls. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Preset id for the gradients.sh background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader parameters of the chosen ground. |

## Use when
- A growth beat showing signups arriving from cities around the world in real time.
- A traction slide where a rolling counter and a live feed prove global adoption.
- A launch-day recap that needs a dotted world map lighting up as users join.

## Don't use when
- You want a single metric chart stepping through stages, not a map — use `analytics-funnel`.
- The beat is a general stats dashboard with a chart and activity list — use `live-dashboard`.
- You need a metric counting up in huge type with no map — use `row-count`.