Branch Tree

A tree branches level by level from one root into many leaves, then lands the leaf count in big type.

Installation

$ pnpm dlx shadcn@latest add @remocn/branch-tree

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BranchTree } from "@/components/remocn/branch-tree";
 
const BranchTreeScene = () => <BranchTree depth={3} branching={[3, 4, 4]} title="variants" rootLabel="1 component" />;
 
export const RemotionRoot = () => (
  <Composition
    id="BranchTree"
    component={BranchTreeScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

A single root node branches level by level into a growing fan of leaves, then the leaf count lands in large type with a caption. The count is the product of the branching, so 3 by 4 by 4 gives 48. Pass depth (1 to 5), branching as one number or one per level, title for the word after the count, and rootLabel. It ships light and dark through theme.

Props7

Prop	Type	Default
depth	number3 Number of branching levels, from 1 to 5.
branching	number \| number[][3, 4, 4] Children per node; one number, or one per level.
title	string"variants" Word shown after the final leaf count.
rootLabel	string"1 component" Label next to the root node.
accent	string"#3B5BFD" Accent color of the branches and count.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

depthnumber
Number of branching levels, from 1 to 5.
Default3
branchingnumber | number[]
Children per node; one number, or one per level.
Default[3, 4, 4]
titlestring
Word shown after the final leaf count.
Default"variants"
rootLabelstring
Label next to the root node.
Default"1 component"
accentstring
Accent color of the branches and count.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1