Wave Ribbon Band
Layered SVG line-work flowing from two incommensurable sine waves.
- 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.
Props
"use client";
import { useEffect, useRef } from "react";
export function WaveRibbonBand({
lines = 14,
amplitude = 26,
speed = 0.5,
tint = "#3d7bff",
}: {
lines?: number;
amplitude?: number;
speed?: number;
tint?: string;
}) {
const paths = useRef<SVGPathElement[]>([]);
const frame = useRef<number | null>(null);
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Flowing line backgrounds live or die on whether the eye can find the loop. One sine wave always gives it away: the curve is obviously periodic, and once you see the repeat you cannot unsee it. Summing two sines whose frequencies do not divide evenly — 2.1 and 4.7 here, with the second travelling in the opposite direction — produces a combined period long enough that it never visibly repeats, at exactly the same cost. That single choice does more for the result than any amount of colour or stroke tuning. Two supporting details finish it: opacity is weighted by a sine across the line index, so the band has a dense centre and fades at the edges instead of reading as a uniform hatch, and each line carries a phase offset so the ribbons travel as a shoal rather than in lockstep. Paths are updated by mutating the `d` attribute through refs; rebuilding a dozen paths through React state sixty times a second is the expensive way to draw the same picture.
Curator’s note
Built for viberdy 2.1. Two frequencies instead of one — that is the whole reason it does not look like a screensaver.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Reaction Diffusion Plate
backgroundsA live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
Animated Mesh Waves
backgroundsLayered translucent wave ribbons scrolling at different speeds for a fluid mesh feel.
Beam Sweep Backdrop
backgroundsSlow conic light beams rotating behind content, CSS-only and compositor-friendly.