Galton Stack

Dots fall through a Galton board into a bell curve, marked at 95%

Installation

$ pnpm dlx shadcn@latest add @remocn/galton-stack

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GaltonStack } from "@/components/remocn/galton-stack";
 
const GaltonStackScene = () => (
  <GaltonStack count={260} label="95% of renders under 2s" markerLabel="2s" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GaltonStack"
    component={GaltonStackScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

Dots fall through a field of pegs into bins and stack into a bell curve, then the camera settles on a marker line and the label lands. Pass count of dots, marker (0 to 1 across the bins) and its markerLabel, plus a label for the claim. Ships dark and light via theme.

Props7

Prop	Type	Default
count	number260 Number of falling dots, from 20 to 600.
marker	number0.733 Marker position across the bins, from 0 to 1.
label	string"95% of renders under 2s" Claim shown with the marker.
markerLabel	string"2s" Short tag on the marker line.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

countnumber
Number of falling dots, from 20 to 600.
Default260
markernumber
Marker position across the bins, from 0 to 1.
Default0.733
labelstring
Claim shown with the marker.
Default"95% of renders under 2s"
markerLabelstring
Short tag on the marker line.
Default"2s"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1