Retro Pack

Phosphor green CRT aesthetic — sharp corners, Cartridge monospace font, scan-line effects, split-flap board, and an audio player with oscilloscope visualizer.

Type	Full (theme + effects + components)
Theme CSS	`packs/retro.theme.css`
Effects CSS	`packs/retro.effects.css`
Effects JS	`packs/retro.effects.js`
Components JS	`packs/retro.components.js`
Full bundle	`packs/retro.full.css` + `packs/retro.full.js`

Theme

Token overrides scoped to [data-theme~="retro"]:

Phosphor green primary color
Sharp 2px border radii
Cartridge monospace font family
Stepped easing (CSS steps())
Sunken, recessed surface tokens

Effects

Opt-in effects via data-effect attribute with CSS class variants:

data-effect="neon" — pulsing neon text glow (.pink, .cyan, .amber)
data-effect="text-3d" — layered drop-shadow 3D text extrusion (.green, .red, .gold)
data-effect="outline" — hollow outlined text (.thick, .ultra, .glow)
data-effect="hard-shadow" — hard-edged text shadows (.double, .long)
data-effect="blink" — flashing text (.slow, .fast)
data-effect="rainbow" — continuous hue-rotation color cycling
data-effect="stamp" — rubber stamp effect (.red, .blue, .straight)
data-effect="marquee" — continuously scrolling horizontal text
data-effect="flipboard" — split-flap departure board animation (JS)

Components

<audio-player> — retro-styled audio player with oscilloscope visualization, VU meter, and cassette-inspired controls

Loading

<link rel="stylesheet" href="/cdn/packs/retro.theme.css">  <link rel="stylesheet" href="/cdn/packs/retro.effects.css"> <script type="module" src="/cdn/packs/retro.effects.js"></script>  <script type="module" src="/cdn/packs/retro.components.js"></script>

import { activateBundle } from '/cdn/vanilla-breeze.js' await activateBundle('retro')

Demo

View the Retro pack demo to see the theme, effects, and components in action.