Noise Gradient Canvas
A slow-drifting colored noise wash rendered at low resolution and upscaled smooth.
- 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.
Made to move
A slow-drifting field of colored noise
Props
"use client";
import { useEffect, useRef } from "react";
function hexToRgb(hex: string): [number, number, number] {
const clean = hex.replace("#", "");
const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
const int = parseInt(full, 16) || 0;
return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
}
export function NoiseGradientCanvas({
speed = 0.4,
density = 48,
color = "#2563eb",
}: {
speed?: number;
density?: number;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Noise Gradient Canvas gets its blurred, organic gradient look from a deliberate resolution trick: it computes deterministic layered-sine noise into a canvas whose internal buffer is only ~48px wide, then lets the browser's own bilinear image smoothing stretch that buffer across the full display size via CSS. The result reads like a soft moving gradient wash, but the actual per-frame work is on the order of a couple thousand pixels rather than the real viewport resolution, which is what keeps it cheap at any container size. Because the noise function is a pure function of position and time — no Math.random anywhere — there's no seeding step and no possible hydration mismatch, unlike most canvas-noise effects. Behind text it sits on its own dark base layer, blending only toward the accent color, so a fixed light text color stays legible throughout the cycle. The caveat: raising density much past ~80 starts eating into the performance benefit that makes this approach worth choosing over a full-resolution noise field.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Fractal Noise Drift
backgroundsGPU fractal noise drifting through a gradient light field, with no JS loop.
Grain Overlay
backgroundsA subtle animated film-grain texture layered over any section via canvas.
Aurora Gradient Field
backgroundsSoft, hue-shifting color fields that drift behind a hero like ambient aurora light.