Engine flow

An engine at the hub and the apps it serves around it, with what travels between them: photons going in (requests) and coming back (results) along each conduit — radial on a wide screen, top to bottom on a phone, planned apps dim and still.

Web · ✓Mobile · n/aDesktop · ✓BetaData display

import { EngineFlow } from "@krizaka/ui/engine-flow";

Orazakathe engine

Yomizaka Reads the lease and checks each passage. dev.yomizaka.com

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

Mobile · n/a. A diagram of a public site's page; an app screen lists the same facts. → List

Why it is here. Used by krizaka.com.

When to use

Showing one platform and the products built on it, in one glance: « one engine, the products it powers ».
Saying which way data goes per app — in, back, or both — only where it really runs; what is planned is drawn planned.

When not to use

A sequence of steps a reader follows in order.Use instead: Stepper
Entry points to pages, where the cards are the content.Use instead: Card grid
A chart of figures over time.

Installation

Install

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

Styles

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

Import

import { EngineFlow } from "@krizaka/ui/engine-flow";

Examples

One engine, the products it powers

Radial on a wide screen: both ways where results come back, planned products dim and still.

Orazakathe engine

Yomizaka Reads the lease and checks each passage. dev.yomizaka.com

On a phone

Top to bottom: the products in a row above, flowing down into the engine; the detail line names the chosen one.

Orazaka

Yomizaka Requests in, results back.

Calm, for a small frame

Sparse photons at a low rate and a slow breath, no hint and no detail line; still under reduced motion and Save-Data.

Orazaka

Props

An engine at the hub and the apps it serves, with what travels between them.

Prop	Type	Default	Description
`hub`required	`EngineFlowHub`	—	The engine, at the hub.
`label`required	`string`	—	What the figure shows ("Orazaka and the products it powers"), passed translated.
`nodes`required	`readonly EngineFlowNode[]`	—	The apps around it.
`breathe`	`boolean`	`true`	The engine's mark swells slowly (a loop, still under reduced motion).
`calm`	`boolean`	`false`	The calm level, for a small frame (a tile of a home page): sparse photons at a low rate, a slow breath, no hint and no detail line, nothing to tune. It plays only on screen and once the page has settled, and stays still under reduced motion and Save-Data. Overrides `speed`, `density`, `stagger` and `trigger`.
`compactLayout`	`false \| FlowLayout`	`top-to-bottom`	The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.
`conduit`	`FlowConduit`	`bezier`	The conduits' shape.
`defaultActive`	`string`	—	The node shown in the detail line at first.
`density`	`FlowDensity`	`normal`	How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.
`easing`	`FlowEasing`	`linear`	The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any CSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).
`hint`	`ReactNode`	—	The detail line before a node is chosen ("Point at a product").
`layout`	`FlowLayout`	`radial`	How the nodes sit around the hub.
`particles`	`"none" \| "photons"`	`photons`	`photons` travel the conduits; `none` draws them still.
`speed`	`number`	`16`	Photon speed, in units per second (the stage is 100 units wide).
`stagger`	`number`	`300`	Milliseconds between one conduit's photons and the next's: 0 sends them all together.
`trigger`	`FlowTrigger`	`always`	When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the conduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they are always paused, and still under reduced motion.

Accessibility

The drawing (conduits, photons) is hidden from assistive technology; each node is a button named by its label, aria-pressed when chosen.
The detail line is a polite live region: pointing at or focusing a node announces its line.
Motion is CSS (motion.css): paused off screen (MotionObserver), held while the page settles, a still frame under reduced motion. No animation frame, no canvas.
calm plays only on screen and once the page has settled, and rests under reduced motion and Save-Data.
The stage keeps its aspect ratio and the detail line its height: no layout shift.

Keyboard

Keys	Action
`Tab`	Goes through the nodes, then the link of the detail line.
`Enter / Space`	Chooses the node: the detail line says its description and its link.

Best practices

Give each node its brand scope (className="brand-<id>") and the figure the hub's: photons going in wear the app's colour, those coming back the engine's.
Draw only what runs: flow="both" where results really come back, planned (with a status word) where nothing is wired yet.
Keep a text version (a list) in the page; give each node a one-line description and its href.
Tune the stream, not the story: density (sparse · normal · dense), speed, easing, stagger, and trigger (always, hover, active) change how the photons travel, never what the figure claims; breathe={false} keeps the engine still.
In a small frame (a tile of a home page) use calm: sparse photons at a low rate and a slow breath, no hint and no detail line, nothing to tune; wrap the figure in an inert box if it should not take focus.
Five to eight nodes: radial reads at a glance; on a phone the default compactLayout puts them in a row above the hub.

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