Dot Sort
Dots sort into rows by group, the logo row largest at 41%
$ pnpm dlx shadcn@latest add @remocn/dot-sortUsage
// src/Root.tsx
import { Composition } from "remotion";
import { DotSort } from "@/components/remocn/dot-sort";
const DotSortScene = () => (
<DotSort
highlight={0}
groups={[
{ label: "remocn", value: 41 },
{ label: "Kitebase", value: 23 },
{ label: "Lumen", value: 17 },
{ label: "Other", value: 19 },
]}
/>
);
export const RemotionRoot = () => (
<Composition
id="DotSort"
component={DotSortScene}
durationInFrames={150}
fps={30}
width={1280}
height={720}
/>
);Four hundred dots start in a cloud, then sort into rows by group; the highlighted row gets the gradient, the rest dim, and its percentage and caption land. Pass groups (label and value) and highlight, the index of the hero group. Ships dark and light via theme.
Props6
| Prop | Type | Default |
|---|---|---|
| groups | DotSortGroup[]DEFAULT_GROUPS Groups the dots sort into, each with a label and value. | |
| highlight | number0 Index of the hero group. | |
| caption | string— Line under the percentage; defaults to a choose line. | |
| accent | string"#3B5BFD" Accent color for the hero element. | |
| theme | "dark" | "light""dark" Dark or light palette. | |
| speed | number1 Playback multiplier. | |
- groupsDotSortGroup[]
Groups the dots sort into, each with a label and value.
Default
DEFAULT_GROUPS - highlightnumber
Index of the hero group.
Default
0 - captionstring
Line under the percentage; defaults to a choose line.
- accentstring
Accent color for the hero element.
Default
"#3B5BFD" - theme"dark" | "light"
Dark or light palette.
Default
"dark" - speednumber
Playback multiplier.
Default
1