A Vanta.js alternative for React

Vanta draws its effects with three.js or p5.js, and its last npm release is from 2022. Liquid Metal is a single WebGL shader with no library under it: a chrome drop behind your hero that follows the pointer.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/Hero.tsx

"use client";
// Before:
// useEffect(() => { const fx = WAVES({ el: ref.current, THREE }); return () => fx.destroy(); }, []);
import { MetalBackground } from "@/components/MetalBackground";

export function Hero() {
  return (
    <section className="relative h-[80vh] overflow-hidden bg-black">
      <MetalBackground />
      <div className="pointer-events-none relative z-10 mx-auto max-w-3xl pt-24 text-center text-white">
        <h1 className="text-5xl font-bold">Ship faster with Acme</h1>
      </div>
    </section>
  );
}

components/MetalBackground.tsx

"use client";
import { useEffect, useRef, useState } from "react";
import LiquidMetal from "@/components/LiquidMetal";

// LiquidMetal draws a 1000 x 660 stage. This scales it to cover any parent, like background-size: cover.
export function MetalBackground() {
  const box = useRef<HTMLDivElement>(null);
  const [scale, setScale] = useState(1);
  const [still, setStill] = useState(false);

  useEffect(() => {
    setStill(matchMedia("(prefers-reduced-motion: reduce)").matches);
    const el = box.current!;
    const fit = () => setScale(Math.max(el.clientWidth / 1000, el.clientHeight / 660));
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    fit();
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={box} className="absolute inset-0 overflow-hidden bg-black">
      {still ? null : (
        <div className="absolute left-1/2 top-1/2" style={{ transform: "translate(-50%, -50%) scale(" + scale + ")" }}>
          <LiquidMetal showChips={false} label={null} maxDpr={1.5} />
        </div>
      )}
    </div>
  );
}

Good to know

vanta 0.5.24 is the latest release, published September 16, 2022, and npm still counted 24,664 downloads in the last week of October 2026. The repo isn't archived, and its last push was in March 2024. It's MIT licensed; it just isn't getting new releases.
Vanta's README says its effects are rendered by three.js or p5.js. For React it asks you to load three.js with a script tag first, or import three from npm and pass it in as THREE. It puts the extra size at about 120 kB minified and gzipped, mostly three.js.
Liquid Metal has no dependencies at all: one canvas, one shader, a small CSS file. If your page doesn't use three.js anywhere else, that weight goes away.
Vanta has a gallery of effects (Waves, Birds and more on vantajs.com). Liquid Metal is one look, a liquid chrome drop with Chrome, Gold and Volt tints that splits on click. If you love one of Vanta's looks, keeping Vanta is a fair call, and passing THREE from npm keeps it working in Next.js.
The piece draws a fixed 1000 x 660 stage. MetalBackground above scales it to cover any parent, the way background-size: cover works, and the pointer still lines up because the component reads its own on-screen size.
It doesn't pause when scrolled out of view, and the shader itself doesn't read Reduce Motion. The wrapper above shows a plain black box for Reduce Motion users; unmount it below the fold if the page is long.
Type-checked against next 16.4 and React 19 with TypeScript 5.9. If WebGL is missing, the component shows a short message instead of a blank box.

What your Vanta code maps to

WAVES({ el, THREE }) in a useEffect: render <MetalBackground /> inside the section. No effect object, no ref.
effect.destroy() in cleanup: React unmounts it for you; the animation loop stops with it.
color and the effect's own options: tints, an array of { name, rgb, swatch }, and defaultTint to pick one.
mouseControls and touchControls: always on. The drop follows the pointer and a click splits it.
effect.resize(): not needed. The wrapper's ResizeObserver rescales the stage.
Want a hero made of particles instead? Particle Morph fills its parent, pauses off-screen and reads Reduce Motion, but it does use three.js.

Install

Copy from the zipPut react/src/components into src/, then npm uninstall vanta (and three, if only Vanta used it).
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

tints: metal colours
defaultTint: which tint starts
showChips: material picker, off for a background
label: hint text, null to hide
maxDpr: quality vs GPU cost

How qodesign compares

qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

Questions

Is Vanta.js deprecated?

No. npm doesn't mark it deprecated and the repo isn't archived. The last release, 0.5.24, is from September 2022.

Does Liquid Metal need three.js?

No. It talks to WebGL directly with a hand-written shader, so there's nothing to install.

Is it heavy on phones?

It's one full-screen shader. maxDpr 1.5 in the wrapper keeps phones with 3x screens from drawing three times the pixels.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.