Chaos to Order
Scattered windows, notes and toasts drop in, then snap into an organized issue tracker.
$ pnpm dlx shadcn@latest add @remocn/chaos-to-orderUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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
Default
DEFAULT_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
Default
1 - theme"light" | "dark"
Light or dark palette
Default
"dark"