# Iso Dioramas

> Small isometric dioramas on a gridded slab with quiet looping motion: floating, blinking, dropping and lifting.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/iso-dioramas
- Install: `npx shadcn@latest add @geturui-pro/iso-dioramas`
- Dependencies: motion

## Variants

### Wallet

A wallet with two floating cards and coins dropping onto a stack beside it.

Install: `npx shadcn@latest add @geturui-pro/iso-dioramas-wallet`

```tsx
import { IsometricWallet } from "@/components/illustrations/iso-dioramas/wallet";

export function WalletIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <IsometricWallet className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (four seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Dashboard

A wall chart draws itself, floor bars breathe and a donut floats overhead.

Install: `npx shadcn@latest add @geturui-pro/iso-dioramas-dashboard`

```tsx
import { IsometricDashboard } from "@/components/illustrations/iso-dioramas/dashboard";

export function DashboardIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <IsometricDashboard className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (four seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Server rack

Racks blink in sequence, packets run along a floor cable and data cubes float up.

Install: `npx shadcn@latest add @geturui-pro/iso-dioramas-server-rack`

```tsx
import { IsometricServerRack } from "@/components/illustrations/iso-dioramas/server-rack";

export function ServerRackIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <IsometricServerRack className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (three seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Inbox

Envelopes drop into an open tray and the unread badge bounces as each one lands.

Install: `npx shadcn@latest add @geturui-pro/iso-dioramas-inbox`

```tsx
import { IsometricInbox } from "@/components/illustrations/iso-dioramas/inbox";

export function InboxIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <IsometricInbox className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (3.4 seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Calendar

Event tiles lift one after another on a calendar block next to a floating clock.

Install: `npx shadcn@latest add @geturui-pro/iso-dioramas-calendar`

```tsx
import { IsometricCalendar } from "@/components/illustrations/iso-dioramas/calendar";

export function CalendarIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <IsometricCalendar className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (4.5 seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.