/* ============================================================
VizSurge / Coviyo — decorative animated color skin (v2: more
colors, faster, more saturated)
============================================================
Self-contained, CSS-only, no JavaScript and no HTML markup
required beyond a single tag in . Renders as two
body pseudo-elements (body::before / body::after) layered above
the page with pointer-events:none and mix-blend-mode:screen, so
it:
- never intercepts clicks/taps (fully click-through)
- never obscures text or UI (screen blend only brightens,
it can't darken or hide content underneath)
- never depends on the existing page's own background/z-index
setup to "show through" — it always renders, regardless of
what index-file.css/style.css/etc. already do.
Usage: add this one line inside , after the page's own
stylesheets, in each page you want the skin on:
Nothing else needs to change in any existing CSS or HTML file.
v2 changes from the first version: more color stops per layer
(9 hues instead of 5-7), higher opacity, and roughly 2-2.5x
faster movement + hue-cycle animation, for a noticeably more
vivid, faster-shifting effect.
============================================================ */
@keyframes vsSkinHueCycle {
0% { filter: hue-rotate(0deg) saturate(1.3); }
100% { filter: hue-rotate(360deg) saturate(1.3); }
}
@keyframes vsSkinHueCycleReverse {
0% { filter: hue-rotate(360deg) saturate(1.25); }
100% { filter: hue-rotate(0deg) saturate(1.25); }
}
@keyframes vsSkinDrift {
0% { transform: rotate(0deg) scale(1.3); }
50% { transform: rotate(180deg) scale(1.55); }
100% { transform: rotate(360deg) scale(1.3); }
}
@keyframes vsSkinDriftReverse {
0% { transform: rotate(0deg) scale(1.2); }
50% { transform: rotate(-180deg) scale(1.5); }
100% { transform: rotate(-360deg) scale(1.2); }
}
/* Layer 1: drifting color blobs — 9 hues instead of the original 6,
higher opacity for more visible color. */
body::before {
content: "";
position: fixed;
inset: -25vmax;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.72;
will-change: transform, filter;
background:
radial-gradient(circle at 10% 15%, rgba(255,215,0,0.65) 0%, transparent 36%), /* gold */
radial-gradient(circle at 75% 8%, rgba(255,20,147,0.62) 0%, transparent 38%), /* pink */
radial-gradient(circle at 95% 40%, rgba(255,140,0,0.55) 0%, transparent 34%), /* orange */
radial-gradient(circle at 50% 88%, rgba(148,0,211,0.60) 0%, transparent 40%), /* violet */
radial-gradient(circle at 88% 78%, rgba(220,20,60,0.55) 0%, transparent 36%), /* red */
radial-gradient(circle at 15% 78%, rgba(50,205,50,0.52) 0%, transparent 38%), /* green */
radial-gradient(circle at 55% 45%, rgba(255,255,0,0.42) 0%, transparent 34%), /* yellow */
radial-gradient(circle at 30% 40%, rgba(0,220,220,0.42) 0%, transparent 34%), /* cyan */
radial-gradient(circle at 68% 60%, rgba(138,43,226,0.50) 0%, transparent 36%); /* purple */
animation:
vsSkinDrift 18s ease-in-out infinite,
vsSkinHueCycle 8s linear infinite;
}
/* Layer 2: rotating conic "beam" sweep, counter-rotating on its own
faster, offset color cycle. */
body::after {
content: "";
position: fixed;
inset: -25vmax;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.5;
will-change: transform, filter;
background: conic-gradient(
from 0deg at 50% 50%,
rgba(255,215,0,0.38) 0deg, /* gold */
rgba(255,20,147,0.36) 40deg, /* pink */
rgba(255,140,0,0.32) 80deg, /* orange */
rgba(255,255,0,0.30) 120deg, /* yellow */
rgba(50,205,50,0.32) 160deg, /* green */
rgba(0,220,220,0.30) 200deg, /* cyan */
rgba(138,43,226,0.34) 240deg, /* purple */
rgba(148,0,211,0.36) 280deg, /* violet */
rgba(220,20,60,0.34) 320deg, /* red */
rgba(255,215,0,0.38) 360deg /* back to gold */
);
animation:
vsSkinDriftReverse 22s linear infinite,
vsSkinHueCycleReverse 10s linear infinite;
}
/* Respect users who've asked for reduced motion: keep the color skin
but stop the movement/hue animation, holding a single vivid frame. */
@media (prefers-reduced-motion: reduce) {
body::before,
body::after {
animation: none;
}
}
/* Small screens: trim the oversized inset a bit so mobile GPUs aren't
compositing a huge offscreen layer unnecessarily. */
@media (max-width: 600px) {
body::before,
body::after {
inset: -15vmax;
}
}