Skip to content
viberdy.dev

Aurora Gradient Field

Soft, hue-shifting color fields that drift behind a hero like ambient aurora light.

Proglassneon
Category
Backgrounds
Added
2026-09-01
Deps
none
Updated
2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Sign inUnlock Pro
Preview

Launch week is here

Aurora light drifting behind the fold

Props

14
60
0.55
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

Noise Gradient Canvas

backgrounds

A slow-drifting colored noise wash rendered at low resolution and upscaled smooth.

noisegradientcanvas
Featured
New

Beam Sweep Backdrop

backgrounds

Slow conic light beams rotating behind content, CSS-only and compositor-friendly.

backgroundbeamsconic-gradient
NewPro

Orb Depth Field

backgrounds

Floating orbs whose size, blur, opacity and speed all derive from one depth value.

backgroundorbsdepth