# Chassis — Animated Data Visualization for React

> A code-built browser or app-card window whose interior is a living dashboard instead of a screenshot: on scroll-in, skeleton shimmer bars resolve into real KPI tiles, a live sparkline strip, and activity rows — each panel snapping in with a one-frame brightness kiss, top-left to bottom-right — then quiet idle life keeps it breathing: the sparkline streams, a number re-rolls, a ghost cursor drifts in and clicks. Stage any children through the exported ChassisPanel boot wrapper.

- Page: https://crucibleui.com/components/data/chassis
- Category: [data](https://crucibleui.com/components/data)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/chassis
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/chassis`.

## Props (`ChassisProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant?` | `ChassisVariant` | `"browser"` | Window frame: full browser chrome, or a bare app-card shell. |
| `address?` | `string` | `"app.example.com/overview"` | Address-bar text (browser variant). |
| `trafficLights?` | `boolean` | `true` | Show the three traffic-light dots (browser variant). |
| `tabs?` | `string[]` | — | Optional tab row above the address bar (browser variant). Omit for no tabs. |
| `activeTab?` | `number` | `0` | Index of the highlighted tab when `tabs` is set. |
| `boot?` | `boolean` | `true` | Run the boot sequence: skeleton shimmer bars that resolve into the real content, staggered top-left to bottom-right, once the window scrolls into view. `false` renders the interior fully resolved. |
| `bootStagger?` | `number` | `0.11` | Seconds between each panel's resolve during boot. |
| `shimmerSpeed?` | `number` | `1` | Skeleton shimmer sweep speed multiplier (higher = faster). |
| `idleLife?` | `boolean` | `true` | Quiet idle life after boot: the sparkline strip streams, a KPI number occasionally re-rolls, and the cursor ghost makes its rounds. |
| `idleIntensity?` | `number` | `1` | How busy the idle life is, `0`–`2`. Scales event frequency; `0` disables idle life entirely. |
| `cursorGhost?` | `boolean` | `true` | Drift a ghost cursor along seeded curved paths across the interior and click on a long loop. |
| `tilt?` | `number` | `0` | Static 3D presentation tilt in degrees (perspective `rotateY(-tilt)` with a matching half-strength `rotateX`). Not animated. |
| `edgeMask?` | `boolean` | `false` | Fade the bottom of the window into the page with a gradient mask. |
| `seed?` | `number` | `7` | Seed for all idle-life timing, ghost paths, and demo data. |
| `colors?` | `ChassisColors` | — | Shell + skeleton + ghost palette. Interior data components keep their own accents. |
| `paused?` | `boolean` | `false` | Freeze everything: resolved interior, no boot, no idle life. |
| `label?` | `string` | — | Accessible description, e.g. "Product dashboard preview". Without it the whole window is decorative (`aria-hidden`). |
| `children?` | `React.ReactNode` | — | Custom interior. Wrap regions in `<ChassisPanel>` to give them the skeleton-to-resolve boot treatment. Omit for the built-in preset dashboard. |

Also accepts: `React.ComponentPropsWithoutRef<"div">`.

## Usage example

```tsx
import { Chassis } from "@/components/crucible/chassis";

export default function ChassisDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div className="relative z-10 w-full max-w-xl px-6 py-8">
        <Chassis address="app.example.com/overview" />
        <p className="mt-4 text-center text-[11px] font-medium uppercase tracking-[0.2em] text-neutral-500">
          Watch it boot — skeletons resolve into live data, then look again: quiet idle life keeps it breathing
        </p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.