Noise Gradient Canvas
A slow-drifting colored noise wash rendered at low resolution and upscaled smooth.
Canvas 2D0 deps1 file · 3 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
