Iso Dioramas

5 variantsPro

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

illustrationsvgisometric3dherofeature cardempty stateloop

Wallet

wallet.tsx

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

$npx shadcn@latest add @geturui-pro/iso-dioramas-wallet

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.tsx

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

$npx shadcn@latest add @geturui-pro/iso-dioramas-dashboard

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.tsx

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

$npx shadcn@latest add @geturui-pro/iso-dioramas-server-rack

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.tsx

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

$npx shadcn@latest add @geturui-pro/iso-dioramas-inbox

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.tsx

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

$npx shadcn@latest add @geturui-pro/iso-dioramas-calendar

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.

Installs every iso dioramas variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/iso-dioramas

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.