Waves — live WebGL hero effect

Vanta.js · vanta@0.5.24 · MIT

Waves — an animated WebGL hero background from Vanta.js (MIT, open source). Rendered and measured live: 50fps on a 1440×900 canvas. Exact config shipped as tokens · npm i vanta three.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/effects/waves.

Library

Vanta.js · vanta@0.5.24 · MIT

https://github.com/tengbao/vanta

Install

npm i vanta three

Usage — the measured config

import * as THREE from 'three';
import WAVES from 'vanta/dist/vanta.waves.min';

WAVES({ el: '#hero', THREE, color: 0xd1b33, waveHeight: 22, waveSpeed: 0.9, zoom: 0.85 });

Measured live

50fps · canvas 1440x900 · dark scheme

Agent-ready

MCP: get_recipe("Vanta.js", "Hero Effect") — the full config, params, fps and license/NOTICE in one call.