I Built a 42KB Website with Canvas Particles, Live API Status, and an Interactive Terminal

#showdev #css #javascript #webdev

Last night I rewrote my entire website from scratch. No React. No Tailwind CDN. No build step. Just one self-contained HTML file.

Live: yedanyagami.cc

The Stack

1 HTML file (42KB)
0 dependencies
Cloudflare Pages (free tier)
System fonts only

Canvas Particle System

The hero has ~120 particles with mouse repulsion. 80 lines of vanilla JS:

var dx = p.x - mx, dy = p.y - my;
var d = Math.sqrt(dx*dx + dy*dy);
if (d < 100 && d > 0) {
  p.x += dx/d * 1.5;
  p.y += dy/d * 1.5;
}

Live Fleet Status

The site fetches real health data from a production API:

fetch('https://yedan-graph-rag.yagami8095.workers.dev/health')
  .then(r => r.json())
  .then(d => { /* update service cards */ });

CORS enabled (Access-Control-Allow-Origin: *), so it works from the browser.

Interactive Terminal

Users type real commands: help, status, services, benchmark, kg.

Auto-demo starts after 5s idle, any keypress switches to interactive.

Scroll Reveals (20 lines)

.rv { opacity: 0; transform: translateY(28px); transition: opacity .65s ease; }
.rv.vis { opacity: 1; transform: none; }

var ro = new IntersectionObserver(function(es) {
  es.forEach(function(e) {
    if (e.isIntersecting) e.target.classList.add('vis');
  });
}, { threshold: .15 });
document.querySelectorAll('.rv').forEach(function(el) { ro.observe(el); });

Stats (All Real)

Stat	Value
Services	9 active
Benchmark	10/10
Providers	14 cloud
KG Entities	5,600+
MCP Servers	17

Every number verified from live fleet data.

Performance

42KB total
~12KB gzipped
System fonts (zero loading delay)
prefers-reduced-motion respected

Live site: yedanyagami.cc

View source — it's all in one file. If you're building something similar, the interactive terminal and live API fetch are the most interesting parts.

Support the project: ko-fi.com/whitebrookpeterpan

DEV Community