@ritsuki.kagerou/crt-ui

CRT terminal components for Svelte 5 — SSR-safe, token-driven, reduced-motion aware.

pnpm add @ritsuki.kagerou/crt-ui
<script>
  import '@ritsuki.kagerou/crt-ui/tokens.css';
  import { Typed, Crt } from '@ritsuki.kagerou/crt-ui';
</script>

Typed

DECRYPTING PERSONAL LOG ... OK

the caret holds when the line is done

Server-renders the finished line, so hydration never mismatches. Typing starts after hydration; under prefers-reduced-motion the line appears at once.

Meter

PRIMARY WORKING LEARNING 32 CELLS

Takes a 0–1 fraction, not a category — the consumer decides what a tier means. Exposed to assistive tech as role="meter".

Boot

CRT/UI 0.1.0

  1. CRT/UI — BIOS 00.01

Lines chain through Typed's oncomplete; the stepped bar closes the sequence. skippable is off here so the demo cannot be ended by a stray key press.

ScreenFrame

CAPABILITY MATRIX

SECTOR 02/05
  • C-01 BACKEND & API
  • C-02 INFRASTRUCTURE
  • C-03 DATABASE
CRT/UI DOCS

Content is a snippet; title, code, footer and the back label are plain text props. Drop onback to render the frame without a back control.

Crt

SIGNAL LOCKED

this box has its own tube, scoped with position="absolute"

Pointer-transparent and aria-hidden. Mounted once in the root layout it covers the viewport; with position="absolute" it covers the nearest positioned ancestor instead.

Tokens

  • --crt-bg #000000 page / tube background
  • --crt-phos #4ade80 base phosphor colour
  • --crt-phos-hot #d5ffe6 emphasis (titles, values)
  • --crt-phos-mid rgba(…, .62) secondary text
  • --crt-phos-dim rgba(…, .4) labels, footers
  • --crt-phos-faint rgba(…, .16) unlit meter cells
  • --crt-bar #1ee07c lit meter / progress cells
  • --crt-rule rgba(…, .26) hairlines and borders
  • --crt-display var(--crt-mono) display face for titles
  • --crt-sweep-duration 7.5s beam pass period
  • --crt-scanline-gap 3px scanline pitch
  • --crt-cell-width 6px meter cell width

Every component also carries these values inline as fallbacks, so the package renders correctly even if tokens.css is never imported.