Fog — live WebGL hero effect

Vanta.js · vanta@0.5.24 · MIT

Fog — an animated WebGL hero background from Vanta.js (MIT, open source). Rendered and measured live: 61fps 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/fog.

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 FOG from 'vanta/dist/vanta.fog.min';

FOG({ el: '#hero', THREE, highlightColor: 0xffc978, midtoneColor: 0xff8c42, lowlightColor: 0x2b1a4a, baseColor: 0xb0b12, speed: 1.4 });

Measured live

61fps · canvas 1440x900 · dark scheme

Agent-ready

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