Beeswarm

Two dot swarms, before and after, settle on an axis showing 3.4 versus 10.6

Installation

$ pnpm dlx shadcn@latest add @remocn/beeswarm

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Beeswarm } from "@/components/remocn/beeswarm";
 
const BeeswarmScene = () => (
  <Beeswarm
    count={200}
    domain={[0, 14]}
    axisLabel="launch videos shipped per quarter"
    totalLabel="200 teams"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Beeswarm"
    component={BeeswarmScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A pour of dots falls onto an axis as one grey swarm, then splits into a before group and an after group that slide to their medians and label themselves. Pass before and after as groups (label, median, spread), count of dots, and the axis domain and axisLabel. Ships dark and light via theme.

Props10

Prop	Type	Default
before	BeeswarmGroupDEFAULT_BEFORE Starting group with a label, median and spread.
after	BeeswarmGroupDEFAULT_AFTER Improved group with a label, median and spread.
count	number200 Number of dots in the swarm.
domain	[number, number][0, 14] Axis range as a minimum and maximum.
tickStep	number2 Spacing between axis ticks.
axisLabel	string"launch videos shipped per quarter" Caption under the axis.
totalLabel	string"200 teams" Label on the full swarm before it splits.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

beforeBeeswarmGroup
Starting group with a label, median and spread.
DefaultDEFAULT_BEFORE
afterBeeswarmGroup
Improved group with a label, median and spread.
DefaultDEFAULT_AFTER
countnumber
Number of dots in the swarm.
Default200
domain[number, number]
Axis range as a minimum and maximum.
Default[0, 14]
tickStepnumber
Spacing between axis ticks.
Default2
axisLabelstring
Caption under the axis.
Default"launch videos shipped per quarter"
totalLabelstring
Label on the full swarm before it splits.
Default"200 teams"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"