Guide · Agent skill
How to use the WebGL Laser Background agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The webgl-laser skill teaches an AI agent to build one specific visual: a fixed, full-screen, dark animated background with a thin white-hot laser beam, a glow in your site's accent colour, and soft smoke around the beam. It is written for front-end developers and designers who want a cinematic backdrop behind a landing page or product site. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what to check before you ship the result.
WebGL Laser BackgroundMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the webgl-laser ZIP from this page and unzip it so you have a webgl-laser folder containing SKILL.md.
- 2Place or upload the skill. Copy the folder to ~/.claude/skills/ for all projects or to .claude/skills/ inside one project. In the Claude apps, upload it under Settings → Capabilities → Skills.
- 3Set your accent colour. Define --brand-accent on the root element so the halo and smoke match your brand.
- 4Ask for the effect. Describe the laser background in plain words and name the skill, for example mentioning the hero section and your accent colour.
- 5Check layering. Confirm the canvas is behind the content, does not block clicks, and the text stays readable.
- 6Tune the look. Adjust colour, glow width, core width or smoke density through the initializer options.
What the webgl-laser skill makes the agent do
The skill covers only the laser background effect. It tells the agent to place a fixed, full-screen WebGL canvas behind the page content, set pointer-events to none so the canvas ignores mouse input, and keep the page content in a higher stacking layer.
The beam itself has a crisp white-hot inner core, a narrow coloured halo, and a soft, cloudy smoke concentrated around it. The glow pulses slowly rather than flickering. The skill draws everything with raw WebGL and a full-screen quad, unless the project already uses another renderer.
- Thin vertical beam with a white-hot core and narrow coloured halo
- Smoke that breaks up softly around the beam
- Halo and smoke derived from the page's accent colour (the --brand-accent custom property, if set)
- Slow pulse, with the render loop stopped when the user prefers reduced motion
Install the webgl-laser skill from the ZIP
Download the ZIP for webgl-laser from this page and unzip it. The skill folder contains SKILL.md, plus a demo folder with index.html, PROMPT.md and source.json.
To make the skill available to Claude Code for all your projects, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal (all projects): ~/.claude/skills/webgl-laser/
- Single project: .claude/skills/webgl-laser/ inside the project folder
- Claude apps: Settings → Capabilities → Skills
~/.claude/skills/webgl-laser/How to trigger the skill with natural requests
You do not need a special command. Describe the effect you want and name the skill, or mention the laser background directly. The skill's description tells the agent to use it only for laser background effects, so keep requests focused on that effect rather than on the whole page.
The demo PROMPT.md in the skill uses wording like the following, which you can adapt. Be specific about the page concept and the accent colour so the agent can match the halo to your brand.
- Use $webgl-laser to add a dark laser-beam background behind the hero section of this landing page.
- Use webgl-laser to create a fixed full-screen laser background that matches our --brand-accent colour, and keep the page content above it.
- Use $webgl-laser to build a standalone responsive HTML page with a laser background, using demo/index.html as the visual reference.
Set up the layering and brand colour
The skill expects a canvas with the data-webgl-laser attribute, placed before your main content. Page content sits in a relatively positioned wrapper with a higher z-index, so text stays readable on top of the beam.
For the colour, the skill reads a CSS custom property named --brand-accent from the document root. If it is not set, the code falls back to a default pink. Set the property in your stylesheet if you want the beam to match your brand.
- Canvas: position fixed, inset 0, z-index 0, pointer-events none
- Page content: position relative, z-index 1
- Accent colour: --brand-accent on the root element, otherwise the built-in fallback
.laser-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; }
.page-content { position: relative; z-index: 1; }Check the result and tune it
Open the page in a browser with WebGL support and check that the beam sits behind your text without blocking clicks. The initializer function, initWebGLLaser, accepts options for colour, horizontal offset, core width, glow width and smoke density, so you can adjust the look without rewriting the shader.
If the canvas does not appear, the skill's code returns early when the browser cannot create a WebGL context, so confirm WebGL is available and check the browser console for shader errors.
- Options supported by initWebGLLaser: color, xOffset, coreWidth, glowWidth, smokeDensity, maxDpr
- Shader compile or link errors are thrown with the GPU's info log
What people use it for
- A dark product landing page with a laser beam behind the hero headline
- A portfolio or studio homepage with a moody backdrop matched to the brand accent
- A standalone HTML prototype for a cinematic hero background, using the included demo as reference
Frequently asked questions
How do I install the webgl-laser agent skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for all projects, or in a project's .claude/skills/ folder for one project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
What does the webgl-laser skill require?
It needs a web browser with WebGL support and a web page with HTML and JavaScript to host the canvas. Setting a --brand-accent CSS custom property is optional and controls the accent colour.
Is the webgl-laser skill free to use?
The source is published under the MIT licence. This page does not list a price, so check the directory listing for any other terms.
Does the skill run scripts or use the network?
According to the listing, the skill runs no scripts and uses no network access. It consists of SKILL.md instructions, shader code and a demo folder.
Can the skill build a whole landing page?
No. The skill explicitly excludes full page layout, copy, generic hero scenes, particles and unrelated motion systems. It only creates the laser background effect, so you will write or generate the rest of the page separately.
Why is my laser background not showing, or why is it slow?
Confirm the browser supports WebGL and check the console for shader errors. The effect runs a continuous render loop, so it may be heavy on weak hardware; the code stops animating when the user prefers reduced motion.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use webgl-laser if you want a dark, cinematic, brand-coloured laser backdrop for a landing page or product site and you are comfortable reviewing the generated WebGL code. Pick something else if you need a light theme, very busy content behind the beam, or minimal animation on weak devices, since this effect runs a continuous render loop.
Download the skill