Skip to content
viberdy.dev

Fractal Noise Drift

GPU fractal noise drifting through a gradient light field, with no JS loop.

Proglassneoneditorial
Category
Backgrounds
Added
2026-09-20
Deps
none
Updated
2026-09-20

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
Fractal drift

Props

0.9
3
24
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

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
Featured
NewPro

Liquid Metal Field

backgrounds

Gooey metaball blobs that fuse and split as they drift, with a specular sheen.

backgroundmetaballsvg-filter