---

27 stars

Best use case

is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

---

Teams using  should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/vantajs/SKILL.md --create-dirs "https://raw.githubusercontent.com/guilhermemarketing/esc-skills/main/skills/vantajs/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/vantajs/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How  Compares

Feature / Agent	<!-- skill: vantajs \| version: 1.0.0 \| updated: 2026-03-17 -->	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

---

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

<!-- skill: vantajs | version: 1.0.0 | updated: 2026-03-17 -->
---
name: vantajs
description: Use when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).
---

# 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

```html
<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)?