▶ Live demo — the interactive playground, in your browser. ⚡ Try it now: Svelte · React · Vue — editable StackBlitz starters, no install.

Glowing retro display components: a generic 3D LED-grid display — an nx×ny×nz lattice of glowing "LEDs" you draw on like a tiny 3D canvas, rendered in WebGL and orbitable (auto-spin + drag + zoom) — plus four 2D-canvas cores: a nixie tube, a seven-segment digit, an electromechanical flip-dot board (discs physically rotate, and click), and a split-flap (Solari) display (flap cards fall from a drum, and clack). All ship as framework-agnostic cores plus thin framework wrappers you install into any SPA.

Live demos: https://eetu.github.io/glowbox/ — a spinning torus, a strange attractor, a voxelized X-wing model, a wave field, a GIF billboard, a text ticker, rain, a wormhole fly-through, and a self-playing 3D Pac-Man, plus a nixie-tube clock — flat 2D tubes or a 3D wire-cathode-in-glass scene — on the /nixie route, an ageing seven-segment clock on /seven, a flip-dot board with a solenoid rattle on /flipdot, and a split-flap departures board — with chroma image drums, matrix rain, snake and pong — on /splitflap.

Five rendering cores — the 3D LED grid (@glowbox/led-grid), the nixie tube (@glowbox/nixie), the seven-segment display (@glowbox/seven-segment), the flip-dot board (@glowbox/flip-dot) and the split-flap display (@glowbox/split-flap) — and each framework package (svelte/react/vue) ships a thin component for all of them (<LedGrid> + <NixieTube> + <SevenSegment> + <FlipDots> + <SplitFlap>). @glowbox/extras layers content (GIF/image animation, text, audio bands) on the core's draw API, and @glowbox/crt is the first effects layer — slap a curved phosphor screen over any of them (or any canvas at all).

<script lang="ts">
	import { LedGrid } from '@glowbox/svelte';
	import type { LedDisplay } from '@glowbox/led-grid';

	const draw = (d: LedDisplay) => {
		d.clear();
		d.sphere([4, 4, 4], 3, '#00aaff'); // Color: CSS string or [r,g,b] 0..1 (>1 blooms)
	};
</script>

<LedGrid
	size={[8, 8, 8]}
	{draw}
	led={{ glow: 3, offColor: '#0a0a12' }}
	camera={{ autoOrbit: true, projection: 'perspective' }}
	color={{ background: '#000', gain: 1.1 }}
	interaction={{ zoom: true }}
/>

The same component ships for React and Vue with the same props (instance access follows each framework's idiom: an oncreate callback in Svelte, a forwarded ref in React, an expose()d handle in Vue). Colours, glow, LED size, stagger (brick lattice), camera, projection, zoom, pause and more are all customizable via grouped options (led color camera interaction quality) that update live, and the voxel API draws line / box / sphere / torus / cylinder primitives — see @glowbox/led-grid for the full list and defaults, or use the core directly on a canvas. LEDs render as real emitters (bright cores + glow halos, tone-mapped) so they read on any background. The display resizes in place and recovers from WebGL context loss on its own.

A Yarn-workspaces monorepo. Yarn is vendored (.yarn/releases/*.cjs, invoked via node — no corepack).

packages/led-grid        @glowbox/led-grid  — the framework-agnostic library
packages/svelte          @glowbox/svelte    — the Svelte wrapper
packages/react           @glowbox/react     — the React wrapper
packages/vue             @glowbox/vue       — the Vue 3 wrapper
packages/extras          @glowbox/extras    — content helpers (GIF/image/text)
packages/nixie           @glowbox/nixie     — nixie-tube rendering core (2D canvas)
packages/seven-segment   @glowbox/seven-segment — seven-segment rendering core (2D canvas)
packages/flip-dot        @glowbox/flip-dot  — flip-dot board rendering core (2D canvas)
packages/split-flap      @glowbox/split-flap — split-flap rendering core (2D canvas)
packages/crt             @glowbox/crt       — composable CRT screen effect (WebGL pass)
examples/svelte-gallery  the demo SPA (LED gallery + nixie/seven/flipdot/splitflap) → GitHub Pages

node .yarn/releases/yarn-*.cjs install   # or: yarn install (if yarn is on PATH)
yarn dev        # run the demo gallery (Vite, :5173) against the library source
yarn build      # build all packages (cores → wrappers/extras) + the demo
yarn test       # vitest (node + headless-chromium browser) + Playwright e2e
yarn validate   # lint + format + typecheck + test
yarn size       # bundle-size budgets (size-limit; minified + brotli) on the shipped bundles

The demo resolves @glowbox/* to package source (via kit.alias), so dev and typecheck need no prior build; the packages are validated independently by their own build/test.

All ten packages publish to the public npm registry under the @glowbox scope. Tag a release (vX.Y.Z) and the release workflow publishes each via npm trusted publishing (OIDC) with provenance — no NPM_TOKEN secret (the cores first, then the wrappers + extras). Each package needs a trusted publisher configured on npm.

MIT — see LICENSE.