Waitlist Swarm

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

Installation

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

Props9

Prop	Type	Default
shape	string \| SwarmShapePart[]DEFAULT_SHAPE SVG path data to form, or parts where `accent: true` uses the accent.
value	number12480 Final number the counter rolls up to.
label	string"on the waitlist" Caption beside the counter.
count	number760 How many particles form the shape.
accent	string"#3B5BFD" Color of accent-flagged shape parts and the glow.
speed	number1 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.

shapestring | SwarmShapePart[]
SVG path data to form, or parts where `accent: true` uses the accent.
DefaultDEFAULT_SHAPE
valuenumber
Final number the counter rolls up to.
Default12480
labelstring
Caption beside the counter.
Default"on the waitlist"
countnumber
How many particles form the shape.
Default760
accentstring
Color of accent-flagged shape parts and the glow.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.