Cell Divide

$ pnpm dlx shadcn@latest add @remocn/cell-divide

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { CellDivide } from "@/components/remocn/cell-divide";
 
const CellDivideScene = () => <CellDivide generations={6} label="×2 every week" />;
 
export const RemotionRoot = () => (
  <Composition
    id="CellDivide"
    component={CellDivideScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A single dot divides in two, then four, then eight, each division morphing like a cell and the grid of dots growing smaller as it fills, with the count rolling beside it. After the last division the cells pulse in a wave and a caption with an accent dot sits under the number. Pass generations from 2 to 7 and label. The length shown is for the default of 6 generations. It ships light and dark through the theme prop.