Chaos to Order

Scattered windows, notes and toasts drop in, then snap into an organized issue tracker.

Installation
$ pnpm dlx shadcn@latest add @remocn/chaos-to-order

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChaosToOrder } from "@/components/remocn/chaos-to-order";
 
const ChaosToOrderScene = () => (
  <ChaosToOrder
    items={["#launch-war-room", "Inbox", "Payment failed", "Standup in 2 min"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ChaosToOrder"
    component={ChaosToOrderScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Windows, sticky notes and toast alerts drop onto the screen while an unread counter races up, then everything is pulled to the center and replaced by a clean issues tracker window. Pass items to relabel the chaos pieces in drop order, and children to replace the tracker with your own product window. Ships dark by default and light.

Props5

PropTypeDefault
items
string[]DEFAULT_ITEMS

Labels for the chaos pieces, in drop order

children
React.ReactNode—

Your own product window shown after the snap; defaults to an issues list

accent
string"#3B5BFD"

Accent color for highlights, buttons and progress

speed
number1

Playback speed multiplier for the whole timeline

theme
"light" | "dark""dark"

Light or dark palette

  • itemsstring[]

    Labels for the chaos pieces, in drop order

    DefaultDEFAULT_ITEMS

  • childrenReact.ReactNode

    Your own product window shown after the snap; defaults to an issues list

  • accentstring

    Accent color for highlights, buttons and progress

    Default"#3B5BFD"

  • speednumber

    Playback speed multiplier for the whole timeline

    Default1

  • theme"light" | "dark"

    Light or dark palette

    Default"dark"