Wave Ribbon Band
Layered SVG line-work flowing from two incommensurable sine waves.
DOM + CSS0 deps1 file · 3 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
