ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: lava-lamp blobs — defined 30% cores, alpha .5-.6, screen blend, 9s cycle, wide travel (motion objectively 12x stronger: 0.6%->7.6% px delta)

Browse Source
This commit is contained in:
ctao
2026-07-25 14:44:23 +02:00
parent 4082be0c37
commit 95f8f7b1a6
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+12 -9
View File
@@ -55,15 +55,17 @@
/* Nebula glow (BRAND D.5) — auth band, static AND animated. Alphas are
contrast ceilings (DESIGN.md): Cherenkov ≤.38 / Azure ≤.35; cores sit in
opposite corners — cores never meet. */
/* Lava-lamp rule (research): motion reads only on DEFINED shapes — blobs are
~30% wide with visible falloff edges, high alpha, and travel far. Cherenkov
core stays pinned to the right half (text zone lives left of ~52%). */
--nebula:
radial-gradient(52% 58% at 78% 76%, rgba(0, 228, 216, 0.38), transparent 66%),
radial-gradient(46% 52% at 12% 18%, rgba(0, 122, 255, 0.33), transparent 64%),
radial-gradient(34% 40% at 76% 74%, rgba(0, 228, 216, 0.55), transparent 62%),
radial-gradient(30% 36% at 14% 18%, rgba(0, 122, 255, 0.45), transparent 60%),
radial-gradient(75% 85% at 40% 55%, rgba(0, 0, 156, 0.8), transparent 72%);
/* Photo-hero variant: no indigo depth blob over photography, Cherenkov ≤.30
with its core pinned ≥80% band width (only ~.15 fringe reaches text). */
/* Photo-hero variant: no indigo depth blob over photography. */
--nebula-glow:
radial-gradient(52% 58% at 82% 80%, rgba(0, 228, 216, 0.3), transparent 66%),
radial-gradient(46% 52% at 10% 15%, rgba(0, 122, 255, 0.28), transparent 64%);
radial-gradient(30% 42% at 80% 72%, rgba(0, 228, 216, 0.6), transparent 60%),
radial-gradient(26% 36% at 14% 20%, rgba(0, 122, 255, 0.5), transparent 60%);
/* Hero scrim over the photo — worst-case AA computed in DESIGN.md:
small text lives left of 52% band width (α ≥ .76 there). */
--hero-scrim: linear-gradient(to right,
@@ -723,7 +725,8 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
.hero-band .band-bg::after {
content: ""; position: absolute; inset: -45% -30%;
background: var(--nebula-glow);
animation: glowdrift 12s ease-in-out infinite alternate;
mix-blend-mode: screen; /* blobs GLOW over the photo instead of tinting it */
animation: glowdrift 9s ease-in-out infinite alternate;
}
/* Whole-page wash — slow drift, clearly alive */
.has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; }
@@ -747,8 +750,8 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va
to { transform: translate3d(8%, 6%, 0) rotate(6deg) scale(1.3); opacity: 1; }
}
@keyframes glowdrift {
from { transform: translate3d(-6%, -4%, 0) rotate(-5deg) scale(1); opacity: 0.55; }
to { transform: translate3d(7%, 5%, 0) rotate(5deg) scale(1.25); opacity: 1; }
from { transform: translate3d(-13%, -9%, 0) rotate(-6deg) scale(1); opacity: 0.5; }
to { transform: translate3d(13%, 10%, 0) rotate(6deg) scale(1.3); opacity: 1; }
}
@keyframes kenburns {
from { transform: scale(1) translate3d(0, 0, 0); }