webgl-laser

What problem does it solve?

It solves the problem of creating a cinematic, on-brand laser background effect quickly without writing and tuning a full graphics pipeline from scratch.

Core Features & Use Cases

• Fixed full-screen laser canvas: Renders a full-viewport WebGL effect behind your existing DOM content with pointer-events: none and correct stacking so foreground UI stays readable.
• Brand-colored halo + smoke: Keeps a thin white-hot core while deriving the glow and fog/particles from your page accent color (e.g., --brand-accent).
• Controlled, subtle motion: Provides a gentle glow pulse (no aggressive flicker or multicolor cycling) and concentrates atmospheric smoke around the beam.

Quick Start

Integrate the skill by adding a full-screen <canvas data-webgl-laser> behind your content, wiring it to initialize initWebGLLaser(...), and passing a brand-derived accent color (optionally adjusting coreWidth, glowWidth, and smokeDensity).