domains / families / design / webgl-laser

webgl-laser

separate

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.

When to use

• 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.

When not to use

• full page layout
• copy
• generic hero scenes
• particles
• unrelated motion systems

Skill page

Source