machines-ui
Glyph-drawn graphs, animated terminals, diagrams and the frame primitives they share. Every page below is generated from the component source: props, defaults and types are read from the code, and every example is the live component.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphKpi } from '@fractaldesign/machines-ui';Coverage
76 components
76 with live preview
514 / 514 props described
frame
Frame The dashed character frame every graph sits inside: a caption on the top edge, corner glyphs, and optional marching-ant, pulse, scan, or hover-draw motion.FrameBody The content region inside a graph frame, with optional compact spacing for dense layouts.FrameRule A horizontal dashed rule that spans the frame, for separating sections inside a FrameBody.Arrow Dashed arrow between flow nodes. `stretch` spans the available row.Tick One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered.Track Horizontal track that spans the frame. Use for graphs that represent a range (meter, stack, bullet, rank) — pair with GraphTick so ticks flex edge to edge. Packed graphs (spark, bars, cells, uptime) should not use tracks.
graphs
Activity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.Bars Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.Bullet A bullet chart: each row lays an actual value against an optional target along a ticked track, with the value shown at the right.Calendar A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.Cells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.Compare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through, with an optional accented column.Countdown Time left until a date.Diff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.Flow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes for what trails it.Funnel A proportional funnel showing labeled stages, values, and their relative widths.Gantt A character-based timeline that positions task bars across a shared track and can show progress.Heatmap A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels and an optional less/more legend.Invoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.Kpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.Latency Percentile band chart. Each column is stacked: the p50 fill (█) at the bottom, then p50→p95 (▓), then p95→p99 (▒). Spike markers appear above columns whose point sets `spike: true`.Meter Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.Plot A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale on the left and optional end labels on the x axis.Quota Quota usage bar: used against a hard limit, with reset date and an end- of-window projection. Billing-style: surfaces the headline figure, the "X of Y" copy, and pace so a customer can see whether they will run out.Rank Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the formatted value on the right.Slo Error-budget burn bar. One fill for spent, a dim trail for the remaining budget, plus window, burn rate, time-to-empty, target, and actual. Pairs with GraphLatency, GraphUptime, and GraphPulse.Slope A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with rising rows accented.Spark Packed 1ch sparkline, centered with a small gap. Never stretched.Spec A labeled specification list with optional accent styling on individual values.Stack One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.Stat A row of two to four large figures with labels, each optionally hinted and accented.Table A framed data table with a rule under the header and an optional footer row for totals.Timeline A vertical timeline of dated events, each marked as done, now or next and linked by a rail.Timer A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.Tree An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and an optional accent, and a single root is drawn without branches.Uptime A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.Waffle Share grid of ~100 cells; filled cells carry the accent.Waterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.
animated
Agni An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed, and cooling.Aum An Aum (ॐ) figure drawn in terminal glyphs, inked in stroke by stroke and then rippled by a resonance wave that travels the stroke order before settling.Boot An animated boot/deploy run in ASCII: each step fills a progress bar, shows its ETA, and lands on a ✓ or ✗, with a summary row that totals the whole run.Cron A live, character-based preview of a cron schedule, showing matching minute and calendar positions.Damru A damru (hourglass drum) drawn in ASCII, pulsing in place through the eight beats of Adi tala.Deps A dependency tree drawn with ASCII branch lines, cascading package by package and showing each name with its version tag.Diya A row of diyas that light one by one and then breathe, drawn as character-art candle flames over a dark gutter; purely decorative.Fire A looping character-art fire animation with adjustable dimensions, cooling, and speed.Flame A flame graph drawn in ASCII, cycling which leaf of the call tree is lit as the hot path.FlowPlayer Plays through an ordered list of process steps, typing on the active step's label and revealing its detail while the finished steps stay marked.Ganga Three stepped river lines cascading down the frame while a lit diya rides the bottom flow; purely decorative.Hash A character-art hashing animation that transforms an input string into a changing digest.Japa A mala (prayer-bead ring) drawn in ASCII, with a marker travelling bead by bead around the circle.Life Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail.Mandala A lotus mandala drawn in terminal glyphs, blooming outward ring by ring and then slowly rotating.Mandel ASCII Mandelbrot with a slow cinematic zoom into seahorse valley.Pulse A live health strip: a window of blips — ok, degraded, or down — appended at a fixed interval, newest on the right, like a heartbeat of a service.Rain A looping character-art rain animation with adjustable trails and dimensions.Scatter An ASCII scatter plot: x/y points mapped onto a grid, with optional accent points and a linear-trend strip.Scope An oscilloscope window that scrolls a data series leftwards, drawing each column as a line or as an area filled down to the baseline.Sequence An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request messages flowing between them in order and activations marking who is busy.Spinners A framed text spinner with built-in or custom frames and an optional loading label.State A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing transition highlighted.Stream A live sparkline with the current value in large type, appending a new reading on an interval and counting time since the last one.Surya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely decorative.Terminal A terminal session that types prompt lines and streams output, with optional looping animation.Ticker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.Typewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.Workflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them, and a step-through that walks a path and lights each node as active or done.ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and scroll, hover or loop triggers.
diagram
AmplifierDiagram An ASCII amplifier: a small calm wave goes in, a gain slider scales it, and a large wave comes out — a metaphor for what AI does to your effort, with a live dB readout.AsciiDiagram Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of titles, arrows, and corners.DiagramEditor An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.MetricsTableDiagram An ASCII ledger of cost: one row per tool with its call count and time, and a totaled summary row at the bottom.NestedRadiiDiagram An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values be dragged.PromptLoopDiagram An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and connector as the cycle advances.
flow
FlowNode A flow node in two looks: `frame`, our dashed character frame, and `card`, the rounded tinted card of the flow editor. Both take the shared props and show every value; the frame also takes its own dash, movement and corner props, which a card cannot be given. A header, a body, connection ports on any side, and a status with its own colour. It needs no canvas, so it works on any page; a canvas can place it and link it to others.FlowCanvas The node canvas on its own: pan and zoom, drag to connect nodes, an actions panel to add steps, an inspector for the selected node, undo and redo. Takes no props; state lives in the exported `flow` store. Needs a container with an explicit height.