Living material network

A miniature synthetic market. Sites appear, materials find a match, and the network finds its balance.

$bunx shadcn@latest add @nx-ui/uk-material-network

Registry item

Installs withuse-background-clockutils

The playground

Explore the material network and adjust the simulation controls.

Nexus / Material intelligenceSynthetic · UK

07 / A living system

A country in constant exchange.

Every surplus is a possibility.
Every connection moves us forward.

＋ Import requirement− Export surplus✓ Fulfilled

Active sites

Loads in transit

Fulfilled

Waiting

Reduced motion · still frame00:45 / 10:00

A steady rhythm of imports, exports and fairness rounds.

Network seed

Fair-share rebalancingMatch material classes

Two illustrative classes: soil and aggregate (corner dot). Matching uses class and straight-line proximity within each landmass. Rebalancing prioritises waiting sites on future dispatches.

Network site limit40

New-site interval3s

Import share50%

Major-project chance20%

Matching reach280

Fleet capacity24

Load payload5

Transit pace12

Regional clustering70%

Rebalance interval18s

Model time 00:45

Scrub to replay the same world · 1-second steps

Simulation speed2×

Loop the 10-minute scene

1× = one model second per real second. Looping restarts the seeded scene.

Illustrative simulation, not a forecast. Volumes are synthetic units; the original UK silhouette and curved links are not geographic boundaries or road routes. No live data, cost, carbon, compliance or real-world optimality claims. Starved sites may remain waiting when no compatible supply is reachable.

Use the network in your UI

import { useState } from "react"
import { UKMaterialNetwork } from "@/components/blocks/uk-material-network/uk-material-network"

export function NetworkBackground() {
  const [paused, setPaused] = useState(false)
  return <div className="relative min-h-[640px] overflow-hidden bg-primary text-primary-foreground">
    <UKMaterialNetwork seed={42} paused={paused} rebalance speed={2} />
    <button className="relative z-10" onClick={() => setPaused(v => !v)}>
      {paused ? "Play" : "Pause"}
    </button>
  </div>
}
// animated={false}: static fallback. Reduced motion stops automatic playback.
// Supply time={seconds} for deterministic scrubbing; own the accessible clock.
// The bundled market.ts exports the pure simulation and timeline helpers.

API reference

Exported parts and their props, extracted from the component source.

Prop	Type	Default	Description
`timeline`	`MarketFrame[]`	—	Optional shared precomputed timeline. Otherwise computed from market props.
`time`	`number`	—	Controlled model seconds. Caller owns playback/reduced-motion when supplied.
`animated`	`boolean`	`true`	—
`paused`	`boolean`	`false`	—
`speed`	`number`	`1`	Model seconds per wall-clock second, 1–32. Also bounds pulse pace with controlled time.
`initialTime`	`number`	`45`	Static fallback and starting position, in model seconds.
`loop`	`boolean`	`true`	—
`opacity`	`number`	`.85`	—
`importColor`	`string`	`"#94c8ac"`	—
`exportColor`	`string`	`"#d89895"`	—
`showMap`	`boolean`	`true`	—
`showGrid`	`boolean`	`true`	—
`showRoutes`	`boolean`	`true`	—
`showLoads`	`boolean`	`true`	—
`showPressure`	`boolean`	`true`	—
`showLabels`	`boolean`	`false`	—
`showCompletion`	`boolean`	`true`	—
`tilt`	`number`	`.2`	Graphic oblique projection, 0–1. Not geographic coordinates.
`siteScale`	`number`	`1`	Site glyph scale, 0.5–2.
`curvature`	`number`	`.25`	Decorative path curvature, 0–1. Lines are NOT road routes.
`zoom`	`number`	`1`	Composition zoom, 0.6–1.6.
`className`	`string`	—	—

…extends Partial<MarketConfig>

Living material network

The playground

A country in constant exchange.

API reference

UKMaterialNetwork22 props