The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (IsoHub) or composed from primitives.

WebBetaLayout

Web only — React, from @krizaka/ui/iso. Beta: its API may still change in a minor version.

When to use

The hero illustration of a product or marketing page: what the product is, drawn as one object with two to four satellites.
To show a flow toward or out of something (requests into a server, support toward a creator) with values written on it.
An architecture teaser where a diagram would be too much: one object per layer, named on hover and focus.

When not to use

For a real architecture or data flow the reader must study: draw a schema with a text version.
As the background of a section: the light, the dome and the grid of a backdrop are lighter.Use instead: Section backdrop
More than one per screen: the hero object is unique, the rest of the page stays calm.

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { IsoHub, IsoScene, IsoPrism, IsoStack, IsoDome, IsoTile, IsoLink, IsoNode, IsoLabel } from "@krizaka/ui/iso";

Examples

Sovereign servers (Orazaka)

Three named stages under a dome, a lit core; chats and documents flow in, answers flow out. Hover or tab to explore.

Support toward a creator (Orochia)

The creator in the centre, tips, unlocks, auctions and challenges flowing toward them, their amounts on the links, 90 % pinned above.

Composed by hand

The primitives — scene, links, dome, prisms, node, tiles — painted back to front with an entrance order.

Still frame

animated={false}: the composed picture prefers-reduced-motion shows.

Props

IsoDome

A dome of light over what it protects: a rim on the floor, a glass arc, a sheen that travels along it. Draw its rim before the objects it covers and the dome after them (part="rim", part="arc"), or let IsoHub do it.

Prop	Type	Default	Description
`animated`	`boolean`	`true`	Motion: a sheen travels along the dome. `false` keeps it still.
`at`	`Vec2`	`[0, 0]`	Its centre on the floor plan.
`height`	`number`	`250`	Its height.
`label`	`string`	—	Its name ("Your infrastructure") — passed translated; shown at the top of the dome, always.
`part`	`"both" \| "rim" \| "arc"`	`both`	`rim` (the floor ellipse, drawn first), `arc` (the glass, drawn last) or `both`.
`radius`	`number`	`158`	The radius of its rim on the floor.

IsoHub

The hero, driven by data: a stack under an optional dome, satellites on both sides, a flow of light between each satellite and the centre. Objects are painted back to front and the camera frames exactly what is drawn.

Prop	Type	Default	Description
`layers`required	`readonly IsoLayer[]`	—	The hero object in the centre: its stages, bottom first.
`angles`	`readonly number[]`	—	The angle of each satellite, in degrees (0: lower right, 90: lower left, 180: upper left, 270: upper right), to place them by hand.
`animated`	`boolean`	`true`	Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.
`core`	`string \| boolean`	`true`	A lit core on top of the stack; a string names it.
`description`	`string`	—	A longer text version of what the scene shows, read by assistive technology.
`dome`	`string \| boolean`	—	A dome over the centre: `true`, or its name ("Your servers").
`extent`	`number`	`240`	Half the size of the floor, in world units: what the camera frames.
`grid`	`boolean`	`true`	The perspective grid on the floor, fading into the page.
`highlight`	`{ readonly strong?: string; readonly text: string; }`	—	A label pinned above the centre, its first part in the accent: `{ strong: "90 %", text: "to the creator" }`.
`label`	`string`	—	The accessible name of the scene ("A server stack under a dome") — passed translated. Without it the scene is decorative.
`radius`	`number`	`210`	The distance of the satellites from the centre.
`satellites`	`readonly IsoSatellite[]`	`[]`	The objects around the centre, joined to it by flows of light. The first half stands on the left, the rest on the right, top to bottom: never in front of the hero, never hidden behind it.
`shape`	`IsoShape`	`cut`	The footprint of the stages.
`size`	`number`	`120`	The width of the stages.
`step`	`number`	`40`	The spacing of the grid's lines.
`top`	`number`	`260`	Height above the floor the camera keeps in view, in world units.

IsoLabel

A label in a pill, always visible, pinned to a point of the scene (a share, a name).

Prop	Type	Default	Description
`at`required	`Vec2`	—	Where, on the floor plan.
`text`required	`string`	—	The text — passed translated.
`strong`	`string`	—	A first part in the accent, bolder ("90 %" before " to the creator").
`z`	`number`	`0`	Its height.

IsoLink

A dotted link on the floor, light flowing along it and particles crossing it — a flow between two objects.

Prop	Type	Default	Description
`from`required	`Vec2`	—	Where it starts, on the floor plan.
`to`required	`Vec2`	—	Where it ends, on the floor plan.
`animated`	`boolean`	`true`	Motion: the flow and the particles. `false` draws them still, resting along the link.
`direction`	`"in" \| "out"`	`out`	Which way the light flows: `out` from `from` to `to`, `in` back.
`duration`	`number`	`3.6`	Seconds a particle takes to cross it.
`label`	`string`	—	A value written on it ("90 %", "Tips") — passed translated.
`particles`	`number`	`2`	Particles of light travelling along it (0: only the dashes flow).
`route`	`"elbow" \| "straight"`	`elbow`	`elbow` follows the floor's axes, like a circuit; `straight` goes directly.
`z`	`number`	`0`	The height it runs at.

IsoNode

The Krizaka node: a point of light in the accent, breathing in its glow.

Prop	Type	Default	Description
`animated`	`boolean`	`true`	Motion: the glow breathes. `false` keeps it still.
`at`	`Vec2`	`[0, 0]`	Where, on the floor plan.
`glow`	`number`	`70`	The radius of its glow (0: none).
`index`	`number`	`0`	Its rank in the entrance.
`r`	`number`	`7`	The radius of the node.
`z`	`number`	`0`	Its height.

IsoPrism

A vertical prism — hexagonal, cut-corner or rectangular — that stacks with others on z.

Prop	Type	Default	Description
`height`required	`number`	—	Its height.
`animated`	`boolean`	`true`	Motion: entrance and loops. `false` keeps this object still.
`at`	`Vec2`	`[0, 0]`	The centre of its footprint on the floor plan (x, y).
`className`	`string`	—	Extra classes on the object's group.
`cut`	`number`	—	The size of the 45° cut (`shape="cut"`); a sixth of the smaller side by default.
`index`	`number`	`0`	Its rank in the entrance: objects rise into place one after the other.
`label`	`string`	—	The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable.
`material`	`IsoMaterial`	`base`	How it is lit.
`shape`	`IsoShape`	`cut`	hex · cut (45° cut corners) · rect.
`size`	`number \| Vec2`	`120`	Its width (a number: square or hexagon's diameter) or width × depth.
`strip`	`boolean`	—	A dotted light strip around its front (the LEDs of a server), blinking slowly.
`z`	`number`	`0`	The height of its base above the floor.

IsoScene

The stage: an isometric camera over a perspective grid that fades into the page. Its animations pause off screen and wait for the page to settle (MotionObserver); everything stops under prefers-reduced-motion.

Prop	Type	Default	Description
`animated`	`boolean`	`true`	Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.
`children`	`ReactNode`	—	The objects, painted in order: put the farthest first (or use `IsoHub`, which sorts them).
`description`	`string`	—	A longer text version of what the scene shows, read by assistive technology.
`extent`	`number`	`240`	Half the size of the floor, in world units: what the camera frames.
`grid`	`boolean`	`true`	The perspective grid on the floor, fading into the page.
`label`	`string`	—	The accessible name of the scene ("A server stack under a dome") — passed translated. Without it the scene is decorative.
`step`	`number`	`40`	The spacing of the grid's lines.
`top`	`number`	`260`	Height above the floor the camera keeps in view, in world units.

IsoStack

A stack of stages on a plinth with a lit core on top — a server, a model, a pile of layers — driven by data.

Prop	Type	Default	Description
`layers`required	`readonly IsoLayer[]`	—	The stages, bottom first; they stack one after the other at the entrance.
`animated`	`boolean`	`true`	Motion: entrance and loops. `false` keeps the stack still.
`at`	`Vec2`	`[0, 0]`	The centre of the stack on the floor plan.
`core`	`string \| boolean`	`true`	A lit hexagonal core on top, its node glowing; a string names it.
`gap`	`number`	`4`	The space between two stages.
`index`	`number`	`0`	The rank of the first stage in the scene's entrance.
`plinth`	`boolean`	`true`	A hexagonal plinth under the stack.
`shape`	`IsoShape`	`cut`	The footprint of the stages.
`size`	`number`	`120`	The width of the stages.

IsoTile

A satellite: a thin cut-corner tile that floats beside the hero object, a pictogram on its top.

Prop	Type	Default	Description
`at`required	`Vec2`	—	Its centre on the floor plan.
`animated`	`boolean`	`true`	Motion: entrance and loops. `false` keeps this object still.
`className`	`string`	—	Extra classes on the object's group.
`float`	`boolean`	`true`	It floats gently.
`glyph`	`IsoGlyph`	`none`	The pictogram on its top.
`index`	`number`	`0`	Its rank in the entrance: objects rise into place one after the other.
`label`	`string`	—	The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable.
`material`	`IsoMaterial`	`accent`	How it is lit.
`size`	`Vec2`	`[76, 52]`	Width × depth.
`z`	`number`	`90`	The height it floats at.

Accessibility

A named scene is a group with its label and its description (<desc>); an unnamed one is decorative (aria-hidden).
Each named object is an image (role="img") named by its label and focusable; the drawn labels are decorative copies.
Under prefers-reduced-motion (and with animated={false}) the scene is a composed still frame: objects in place, light resting along the links — not an animation cut halfway.
Server-rendered static SVG, no client JavaScript; with MotionObserver mounted its loops pause off screen and wait for the page to settle.

Keyboard

Keys	Action
`Tab`	Visits each named object of the scene: it lifts and shows its label, as under the pointer.

Best practices

Start with IsoHub: stages, satellites and a highlight are data; the hub places satellites on both sides (never in front of the hero, never hidden behind it) and frames exactly what it draws.
Name the scene (label) and say in description what it shows; name the objects (label) to make them explorable with the pointer and the keyboard — leave everything unnamed for a purely decorative scene.
Put the scene in a brand (.brand-<id>): the light, the core and the flows follow the accent, in both themes.
Composing by hand: paint back to front, and number the entrance with index so objects rise in a meaningful order.
Pass words translated: labels, values on links, the highlight.

Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Iso