Aurora Gradient Field
Soft, hue-shifting color fields that drift behind a hero like ambient aurora light.
DOM + CSS0 deps1 file · 2 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
export function AuroraGradientField({
speed = 14,
blur = 60,
intensity = 0.55,
}: {
speed?: number;
blur?: number;
intensity?: number;
}) {
const wrapRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduced) return;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Aurora Gradient Field layers three large, solid-color rectangles behind a single blur() filter and animates only transform and a hue-rotate filter — no canvas, no per-frame JavaScript, just three GPU-composited layers the browser can keep at 60fps indefinitely. That makes it the cheapest way in this batch to get color that genuinely moves rather than a static gradient. Because the color fields sit on a dedicated dark base layer and real content renders in its own z-10 group on top, sample text uses a fixed light color rather than a canvas-adaptive one, so shifting hues never threaten readability. The caveat: hue-rotate cycles through the full color wheel, so a brand that needs to stay within a tight palette should lower intensity and treat this as texture rather than a literal brand-color wash, or swap the hue-rotate keyframe for a fixed-color opacity pulse instead.
