# Push to deploy

An animated isometric shadcn/ui scene for hosting and devtools sites: git push on a terminal sends a pulse down a cable to a dashboard that builds and goes live.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Hosting and deployment platform sites; Developer tools explaining git-based workflows; CI/CD and preview environment feature sections; Developer onboarding and docs landing pages
- **Category:** Technology · **Type:** Scenes · **Style:** Gradient, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/push-to-deploy) · [Screenshot](https://www.craftui.space/llms.md/preview/push-to-deploy.702fb07a.jpg)

![Push to deploy](https://www.craftui.space/llms.md/preview/push-to-deploy.702fb07a.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/push-to-deploy.json
```

This is a paid item (ISO-RPVRYG): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import PushToDeploy from "@/components/isometric/push-to-deploy";

export default function Page() {
  return <PushToDeploy />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. |
| `accent` | `IsoTone` | — | Colour of lit details (status, build bar, the pulse). Defaults to `tone`. |
| `variant` | `IsoVariant` | `"ink"` | Flat ink drawing (default), soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `ink` 0.3 is a 1.3 px outline at any size; rims or outlines elsewhere. |
| `project` | `string` | `"acme-web"` | Project name on the dashboard and in the terminal, up to about 14 characters. |
| `domain` | `string` | `"acme.com"` | Production domain, up to about 14 characters. |
| `branch` | `string` | `"main"` | Branch pushed, up to about 8 characters. |
| `commit` | `string` | `"Update pricing page"` | Commit message on the new deployment, up to about 28 characters. |
| `buildTime` | `string` | `"24s"` | Build time shown when it's ready, e.g. "24s". |
| `command` | `string` | `"git push"` | Command typed in the terminal, up to about 24 characters. |
| `screen` | `ReactNode \| ((state: DeployScreenState) => ReactNode)` | — | Your own UI inside the dashboard instead of the built-in one: any React node, or a function of the story's state (`step` and the copy) so your UI follows the push. It renders at 472 × 236 CSS px (the screen is 11.8 × 5.9 units at 40 px per unit) and is projected into the scene; the terminal and the cable still play. |
| `autoPlay` | `boolean` | `true` | Play when the scene scrolls into view. Off shows the live end state. |
| `loop` | `boolean` | `true` | Replay after a pause. Off plays once and holds the end state. |
| `replayOnClick` | `boolean` | `true` | Clicking the scene replays the story. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the scene: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `built-in demo content` | How far it turns, in degrees: a number for both ways, or [min, max]. Default [-12, 30]: further toward the dashboard than away from it, so the copy stays readable. Each side is capped at 40. |
| `grid` | `boolean` | `true` | Dashed construction grid on the floor. |
| `grain` | `boolean` | `false` | Film grain over the scene (off in ink). |
| `title` | `string` | — | Accessible description. Without it the scene is decorative. |
| `className` | `string` | — | Classes for the wrapper; size the scene with width (it keeps its aspect ratio). |

### `DeployScreenState`

| Field | Type | Description |
| --- | --- | --- |
| `step` (required) | `"idle" \| "pushed" \| "building" \| "ready" \| "live"` | "idle", "pushed" (command sent), "building", "ready", "live". |
| `project` (required) | `string` | Project name. |
| `domain` (required) | `string` | Production domain. |
| `branch` (required) | `string` | Branch pushed. |
| `commit` (required) | `string` | Commit message of the new deployment. |
| `buildTime` (required) | `string` | Build time shown once ready. |

## Files

The install adds:

- `components/isometric/push-to-deploy.tsx`
- `components/isometric/iso-core.tsx`

npm dependencies (installed for you): `motion`.