Dot Sort

Dots sort into rows by group, the logo row largest at 41%

Installation
$ pnpm dlx shadcn@latest add @remocn/dot-sort

Usage

tsx
// 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

PropTypeDefault
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.

    DefaultDEFAULT_GROUPS

  • highlightnumber

    Index of the hero group.

    Default0

  • 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.

    Default1