# Waves — component for backgrounds & gradients (html)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

A glossy faceted blue water surface rolling in slow swells, filling the frame edge to edge

- **Install:** `npm i vanta`
- **Registry:** vanta · **Framework:** html · **License:** MIT
- **Docs and preview:** https://www.vantajs.com/?effect=waves
- **Source:** https://github.com/tengbao/vanta/blob/master/src/vanta.waves.js
- **Example:** https://skills.varg.ai/previews/lib-vanta-waves.mp4?v=68477 (Rendered by varg from the library’s own code (Vanta.js · rendered by varg))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Use the Vanta.js Waves effect (https://www.vantajs.com/?effect=waves, MIT, source github.com/tengbao/vanta/blob/master/src/vanta.waves.js) as the full-frame background under a headline or product name. Load three.js r134 and vanta@0.5.24/dist/vanta.waves.min.js and mount VANTA.WAVES on a full-frame div with mouse, touch and gyro controls off. The surface height is computed from effect.t (Vanta counts 60 ticks per second), so seed Math.random before init (the triangle layout is random), cancel effect.req, and for every frame set effect.t = seconds × 60, call effect.onUpdate() and then effect.renderer.render(effect.scene, effect.camera). Set color to a dark brand tone, shininess 30–60 for the highlights, waveHeight 10–20 and waveSpeed below 1 for a calm sea; zoom 0.8 shows more horizon.

## Used in

- [Year in review / Wrapped](https://skills.varg.ai/video/wrapped.md)
- [Lyric video](https://skills.varg.ai/video/lyric-video.md)
- [Karaoke video](https://skills.varg.ai/video/karaoke.md)
- [Logo sting](https://skills.varg.ai/video/logo-sting.md)
- [Title sequence](https://skills.varg.ai/video/title-sequence.md)
- [Brand guidelines film](https://skills.varg.ai/video/brand-guidelines.md)
- [Stream overlay package](https://skills.varg.ai/video/stream-overlay.md)
- [Shader loop](https://skills.varg.ai/video/shader-loop.md)

## More backgrounds & gradients

- [Aurora](https://skills.varg.ai/component/hf.aurora.md) — `npx hyperframes add aurora`
- [Aurora Drift](https://skills.varg.ai/component/hf.aurora-drift.md) — `npx hyperframes add aurora-drift`
- [Flowing Gradient](https://skills.varg.ai/component/hf.flowing-gradient.md) — `npx hyperframes add flowing-gradient`
- [Mesh Gradient](https://skills.varg.ai/component/hf.mesh-gradient.md) — `npx hyperframes add mesh-gradient`
- [Mesh Gradient Background](https://skills.varg.ai/component/hf.mesh-gradient-bg.md) — `npx hyperframes add mesh-gradient-bg`
- [Minimal Gradient Background](https://skills.varg.ai/component/hf.mk-background.md) — `npx hyperframes add mk-background`