10 components · React · Tailwind · MIT

Components.

Servers, racks, terminals and maps, drawn in code with SVG and CSS (and a canvas for the map’s dots). No images, no animation library: copy a folder from components/ into your project and make it yours.

github.com/bas3line/Components →
  1. 01ServerIsland

    on its own →source →

    An isometric island in contour lines with a server rack on its summit, and label chips hanging off it on dashed wires.

    Drawn in code · SVG and CSS

    A server on an island of its own.

    Contour rings stacked into terraces, a sea that drifts, a boat in the shallows and a rack on the summit. Each chip hangs off its own wire, with a pixel running down it.

  2. 02ServerRack

    on its own →source →

    A rack in isometric line art: one mint server slides out on its rails, with callout cards off it and the roof.

    Server rack

    One server, out on its rails.

    Nine units in isometric line art. The LEDs blink on their own clocks, and the mint one slides out when the rack scrolls into view.

    rack 12 · cage 3uplink 203.0.113.1U6 · ci-runner-038 vCPU · 32 GB · NVMe
  3. 03ScanIsland

    on its own →source →

    A two-unit server on a contour island, with a mint scan that sweeps across it while something is being checked.

    Idle
    U1–U2idle · lights on
    • ssh keys only
    • no request logs
    • disk sealed with LUKS
    <ScanIsland /> · walkers stroll up, LEDs blink slow
    Scanning
    U3–U4reading credential
    • ssh keys only
    • no request logs
    • disk sealed with LUKS
    <ScanIsland scanning /> · one sweep, the contours behind it turn deep mint
  4. 04TypedTerminal

    on its own →source →

    A terminal that plays a scripted session when it scrolls into view: typed commands, output, a masked passphrase, verdicts.

    typed-terminal

    A session that types itself.

    One script, one fixed timeline. It starts when the window scrolls into view, pauses when it leaves, and the badge in the title bar follows the lines that set it.

    command
    typed key by key, then its comment
    output
    printed whole, whitespace kept
    secret
    a prompt, then masked keystrokes
    ok
    a verdict that holds the beat
    rule
    a dashed break between two parts
    › unlocked over SSH, never through the host console
    A terminal session, laptop — ssh: $ ssh -p 2222 root@203.0.113.24 # dropbear, inside the initramfs; $ cryptroot-unlock; Please unlock disk nvme0n1p3_crypt: (12 masked keys); nvme0n1p3_crypt: set up successfully; Connection to 203.0.113.24 closed; $ ssh ops@203.0.113.24 # same host, off its own disk; $ systemctl is-active nginx postgresql; active, active; $ curl -s localhost:8080/healthz; {"status":"ok","db":"up"}; all checks passed.
  5. 05BootChain

    on its own →source →

    A chain of trust as a wiring diagram: inputs onto one bus, then stages with a hash, a chip, a check and a PASS.

    Measured boot

    Check the machine before you hand it a secret.

    Everything that boots folds into one signed digest, and the key goes out only after you check it.

    1. What loadshashed before it runs
      • Firmwarefirmware.fda pinned, reproducible build
      • Kernelvmlinuz-6.12the distro kernel, as shipped
      • Initrdinitrd.imgthe code that opens the disk
      • Cmdlinero ip=dhcpflags, keys, network setup
    2. One digestsigned by the chip
      Boot measurement

      Every byte on the left folds into this value, in order. Swap a kernel or a flag and it comes out different.

      Signed on-chipTPM 2.0 quote

    3. You verify iton a machine you own

      $ attest verify \ --host 192.0.2.10

      • the quote chains to the vendor's root
      • the digest equals your own build
      • the nonce is the one you just sent

      verdictPASS

    4. Then the keyreleased on a pass

      $ ssh unlock@192.0.2.10

      Passphrase for nvme0n1p2: ********

      Volume open. Booting.

      over SSH, never via the host

      If it fails

      Keep the key. Assume the machine is not yours.

  6. 06BladeRack

    on its own →source →

    A pricing table drawn as a rack: every plan is a 1U blade with screws, LEDs, specs, a price and a button.

    Location

    AMSNetherlands

    Amsterdam

    Two halls on separate power feeds, a few milliseconds from most of western Europe.

    Line

    Shared plans burst, dedicated ones keep their cores, GPU ones get a whole card. Each has its own IPv4.

    GPU · A whole card per machine

    Each card is passed straight through to one guest: no time-slicing, no shared partitions. Transfer counts the busier direction only.

    How GPU plans work
    • GPU

      G-24

      start here
      CPU
      8 × EPYC 9354PGPU 24 GB
      Memory
      64 GB DDR5
      Storage
      1 TB NVMe
      Port
      10 Gbps
      Transfer
      20 TBper 30 days

      $148.00 per month

    Standard line · Dedicated and Shared

    • Shared

      S-4

      CPU
      4 × EPYC 9354P
      Memory
      8 GB DDR5
      Storage
      120 GB NVMe
      Port
      1 Gbps
      Transfer
      Unmetered

      $12.80 per month

    • Dedicated

      D-8

      CPU
      8 × Ryzen 9 7950X
      Memory
      32 GB DDR5
      Storage
      500 GB NVMe
      Port
      1 Gbps
      Transfer
      Unmetered

      $54.00 per month

      Out of stock

    3 plans in Amsterdam. 12 across all 3 locations.

    Billed monthly, prorated to the day. Cancel from the panel whenever you like.

  7. 07DotMap

    on its own →source →

    A world map in dots with labelled pins, an enlarged inset, and a guess at the reader's nearest pin from their time zone.

    Dot map

    Nine cities, drawn in dots.

    Hover a marker or a chip. Your time zone picks the nearest city, right here in the browser.

    U1Coverage

    Guessing the nearest pin from your clock…YYZ 43.6°N 79.4°W

  8. 08RackModule

    on its own →source →

    Feature cards drawn as rack units, each with a small animated UI mock-up for a face. Six faces come ready.

    • One token, not four settings

      Host, port, user and key file fold into a single generated token. Paste it once; everything else is looked up.

      config: one token, rotation: on demand, scope: per project

    • Pushed, built, running

      A signed push starts the build. Thirty steps later the address is live in your panel.

      build: about 40 s, rollback: one click

    • Any base image

      Pick a system, press rebuild, and the disk comes back fresh, with ssh or RDP.

      images: 8, login: ssh or RDP

    • Snapshots that prune themselves

      Hourly for a week, daily for as long as you say, weekly after that, then gone. The strip shows what is kept today.

      hourly: 7 days, daily: yours to set, pruning: automatic

    • Debug logs that keep nothing

      Tail them live while you work. Nothing is written to disk, and nothing leaves the machine.

      retention: 0 days, export: off, tail: live

    • An address of its own

      One IPv4 from the block, held for this machine as long as it lives, on a full-rate port.

      ipv4: reserved, ipv6: a /64, port: 1 Gbps

  9. 09WindowRace

    on its own →source →

    Two windows racing from the same start: one types its way to a ready prompt, the other stalls in a long form.

    one command

    ~30s

    From enter to a live address. The defaults are the whole config.

    a console wizard

    stuck at 7 of 11

    Name, billing, region and network go in. Then a quota form, and days of waiting for someone to approve it.

    ~/app — zsh, New deploy: $ deploy ./app; project created quiet-river-2048, named for you; rename it any time; Node 22 · 1 vCPU · 512 MB · nearest region, read from package.json; build finished · 214 kB; live at 203.0.113.7, about 30s after you pressed enter; $ curl -sI 203.0.113.7/health; HTTP/2 200 · healthy; $ deploy env set DB_PASSWORD; value: 8 masked keys, encrypted at rest, never echoed back; release 2 live · zero downtime. It ends at a ready prompt, ops@quiet-river:~$. console.example/projects/new, Create a project: a form with 11 required fields, Project name, Billing email, Organisation, Region, Instance type, Network, Firewall rules, Quota increase (upload), Load balancer, DNS records, Monitoring. It fills the first 7, then stops at Quota increase (upload), pending. Stopped for a quota approval. It can take up to three business days.
  10. 10NotchButton, Kicker

    on its own →source →

    The notched button and the pixel kicker label the other components are built with.

    On paper
    pinkperi
    On night
    mintpink