MOTIONSTASH
Log inSign up

Diagrams

Components
6
Documented props
28
Total runtime
42s
Licence
MIT · free

Diagram components are explainer devices: an architecture flow that connects labelled nodes, a packet dot flow that sends dots along those connections, a layer stack that explodes into its tiers, and a checklist that ticks item by item.

Use these when the subject is a system rather than an interface. The flow and packet components take their nodes and edges as typed data, so the diagram and its animation stay in sync when the architecture changes.

All Diagrams components

Architecture Flow — A system diagram assembles column by column, with orthogonal connectors that only draw once both of their endpoints exist

Architecture Flow

Diagrams

A system diagram assembles column by column, with orthogonal connectors that only draw once both of their endpoints exist

Checklist Tick — The whole list arrives first to set the scope, then each item ticks in turn with the one overshoot this library allows

Checklist Tick

Diagrams

The whole list arrives first to set the scope, then each item ticks in turn with the one overshoot this library allows

Doodle Card Stack — Hand-drawn marker cards drop into a stack bottom row first, each outline wobbled off true by its own seed9:16

Doodle Card Stack

Diagrams

Hand-drawn marker cards drop into a stack bottom row first, each outline wobbled off true by its own seed

Layer Stack Explode — An isometric stack separates plate by plate and holds as a labelled architecture diagram, with leader lines waiting for their layer to settle

Layer Stack Explode

Diagrams

An isometric stack separates plate by plate and holds as a labelled architecture diagram, with leader lines waiting for their layer to settle

Packet Dot Flow — Requests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly

Packet Dot Flow

Diagrams

Requests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly

Sticker Hub Diagram — A hub-and-spoke diagram on graph paper where each edge wires out from the centre and lands its node as it arrives

Sticker Hub Diagram

Diagrams

A hub-and-spoke diagram on graph paper where each edge wires out from the centre and lands its node as it arrives