vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

dashboard(home): matrix-rain backdrop on the H0M3 page

Browse source 
Adds the falling-glyph "digital rain" effect the operator asked for as a
dimmed background on the home hub.

- index.html: a decorative full-viewport <canvas id="matrix-rain">
  (aria-hidden, pointer-events:none) as the first body child.
- home.css: fixes it behind the content (z-index:-1, inset:0) at low
  opacity (0.16) so the menu tiles stay legible — the "dimmed bg".
- home.js: startMatrixRain() drives the classic stepped digital rain.
  Glyph + fade-trail colours are RESOLVED FROM THE STYLIX PALETTE at
  runtime (--green glyphs, --bg trail; resolved via a probe element
  since getComputedStyle returns custom props unresolved), so a theme
  swap re-colours it rather than hardcoding matrix-green. Stepped via a
  55ms interval, paused while the tab is hidden, and skipped entirely
  under prefers-reduced-motion.

CSS/JS only, home page only.
This commit is contained in:
iris 2026-06-17 21:46:25 +02:00
commit 31001d52e8
3 changed files with 92 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/packages/dashboard/src/index.html
View file

@ -12,6 +12,13 @@
</head>
<body class="home-shell">
<!-- Decorative matrix-rain backdrop: a dimmed full-viewport canvas of
falling glyphs behind everything (home.js drives it). aria-hidden +
pointer-events:none so it's purely cosmetic; glyph/bg colours are
read from the stylix palette at runtime so a theme swap re-colours
it, and it's disabled under prefers-reduced-motion. -->
<canvas id="matrix-rain" aria-hidden="true"></canvas>
<!-- H0M3: the menu hub. A plain grid of links to every top-level
surface. This is the page served at `/` — the landing page — with
the dashboard relocated to /dashboard.html. No tabbar / SSE —