Experimental/brain-of-reese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): animated background actually animates — grid drift and glow breathe per the phase-08 design

Browse Source
This commit is contained in:
ducoterra
2026-08-24 22:16:41 -04:00
parent 22a6121411
commit 0adc9b5801
24 changed files with 797 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/styles.css
+19 -9
View File
@@ -59,9 +59,16 @@ body {
/* ---------- Animated background (pure CSS, zero JS — phase 08) ---------- */
/* Fine drifting grid: 44px cells, 1px lines at ~35% --line alpha, masked
with a radial fade (visible center-top, fading to the edges). The drift
delta (44px) equals one cell, so the loop is seamless. */
/* Fine drifting grid: 44px cells, 1px lines at 60% --line alpha, masked
with a radial fade (visible across most of the viewport, fading to the
corners). The drift delta (44px) equals one cell, so the loop is
seamless.
Phase 22 fix (owner report 2026-08-24, roadmap A3): the original 35%
alpha + 25%-black mask made the 0.73px/s drift invisible in a real
viewport (measured: ~1.4/765 mean pixel change over 5s in the grid
zone) — only the glow swing was perceived, so the background read as
"just blinking". Higher line alpha + wider visible mask radius make the
same 60s one-cell drift clearly readable as smooth motion. */
body::before {
content: "";
position: fixed;
@@ -69,11 +76,11 @@ body::before {
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, rgb(38 48 74 / 0.35) 1px, transparent 1px),
linear-gradient(to bottom, rgb(38 48 74 / 0.35) 1px, transparent 1px);
linear-gradient(to right, rgb(38 48 74 / 0.6) 1px, transparent 1px),
linear-gradient(to bottom, rgb(38 48 74 / 0.6) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, black 25%, transparent 78%);
mask-image: radial-gradient(120% 90% at 50% 0%, black 25%, transparent 78%);
-webkit-mask-image: radial-gradient(140% 110% at 50% 0%, black 40%, transparent 90%);
mask-image: radial-gradient(140% 110% at 50% 0%, black 40%, transparent 90%);
animation: bg-grid-drift 60s linear infinite;
}
@keyframes bg-grid-drift {
@@ -82,7 +89,10 @@ body::before {
}
/* Two large, soft radial glows: indigo top-left, cyan bottom-right —
14s ease-in-out breathing (opacity + scale). No filter:blur (perf). */
14s ease-in-out breathing (opacity + scale). No filter:blur (perf).
Phase 22 fix (owner report 2026-08-24, roadmap A3): the 0.65↔1 opacity
swing was the ONLY visible motion on the page, so it read as a blink.
Narrowed to 0.85↔1 — a gentle breathe, not a pulse. */
body::after {
content: "";
position: fixed;
@@ -95,7 +105,7 @@ body::after {
animation: bg-glow-breathe 14s ease-in-out infinite alternate;
}
@keyframes bg-glow-breathe {
from { opacity: 0.65; transform: scale(1); }
from { opacity: 0.85; transform: scale(1); }
to { opacity: 1; transform: scale(1.05); }
}