Generate a fixed full-screen WebGL laser background with brand-colored halo and fog.
npx skills add https://github.com/MengTo/Skills --skill webgl-laser
Please help me install this Agent Skill. Skill: webgl-laser Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/webgl-laser Command: npx skills add https://github.com/MengTo/Skills --skill webgl-laser
It solves the problem of creating a cinematic, on-brand laser background effect quickly without writing and tuning a full graphics pipeline from scratch.
pointer-events: none and correct stacking so foreground UI stays readable.--brand-accent).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).
High-intent search queries and answers about installing and using this skill.
A fixed full-screen WebGL laser canvas sets pointer-events to none, allowing clicks to pass through to foreground UI. The effect renders behind existing DOM content with correct stacking, ensuring interactive elements remain fully accessible.
Yes, the WebGL laser background derives its glow and smoky fog from a brand-derived accent color. You simply pass your brand color into the initialization function, keeping a thin white-hot core while the halo adopts your specified accent.
A WebGL shader implementation provides a controlled, subtle glow pulse for cinematic atmospheric motion without aggressive flicker. It concentrates smoky fog around the beam, resizing resolution uniforms dynamically to fit static hero-style backgrounds.
No, this effect has strict scope restrictions to avoid replacing general hero, particle, or multisystem effects. It is specifically designed for generating static, full-screen laser backdrops with atmospheric motion rather than complex particle simulations.
You can adjust visual intensity by passing configuration options like coreWidth, glowWidth, and smokeDensity during initialization. These parameters control the white-hot core thickness, the brand-colored halo spread, and the concentration of atmospheric smoke.
adryanmoldokkr32-pixelConfigure Three.js WebGLRenderer for 3D scene rendering with WebGL.
anishshah17Design dark luxury interfaces with adjustable variance and motion intensity.
masermediagroup-stackIntegrate shader-based animated gradients into React/Next.js interfaces.
het8802Generate procedural particle, weather, and walk cycle animations with p5.js.