corner-lasers

Create corner-anchored laser beam compositions with bloom and atmospheric glow using WebGL shaders.

5.7k|685|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill corner-lasers
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: corner-lasers
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/corner-lasers
Command: npx skills add https://github.com/MengTo/Skills --skill corner-lasers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Designing cinematic laser effects that originate from a page corner requires precise shader math, bloom tuning, and atmospheric lighting that most developers get wrong, resulting in flat lines on dark backgrounds instead of immersive volumetric compositions.

Core Features & Use Cases

  • Corner-Anchored Beam Composition: Generates two or three thin laser beams converging at a bright off-center emitter point with a white-hot core and restrained halo.
  • Bloom and Atmospheric Glow: Concentrates bloom at the corner junction and adds localized fog or light diffusion so the effect feels spatial rather than flat.
  • Design-Aware Coloring: Derives halo and haze tints from the active design's accent color instead of hardcoding a palette.
  • Use Case: Build a hero background for a landing page where thin laser beams meet at a corner emitter with subtle pulsing, implemented as a raw WebGL shader inside a responsive HTML document.

Quick Start

Use the corner-lasers skill to build a responsive HTML page with thin laser beams converging at a bright corner emitter with bloom and atmospheric fog.

Frequently Asked Questions about corner-lasers

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a corner laser beam effect in WebGL?

Anchor the composition to an off-center corner point and derive two or three beam directions from it using signed-distance or line-distance shader logic. Keep each beam thin with a white-hot core, then add concentrated bloom at the junction and subtle atmospheric fog around the beams.

What shader technique keeps laser beams thin and sharp?

Use signed-distance or line-distance functions so each beam stays crisp and continuous with a narrow core. Tune the outer glow separately from the core thickness so the lasers remain elegant rather than becoming thick neon bars.

Can I use corner laser effects with any color palette?

Yes, derive the halo and atmospheric haze tint from the design's primary or strongest accent color instead of hardcoding blue. Keep the brightest beam core near white regardless of the chosen accent color.

When should I not use a corner-anchored laser composition?

Avoid it for generic centered lasers, particle scenes, or unrelated motion systems, and do not use symmetrical centered compositions when the goal is an off-axis corner effect. It is scoped specifically to beams converging at a corner or edge junction.

Why does my laser effect look flat instead of atmospheric?

Flat results come from missing localized glow around the emitter. Add bloom concentrated at the corner junction plus subtle fog or light diffusion tied to the emitter position, and avoid full-screen fog with no spatial relationship to the corner.