Individual skill

webgl-laser

Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems.

agent-skills/web-design/webgl-laser/SKILL.md

Read pinned source

Source commit 5ea1661a0e05d82b054553daaa6baf6d0233c33c

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 7,368
Repository last updated: Nov 8, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

marketing Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 9,398 bytes
SKILL.mdcore · 9,398 bytes
demo/PROMPT.mddoc · 3,419 bytes
demo/assets/page-01-2f563338-39fa-47ea-9761-658d4f3f84db-1600w.jpgasset · 298,959 bytes
demo/assets/page-02-4f5668c5-fc4a-44e0-bc5e-a664189d3c31-1600w.jpgasset · 217,369 bytes
demo/assets/page-03-77415a2e-dcbc-4748-a29d-fced4821881a-1600w.jpgasset · 362,749 bytes
demo/assets/page-04-c92852bb-a510-405a-85ab-ffa0fde136a4-1600w.jpgasset · 214,106 bytes
demo/assets/source-preview.jpgasset · 73,780 bytes
demo/index.htmlasset · 21,909 bytes
demo/preview.jpgasset · 55,595 bytes
demo/source.jsonasset · 3,261 bytes

Read excerpt


# WebGL Laser

## Scope
- Apply only to the laser background effect.
- Use a fixed full-screen canvas behind the DOM.
- Set `pointer-events: none` on the canvas.
- Keep page content in a higher stacking context.
- Match the halo and smoke to the page's primary or strongest accent color.

## Visual Target
- Thin vertical beam: crisp white-hot inner core, narrow colored halo.
- Atmospheric smoke: soft cloudy breakup concentrated around the beam.
- Dark cinematic field: restrained, brand-colored, and readable behind content.
- Slow pulse: glow breathes gently; no aggressive flicker or color cycling.