Copy-paste HUD & mecha-anime micro-interactions — vanilla JS, no dependencies.
Composed reference panels — several modules combined in one frame to show how the primitives stack. Not copy-paste units; no snippet.
Title + dotted rule + cycling kanji headline (stays kanji start to finish, no rolling into Latin text) + barcode + pulse. Two animated elements (headline, pulse dot); hover the frame — corner brackets pull apart.
Same title/divider/barcode/pulse primitives, different centerpiece — a live-jittering rolling number instead of the glyph headline. Shows how one primitive set recombines into a different module.
Bouncing equalizer bars — pure CSS keyframes, JS only randomizes each bar's duration/delay once so they bounce out of phase. Paired with a pulse indicator.
Rotating conic-gradient sweep + two pulsing blips — entirely CSS, no JS involved in the animation itself.
Types each command out, holds, backspaces, then moves to the next — blinking cursor, static "$" prompt rendered via CSS ::before so it's never touched by the typing DOM updates.
Falling kana/kanji columns, adapted from a CodePen digital-rain reference — a fading brightness trail sweeps down a static character grid while ~40% of glyphs flicker independently.
Two SVG sine-wave layers scrolling in opposite directions at different speeds (pure CSS, no JS). The Hz readout runs live like Telemetry's number, with the pulse badge anchored at the bottom.
A heartbeat icon (double-beat "lub-dub" scale animation) inside a 4-corner scan-target box, next to a live BPM readout. Three vitals bars grow/shrink with a real pause between beats, not a continuous bounce.
Static Arabic text (متصل — "connected") with a breathing glow pulse instead of decode-scramble, plus an English status line underneath that types/backspaces through CONNECTED, INITIALIZING..., UPLOADING... Paired with a globe icon + label and a live counter.
Ascending-height bars ticking to a new random "strength level" every couple seconds, plus live-jittering download/upload bandwidth readouts with directional arrow icons.
T-minus digit readout with a fast-ticking milliseconds sub-counter next to it — a new "countdown" mode added to the rolling-number primitive alongside count/loop, run at two different speeds.
Fingerprint icon + glyph-decode line cycling "SCANNING.../ACCESS GRANTED", plus a tiny verbose log line typing through hash/signature/match status underneath — shows how primitives recombine into a security module.
A fixed line of hex characters where a random few flicker to a new value every ~150ms — a live data-feed texture, distinct from the deliberate typing of Console or the falling columns of Cipher.
A circular dial with a rotating needle — pure CSS, no JS at all — next to a live degree readout. Same rotation trick as the Radar module's sweep.
Segmented battery cells run a charge/discharge loop (fill, hold, drain, hold) next to a live percentage readout.
A pulsing crosshair icon next to live-jittering lat/long coordinate readouts (the rolling-number primitive's non-digit characters render as static separators, so ".") + a locked pulse badge.
Dot-matrix world map scrolling endlessly sideways. The bitmap spans a full 360 degrees of longitude, so the loop is seamless by geography rather than by trick. Land is one box-shadow per hemisphere; the ocean grid is a background, so the whole map is two DOM nodes.
Semicircular arc gauge with a needle and a warning threshold. One SVG path animated by stroke-dashoffset, so the sweep is a property change rather than a redraw. The only module that uses the secondary accent, which every theme defines and nothing else shows.
A sparkline that gains a point and scrolls left, forever. Redrawn from a fixed-length buffer rather than translated, so the line never leaves its own viewBox and needs no clip or mask. The only plotted-over-time shape in the library.
A short task list whose rows advance WAIT to RUN to OK, one at a time and in order, then reset. A queue that drains and refills reads as work being done; rows flipping at random just read as noise.
Three satellites travelling elliptical tracks at different periods. Every other round module in the library spins in place — Radar turns a sweep, Compass turns a needle — this is the only one where something moves along a path. CSS Motion Path does the travel, so there is no JavaScript: each dot follows the exact path string its visible track is drawn from, which means the two can never drift apart.
A wireframe sphere turning about its vertical axis, with five real station coordinates riding the surface and fading out as they pass behind. Rotating about Y is the cheap axis for a sphere: a point's latitude never changes, so the whole spin is one addition to its longitude. Depth is opacity, not hidden-surface removal — the far side of the cage stays visible, which is what a HUD wants. Only the projection is 3D-aware, and it knows nothing about spheres: swap the vertex generator and the same renderer draws a torus or a lattice.
A node graph with a packet walking one link at a time. Everything else in the library shows a magnitude, a coordinate, a stream of characters or a list of rows — this is the only one that shows a relationship between things. The walk refuses to return to the node it just came from unless that node is a dead end; without that rule the packet ping-pongs across a single edge within seconds and the graph stops reading as a network.
OHLC candlesticks in pips, with the right-most bar still forming — its close moves every tick while its high and low only ever extend, which is what a real forming candle does. Trend plots one number over time; a candle carries four and a direction, and that direction is why this is the first module to use the theme's secondary accent as a peer of the primary rather than as a warning state. Each new bar opens at the previous close, so the series has no gaps.
Globe's renderer with one thing swapped — the vertex generator — which is the point: the projection is not about spheres. It tumbles rather than spins because a torus is rotationally symmetric about its own axis, so rotating it there is mathematically correct and visually motionless. That is also why this one needs a real rotation matrix where Globe needed only to add an angle to a longitude.
An artificial horizon, and the exact inverse of Compass: there a needle moves inside a fixed dial, here the world pitches and rolls behind a fixed aircraft mark. Pure CSS, no JavaScript. The horizon plane is twice the size of the dial that clips it, so no angle of bank can ever swing a corner into view. The readout is altitude rather than bank angle on purpose — a number that contradicts the picture is worse than no number.
A credential record — the only module shaped like a set of fields rather than a magnitude, a coordinate or a stream. The identity itself is fixed, because a badge whose name keeps changing is not identifying anything; what moves is the verification — the swatch re-scrambles, the clearance line decodes, and a scan line crosses the whole record. It is also the home for the mosaic primitive, which until now belonged to no module.
A cumulative order book: two mirrored staircases meeting at the mid price, bids running left and asks running right, each the running total of size resting at that level or better. The curve is rebuilt by accumulation on every tick rather than nudged from the previous frame, which is what guarantees both sides stay monotonic — a cumulative total that dips would describe a book that cannot exist. Market plots price over time; this plots liquidity at an instant.
A single frame combining pieces pulled from six different modules — glyph-decode (Status), signal bars (Signal), compass (Compass), battery (Power), heartbeat + BPM (Biometric), barcode (Status/Telemetry) — to see whether a denser "dashboard" composition still holds together in one panel.