World Signups

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

Installation

$ pnpm dlx 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.

Props11

Prop	Type	Default
signups	Signup[]DEFAULT_SIGNUPS Signup events with city, coordinates, plan and the frame they land at.
startCount	number12847 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	number1 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.

signupsSignup[]
Signup events with city, coordinates, plan and the frame they land at.
DefaultDEFAULT_SIGNUPS
startCountnumber
Counter value before the first signup lands.
Default12847
countriesCountryStat[]
Top countries listed under the map, with counts.
DefaultDEFAULT_COUNTRIES
titlestring
Heading of the window.
Default"Signups around the world"
counterLabelstring
Label next to the rolling counter.
Default"Signups today"
deltastring
Change text shown beside the counter.
Default"+18.2% vs. yesterday"
theme"light" | "dark"
Visual theme; ships light and dark.
Default"light"
accentstring
Accent color for highlights and controls.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Preset id for the gradients.sh background shader.
groundParamsPartial<GradientParams>
Overrides for the shader parameters of the chosen ground.