About Overscan
Overscan is a UI kit for building interfaces that look like instruments: control panels, dashboards, telemetry screens, the kind of display that reports on a machine.
It is a set of web components and a stylesheet. You put a tag in your HTML and you get a gauge, a chart, a radar sweep, a terminal. It works in plain HTML, and there are thin wrappers for React, Vue and Svelte. There is no build step and nothing to install alongside it.
Getting it running
One stylesheet and one module. Everything registers itself.
<link rel="stylesheet" href="overscan.css">
<script type="module" src="overscan.js"></script>
<ov-gauge value="72" min="0" max="100" label="core"></ov-gauge>Pick a theme by setting one attribute on any container. Everything inside it changes, including the animated background.
<div data-ov-theme="industrial"> ... </div>The one idea worth knowing
A readout never invents a number it was not given. If a display is handed a value it cannot show honestly, it shows that it cannot, rather than showing something close. A four-digit readout handed five digits does not drop one. A chart with a hole in its data breaks the line instead of drawing through it. A table that draws 40 of 50,000 rows says so on its face.
That sounds obvious and mostly is not done. It is the reason the kit exists, and every component is built to it. There are exactly four things a readout is allowed to say when it has to decline, and it says them on its face.
Themes are mechanisms, not palettes
The 10 themes differ on six axes, not just colour: border weight, depth, corner treatment, type, motion, and the shader that paints the background. The same panel is a genuinely different object in each one, which is why swapping a theme is never just a recolour. See all 10 side by side.