Fractal Noise Drift
GPU fractal noise drifting through a gradient light field, with no JS loop.
DOM + CSS0 deps1 file · 2 KB TSX
Props
"use client";
import { useId } from "react";
export function FractalNoiseDrift({
frequency = 0.9,
octaves = 3,
speed = 24,
tint = "#3d7bff",
}: {
/** Base frequency x100. Higher = finer grain. */
frequency?: number;
numOctaves?: number;
octaves?: number;
speed?: number;
tint?: string;
}) {
// SVG filter ids are document-global — a hard-coded id means a second
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Browsers ship a Perlin noise generator that almost nobody uses. `feTurbulence` produces real fractal noise on the GPU, at any resolution, with no canvas, no animation loop and no image to download — and unlike a tiled noise PNG it never shows a repeat or softens when scaled. Two details turn it from a curiosity into something usable. Raw turbulence output is coloured RGB noise that reads as television static, so desaturating it with an `feColorMatrix` is what makes it sit in the image as grain within light rather than on top of it as interference. And the animation has to move the layer, not the noise: transforming an already-generated field costs nothing, whereas animating `baseFrequency` or the seed re-runs the generator every frame and is one of the few genuinely expensive things you can do with CSS filters. The noise also needs something to modulate — over flat colour it is grey mush, so it sits over two broad radial gradients in overlay blend mode. Filter ids come from `useId`, since they are document-global.
Curator’s note
Built for viberdy 2.1. Transform the noise layer, never re-generate it — that is the difference between free and expensive.
