Animated Mesh Waves
Layered translucent wave ribbons scrolling at different speeds for a fluid mesh feel.
- Category
- Backgrounds
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
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.
Fluid by design
Layered waves scrolling at different speeds
Props
"use client";
import { useEffect, useMemo, useRef } from "react";
function buildWaveSegment(width: number, height: number, amplitude: number, baseline: number, xOffset: number): string {
const segments = 4;
const segW = width / segments;
let d = `M${xOffset} ${baseline}`;
for (let i = 0; i < segments; i++) {
const cx = xOffset + segW * i + segW / 2;
const cy = baseline + (i % 2 === 0 ? -amplitude : amplitude);
const ex = xOffset + segW * (i + 1);
d += ` Q${cx.toFixed(1)} ${cy.toFixed(1)} ${ex.toFixed(1)} ${baseline}`;
}
d += ` L${(xOffset + width).toFixed(1)} ${height} L${xOffset} ${height} Z`;
return d;
}
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Animated Mesh Waves builds each wave ribbon as one static SVG path — a handful of quadratic curve segments computed once from props — then gets its endless scroll for free by tiling that path twice inside a double-width SVG and animating only a CSS transform, the same seamless-loop trick a marquee uses for text applied to a shape instead. That means the browser never re-parses or re-paints path geometry per frame; it just composites a moving layer, so three ribbons cost about as much as three simple divs. Because each layer's path is built by a pure function rather than an animated attribute, there's no risk of the classic bug where a raw SVG attribute and a Framer `animate` prop fight over the same property — this component never touches Framer Motion at all. The ribbons sit on their own dark base with a top-to-bottom fade, so foreground text uses a fixed light color rather than depending on wave color. The caveat: at low amplitude the three layers can visually merge into one band — it reads best with clear separation between baselines.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Wave Ribbon Band
backgroundsLayered SVG line-work flowing from two incommensurable sine waves.
Aurora Gradient Field
backgroundsSoft, hue-shifting color fields that drift behind a hero like ambient aurora light.
Ticker Tape Background
backgroundsOversized, near-invisible ticker rows scrolling behind the fold as ambient texture.