Animated Gradient
Dustin Adkison · 17 hours ago · v2
Code written by a VibePen user, not by VibePen. It runs sandboxed on an isolated origin with no network access. Nobody at VibePen has reviewed it — treat it like any page from a stranger, and never enter a password or payment details.
A full-bleed WebGL mesh gradient — metaball blobs drifting through a domain-warped, swirled field. Ported from the hero backdrop of easytext's design system, running on the Orange · Indigo palette over a dark base. Caps device pixel ratio at 1.5, pauses when offscreen or in a hidden tab, renders a single static frame under prefers-reduced-motion, and falls back to a CSS aurora if WebGL is unavailable.
Source
3.1 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Liquid Gradient — Orange · Indigo</title>
<style>
/*
* The AnimatedGradient "mesh" backdrop from easytext's design system,
* running full-bleed as its own Pen. Dark base is the palette's
* darkBase (#0A0E27); everything else is painted by the shader.
*/
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
background: #0a0e27;
}
#stage {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#mesh-gradient {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
/* --- CSS aurora — the WebGL-unavailable fallback, verbatim from
easytext/app/globals.css ------------------------------------- */
.ds-aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.ds-aurora-base {
position: absolute;
inset: 0;
filter: blur(8px);
}
.ds-aurora-blob {
position: absolute;
width: 85%;
aspect-ratio: 1 / 1;
border-radius: 50%;
filter: blur(72px);
opacity: 0.8;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.ds-aurora-blob--1 {
top: -22%;
left: -12%;
animation: ds-aurora-1 calc(13s / var(--ds-aurora-speed, 1)) ease-in-out infinite;
}
.ds-aurora-blob--2 {
top: -12%;
right: -16%;
animation: ds-aurora-2 calc(17s / var(--ds-aurora-speed, 1)) ease-in-out infinite;
}
.ds-aurora-blob--3 {
bottom: -26%;
left: 18%;
animation: ds-aurora-3 calc(21s / var(--ds-aurora-speed, 1)) ease-in-out infinite;
}
@keyframes ds-aurora-1 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(18%, 22%, 0) scale(1.2); }
66% { transform: translate3d(8%, 6%, 0) scale(0.9); }
}
@keyframes ds-aurora-2 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(-16%, 14%, 0) scale(0.9); }
66% { transform: translate3d(-6%, 26%, 0) scale(1.15); }
}
@keyframes ds-aurora-3 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
33% { transform: translate3d(14%, -16%, 0) scale(0.95); }
66% { transform: translate3d(-12%, -8%, 0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
.ds-aurora-blob {
animation: none !important;
}
}
.ds-grain {
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
opacity: 0.14;
mix-blend-mode: overlay;
}
</style>
</head>
<body>
<div id="stage">
<canvas id="mesh-gradient" aria-hidden="true"></canvas>
</div>
<script src="gradient.js"></script>
</body>
</html>