kit

Every component in the design system, rendered live. Type sits on a 1.5rem baseline grid; one line is six spacing units.

every line-height is a whole multiple of --lh, so vertical rhythm never drifts

text-4xlarda-sys.dev
text-3xlarda-sys.dev
text-2xlarda-sys.dev
text-xlarda-sys.dev
text-lgarda-sys.dev
text-basearda-sys.dev
text-smarda-sys.dev
text-xsarda-sys.dev
ascii punctuation$ > # → ← ↑ ↓ · • …
box drawing U+2500─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ ═ ║ ╔ ╗ ╚ ╝
block elements U+2580█ ▉ ▊ ▋ ▌ ▍ ▎ ▏ ▀ ▄ ░ ▒ ▓ ▁ ▂ ▃ ▅ ▆ ▇
geometric U+25A0■ □ ▪ ▫ ▲ △ ▶ ▷ ▼ ▽ ◀ ◁ ● ○ ◆ ◇
braille U+2800⠁ ⠃ ⠇ ⠏ ⠟ ⠿ ⡿ ⣿ ⣷ ⣯ ⣟ ⢹
tiling (no letter-spacing — corners must meet)
┌──────────┬──────────┐
│ ▁▂▃▄▅▆▇█ │ ░▒▓█▓▒░  │
└──────────┴──────────┘
$ measuring…
a command linea forward linka back linka root shellprogram outputwith a blinking cursor 
src/
├── components
│   ├── ascii
│   │   └── ascii-canvas.tsx
│   ├── terminal
│   │   └── prompt.tsx
│   └── ui
├── lib
│   ├── ascii.ts
│   └── shaders.ts
└── styles
    └── globals.css
framework
next 16.2.11
typeface
jetbrains mono
baseline
1.5rem
palette
monochrome
radius
0
18%62%100%
requests/s▁▃▁▄▅▃▇▅▂▆█▄▂▆
activewiparchived2026
  1. 00:12:03[ info ]resolving dependencies
  2. 00:12:04[ ok ]compiled 9 routes
  3. 00:12:05[ warn ]unused export in braille-loader.ts
  4. 00:12:05[ fail ]no test runner configured
build.log
npm run build
  ✓ Compiled successfully in 1226ms
  ✓ Generating static pages (9/9)

all of this stops under prefers-reduced-motion

▓▒░ arda-sys.dev ░▒▓ a personal site and a pile of small browser experiments ░▒▓
whoami && cat /etc/motd

composition slots, same border + corner-glyph construction as the header island. Pass href to make the whole card a link — hover lifts the border and slides the arrow. The frame recolours through className and cornerClassName.

linked card

wip
The whole box is a single link. Footers use mt-auto, so they line up across a row even when the bodies differ in length.
2026open

static card

archived
Without href it renders an article and drops the hover states.
2025

coloured frame

accent
Border recolours through className, corners through cornerClassName. Both defaults are plain utilities, so tailwind-merge lets the hover states be replaced too.
2026open

wraps anything and rotates it toward the pointer on a spring, with a slight lift. Children pass straight through, so they stay server-rendered. Stops entirely under prefers-reduced-motion.

default

8°
Peak rotation of 8 degrees with a 1.02 lift.

strong

16°
max=16 and lift=1.05 for a heavier throw.

flat

5°
lift=1 drops the scale — rotation only.

asciifyText is a pure string transform — server-rendered, zero client JS. `fit` sizes the art to exactly span its container.

WebGL2 fragment shaders sampled per frame into the ASCII converter — no three.js. Move the pointer over one.

plasma
tunnel
flow
torus
kaleidoscope
fire
mandelbrot
ripple
terrain
spiral
voronoi
metaballs
defaultoutlinesecondary⌘K
Loading
Loading
Loading
namestatuscommits
world-wide-clicker[wip]42
ascii-kit[live]118
morph-bg[archived]7