Chassis
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.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/chassisManual — install dependencies, then copy the source
npm install motionProps
| 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 to an element and click it on a long seeded 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 all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.