Halo — live WebGL hero effect

Vanta.js · vanta@0.5.24 · MIT

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

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

HALO({ el: '#hero', THREE, backgroundColor: 0xb0b12, baseColor: 0x1a59f2, amplitudeFactor: 1.2, size: 1.3 });

Measured live

52fps · canvas 1440x900 · dark scheme

Agent-ready

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