**Sci-fi screens that actually work.**
The screens in science-fiction films are motion graphics: beautiful, and
showing nothing real. Overscan is that look, built like a real instrument.
Custom elements and a CSS layer for control panels, dashboards and telemetry,
ten dark themes, no build step required.
Real instruments say "no reading" instead of making one up, mark a value that
is old or typed in by hand, and draw the thing they measure. So do these.
Every screen is built from kit elements only. All ten are at
[overscan.dev/screens](https://overscan.dev/screens).
## Install
With a bundler:
```
npm i overscan
```
With a script tag, no install and no bundler:
```html
```
No bare specifier ships in the source, so a browser resolves every element from
that one URL. It is the whole kit, one request per module: point it at
`src/ov-chart.js` instead to take a single element. It must be
`type="module"`; a classic script tag will not load it.
## Use it
Any element can be imported on its own, which is the smallest thing that works:
```js
import "overscan/chart";
import "overscan/overscan.css";
```
```html
```
The element keeps the `ov-` prefix, because that is its name in the DOM and a
custom element name must contain a hyphen. The import does not: inside a
package called `overscan`, the prefix says nothing the specifier has not said
already. `overscan/chart.js` and `overscan/ov-chart.js` both work too, for
anyone typing what they see in a file listing.
### Without a build step
An import map resolves the same elements in a browser with no bundler. Use the
file's real name here: an import map cannot do what `exports` does. A map key
ending in `/` has to map to an address ending in `/`, so a prefix cannot supply
the `ov-`, and nothing in a map can supply the `.js`.
```html
```
Or take the whole kit in one import:
```js
import "overscan";
```
That is every element and every helper, each its own module. A bundler folds
them into one file, but with no build step it is one request per module, so a
page that uses three instruments should import three. The CSS has no per-element split yet:
link `overscan/overscan.css` whichever route you take. It is one file of
`@import`s that the browser caches once, and loading only part of it is not
supported until something proves each element renders the same that way.
The one exception is the media player. Its styles are 9 KB that a page without
a player should not load, so they are not in `overscan.css`, and a page with
`` imports them as well:
```js
import "overscan/overscan.css";
import "overscan/src/player.css";
import "overscan/src/player-icons.css";
```
Every import registers a custom element as a side effect, which is why this
package lists every element module and stylesheet under `sideEffects`. A
bundler told otherwise will tree-shake the kit away and leave a page of tags
that never upgrade. The framework wrappers are the exception: each component
imports only its own element, so in a production build a wrapper you never
import costs nothing.
No framework is required. React, Vue and Svelte wrappers are generated from the
same manifest and shipped alongside:
```js
import { OvChart } from "overscan/react";
```
TypeScript definitions are included.
## Themes
Themes are token sets, applied with one attribute on any ancestor:
```html
…
```
Ten dark themes ship: terminal, industrial, cyber, antiseptic, esper, neo,
machina, holo, aegis and vector. They differ in more than colour: type,
furniture, bevel depth, alarm hue and the shader field behind them.
## Density
The other kit-wide attribute, set the same way, on any ancestor.
**An instrument shows its visual content and nothing else, by default** — the
face, the reading, the unit that reading is in, and anything it is refusing or
qualifying. What it does not show is the supporting prose: the element's own
name, the footnote restating the rules it is judging by, the hint line. A wall
writes the name and the rules once above twenty instruments, and twenty
instruments repeating them is noise rather than rigour.
To opt back in, for a single instrument on a page of its own where there is no
wall to carry the name:
```html
