# Chaos to Order
URL: https://remocn.dev/docs/product-scenes/chaos-to-order

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

- Install: `npx shadcn@latest add @remocn/chaos-to-order`
- Vibe: tech
- Natural length: 98f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark palette |

## Use when
- A problem-then-solution opener: too many tools and tabs, then one organized workspace.
- A project-management or consolidation product where everything-in-one-place is the pitch.
- A beat where an unread counter and clutter build tension before a clean reveal.

## Don't use when
- The chaos is only notifications on a phone — use `notification-avalanche`.
- You want a wireframe that resolves into the finished UI — use `wireframe-to-final`.
- You want a calm tour of a finished screen — use `screenshot-tour`.