mcpField
V
vantajs

vantajs

github.com/mengtoDesign & UI7.1k1.5k installsUpdated 3d ago
Repository

About vantajs

vantajs is a design skill for adding animated Vanta.js WebGL backgrounds to web containers. It covers effect setup and lifecycle management for decorative backgrounds in static sites and React or Vue projects.

Key features

  1. 01Initialize Vanta.js effects
  2. 02Update effect options
  3. 03Resize the canvas
  4. 04Destroy effect instances
  5. 05Address mobile and performance concerns

Use cases

  1. 01Add motion behind a hero section
  2. 02Clean up effects when React components unmount
  3. 03Plan background fallbacks for mobile

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mengto/skills --skill vantajs

After installing, type/vantajsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

REFERENCES.md
demo/
index.html
PROMPT.md

Details

From the project README

Vanta.js — Animated WebGL Backgrounds Skill

When to use

  • Decorative animated backgrounds behind hero sections
  • You want “wow” quickly without building a full three.js scene
  • Lightweight integration into static sites or React/Vue

How it works

  • Vanta injects a canvas into a container element and renders an effect (many use three.js).
  • Typical usage: include three.min.js (or provide THREE) + one Vanta effect bundle.

Key APIs/patterns

  • Init:
    • const effect = VANTA.WAVES({ el: "#hero", ...options })
  • Update after init:
    • effect.setOptions({ color: 0xff88cc })
  • Resize:
    • effect.resize() (if container size changes)
  • Cleanup:
    • effect.destroy() (important in SPAs)

Common pitfalls

  • Container has no size → nothing visible
    • Ensure the target element has explicit width/height (or is laid out).
  • Multiple WebGL canvases on one page → GPU load
    • Keep to 1–2 effects/page.
  • Mobile/older GPU issues
    • Provide a fallback background color/image; consider disabling on small screens.
  • Bundling in frameworks
    • Some builds require window.THREE or passing THREE in options.

Quick recipes

1) Minimal waves background
<div id="hero" style="height: 70vh;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  const effect = VANTA.WAVES({ el: "#hero", color: 0x0b1220, shininess: 40, waveHeight: 16, zoom: 0.9 });
</script>
2) React cleanup pattern (concept)
  • Create effect in useEffect, store in ref, call destroy() on unmount.

What to ask the user

  • Which effect (waves, birds, fog, net, etc.) and brand colors?
  • Must it run on mobile? If yes, what’s acceptable FPS/quality?
  • Is it behind text (needs contrast/readability)?

Comments

Markdown supported