Skip to content
Get packs

WebGL Background Grid

Builds a subtle 3D perspective grid background with fading lines, particles and gentle mouse parallax.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent knows how to build an animated, atmospheric background for a web page: a large receding 3D grid of thin lines that fades into darkness, with a faint field of floating dust-like particles, slow forward motion, and a calm camera shift that responds to mouse movement. It guides the agent to use real WebGL (typically the Three.js library) and to keep the effect understated so it sits behind page content rather than competing with it.

Great for

  • Web designers who want a tech or sci-fi style hero background without heavy visual noise
  • Front-end developers building landing pages that need a subtle animated 3D backdrop
  • Anyone who wants a starting point for a WebGL background that they can tune

Skip it if

  • Full page layouts, copy or other non-background elements, since the skill is scoped only to the background layer (the skill itself says so)
  • Projects that need a loud retro neon look, because the guidance steers away from bright synthwave grids unless explicitly requested
  • Low-power devices or pages where animated WebGL may hurt performance; the files do not discuss performance budgets or fallbacks

Try asking

  • “Create a subtle perspective WebGL grid background for my landing page hero section”
  • “Add a slow-drifting 3D grid with floating particles behind my portfolio header”
  • “Build an understated tech grid background with mouse parallax using Three.js”
Step-by-step guide: how to use WebGL Background GridInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    background-grid-webgl.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip background-grid-webgl.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip background-grid-webgl.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your brand's primary or accent color so the agent can use it sparingly for glow and highlights
  • Ask for tuning of density, fade, drift speed and camera height if the default feels too strong or too weak
  • Review the generated demo/index.html in a browser to check performance and that the motion stays calm

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.