WebGL Laser Background
Builds a fixed full-screen WebGL laser beam background with a white core, colored halo and smoke
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
Once installed, the agent can add a dark, animated laser-beam background behind a web page's content. The beam has a thin white-hot core, a restrained glow in the site's accent colour, and soft smoky fog around it, all drawn with raw WebGL on a canvas that ignores mouse input. The skill gives the agent the layering rules, shader code, and setup logic to produce this effect.
Great for
- Front-end developers who want a cinematic animated backdrop for a landing page or product site
- Designers prototyping a moody, dark-themed hero background that matches a brand accent colour
- Agents building web pages that need a specific, consistent laser-background style
Skip it if
- Full page layout, copy, or generic hero scenes, which the skill explicitly excludes (it only covers the laser effect)
- Sites that need a light theme or very busy content, since the dark field and glow may reduce readability
- Pages where animation must be minimal or hardware is weak, because the effect runs a continuous WebGL render loop
Try asking
- “Add a laser background behind the hero section of my landing page, using our brand accent colour”
- “Create a fixed full-screen WebGL laser effect that sits behind my page content and doesn't block clicks”
- “Make the laser glow slow and subtle, and respect reduced-motion settings”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
webgl-laser.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip webgl-laser.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip webgl-laser.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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
- Set the --brand-accent CSS variable on your page so the halo and smoke match your brand colour.
- Keep page content in a higher stacking context (as the skill's layering example shows) so text stays readable above the beam.
- Check the output in a browser and tune core width, glow width and smoke density if the effect feels too thick or too bright.
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.