machines-ui · 76 components

Graphs, animation, diagrams — and the machine that runs them.

Svelte components drawn with characters, not pixels: dashed frames, block glyphs, monospace sugar. From a KPI in a paragraph to a full workflow builder, one library.

pnpm add @fractaldesign/machines-ui

Docs Open the builder Examples

[ BOOT ]

  load glyphs       [▰▰▰▰▰▰▰▰▰▰]   ~0.2s  ✓
  mount 76 components[▰▰▰▰▰▰▰▰▰▰]   ~0.4s  ✓
  wire the flow     [▰▰▰▰▰▰▱▱▱▱]   …
  ready             [··········]   …
  ──────────────────
  total             4/4 passed   3.5s / 5.3s  ✓

from cold to live

What’s in the box

6 Frame The dashed character frame every graph sits in.32 Graphs Stats, charts, tables and timelines drawn with glyphs.30 Animated Terminals, rain, fire and live readouts.6 Diagram Flows, trees and system diagrams.2 Flow Nodes, edges and the canvas of the workflow builder.

Live, not screenshots

[ CHECKOUT ]

747 0

▒▓▓▓█ ▒▒▓▓▓█ ▒▒▓▓▓█ ▒▒▓▓▓█ ▒▒▒▓▓█ ▒▒▒▓▓█ ▒▒▒▓▓█ ▒▒▓▓█ ▒▒▓▓█ ▒▒▓▓█ ▒▒▓▓█ ▒▒▓▓█ ▒▒▒▓▓█ ▒▒▒▓▓█ ▒▒▒▒▓▓█ ▒▒▒▒▓▓█ ▒▒▒▒▓▓█ ▒▒▒▒▓▓█ ▒▒▒▓▓▓█ ▒▒▓▓▓█ ▒▒▓▓▓█ ▒▒▓▓▓█ ▒▓▓▓█ ▒▒▓▓▓█ ▒▓▓▓▓█ ▒▒▓▓▓▓█ ▒▒▓▓▓▓█▒▒▒▓▓▓▓█▒▒▒▓▓▓▓█▒▒▒▓▓▓▓█

09:00 09:30

p50: 95ms
p95: 424ms
p99: 747ms
peak p99: 747ms
spikes: 2

[ API ]

█████████████████████████████████▒██████████████

up slow down

98%

nowlast check 0s ago

[ RPM ]

        █              █              █     
      ██▒█           ██▒█           ██▒█    
    ██▒▒▒▒█   █    ██▒▒▒▒█   █    ██▒▒▒▒█   
  ██▒▒▒▒▒▒▒█ █▒  ██▒▒▒▒▒▒▒█ █▒  ██▒▒▒▒▒▒▒█ █
 █▒▒▒▒▒▒▒▒▒▒█▒▒ █▒▒▒▒▒▒▒▒▒▒█▒▒ █▒▒▒▒▒▒▒▒▒▒█▒
█▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▒▒▒▒▒▒▒▒

[ FURNACE ]

                                    
                                    
                                    
                                    
                                    
▓▓▓▓▓▓▓▓▒▓▓▓▒▒▓▓▓▓▒▒▒▒▒▓▓▒▒▒▒▓▓▓▓▓▓▓
▓▓▓▓▓█▓▓▓▓▓▓▓█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▓▒▓▓▓
█▓▓▓▓█▓▓▓█▓██▓▓█▓▓▓▓▓▓▓▓▓▓▓█▓▓█▓▓▓▓▓
██████▓████▓███▓██████▓█▓████████▓██
████████████████████████████████████

simulated fire

[ RAIN ]

   p   x   ia ░ 1 n▒ e  7   p   j 6l
   l   8   7s jmj █f u  u   w   q xz
   ▒   9n  u0 bll  f a  7   u   w ai
   q   vc  w▒ g7v  3 █  l   p q y ██
   █   lf  uk cl0  p    a   y u █   
       ░l  █j █h█  █    █   █ 4     
       █k   1  1              w  k  
  d     g   █  5              3  9  
  z     v      7              f  z  
  ▒     1      █             ░░  v

glyph rain

[ LIFE ]

██     █  ██  █     █ ███   █        ██  ██ 
        ██  █  █      █          █          
   ███   █    █     █   █ █         █   █   
██  █████  ██               ██      █       
             █      █    ██     █          █
  █      ██       █        ██ ██ █ █  █  ██ 
  █ █   █    ██      ██  █ █   █ ███ ██     
█ █   █  █ ██               █     █     █   
 █       █  █ █    █ ██  ██         █ █     
              ██ █ █   ██    █  ███ █ █     
 █       ██ █ █ █      ███  █  ██   █       
            █  █    █  ██ █                 
          █  █       █ █       ██ █     ██  
█ █  █   ██ █  ██       █    ███   █      ██

gen 000 · pop 152

[ COMMITS ]

NovDecJanFebMarAprMayJunJulAugSepOct

MWF

···█·░·

░░·░░··

▒··░█░░

·░░░░▒░

░█▒░█░·

░·░██░·

░·░░·░·

░·····░

░·░░░▒·

·▒···░░

░░░░▒█▒

░·░··░░

▒░▒░░░░

·▒·░░░░

█▒█░░·█

▒░▒·░░█

·░██░░░

·░█·░█·

·░·░·░░

··█░▒·▒

▒·░···▒

····░▒·

·░░▒·░░

░·░█░·░

░░░░···

·░·▒░··

█░░▒···

·░▒·▒░·

█░·░·░░

▒░░··░·

█░··▒░░

··▒·░·░

░░░░·░▒

·▒░·░░·

░░░·░░░

··░··░░

·░··██▒

····█··

·░█░░░░

·░·░░░·

░░░▒···

▒░····░

··░░···

▒··▒░░·

░░··░·░

·░█··▒▒

···░░░·

░░▒▒·░▒

░·░·░··

··▒░░░·

···░·░░

░·░···▒

░··▒░▒·

·······

1061 contributions across 371 days

[ FLEET ]

[ OK ] api  ·  [ WARN ] db-lag 2.1s

the builder

Workflows on a canvas

Nodes, ports and routed edges, with a run log, an inspector and ten ready-made flows: an agent router, JSON to Markdown, an LLM wiki and more. Every node is a component you can also use on its own.

Open /creator

[ FLOW ]

[ Trigger ]

Done

Prompt submitted

A prompt reaches the router.

Run Agent Running

Jev classifies the prompt

How complex is this request?