# Workflow trigger

An isometric shadcn/ui scene for automation and AI sites: an event lands in one app, ink flows along dashed lanes through an AI step, and the other app reacts.

> 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:** Workflow automation and integration platform sites; AI agent and assistant feature sections; Explaining triggers, actions and app integrations; No-code and ops tooling landing pages
- **Category:** Technology · **Type:** Scenes · **Style:** Gradient, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/workflow-trigger) · [Screenshot](https://www.craftui.space/llms.md/preview/workflow-trigger.980850f4.jpg)

![Workflow trigger](https://www.craftui.space/llms.md/preview/workflow-trigger.980850f4.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/workflow-trigger.json
```

This is a paid item (ISO-EP9ZS9): 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 WorkflowTrigger from "@/components/isometric/workflow-trigger";

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

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. The AI step, the ink and the checks. |
| `accent` | `IsoTone` | — | Colour of lit details. Defaults to `tone`. |
| `events` | `WorkflowEvent[]` | `built-in demo content` | The events, in the order they fire, one per cycle. Each lands in one app and the workflow acts in the other. Default: a new email from Acme Inc. posts a summary to #sales, then a /follow-up in #sales sends Acme Inc. an email. |
| `variant` | `IsoVariant` | `"soft"` | Soft gradient drawing with a tinted outline (default), flat ink, soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `soft` 0.3 is a 1 px outline at any size (1.3 px in `ink`). |
| `autoPlay` | `boolean` | `true` | Plays while in view, one event per cycle, looping. Off shows the first event finished. |
| `grid` | `boolean` | `false` | Dashed construction grid on the floor. |
| `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]. |
| `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). |

### `WorkflowEvent`

| Field | Type | Description |
| --- | --- | --- |
| `from` (required) | `"mail" \| "chat"` | The app the event lands in ("mail" or "chat"); the workflow acts in the other one. |
| `event` (required) | `string` | What happened, up to about 14 characters ("New email"). |
| `detail` (required) | `string` | Where or from whom, up to about 10 characters ("Acme Inc."). |
| `result` (required) | `string` | What the workflow did, up to about 14 characters ("Summary posted"). |
| `resultDetail` (required) | `string` | Where it did it, up to about 10 characters ("#sales"). |

## Files

The install adds:

- `components/isometric/workflow-trigger.tsx`
- `components/isometric/iso-core.tsx`

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