Frontend y UI
WebGL Laser
Haz de shader a pantalla completa con núcleo al rojo blanco y niebla teñida con el color de marca.
Qué es
Un fragment shader de WebGL a secas que dibuja un láser vertical fino sobre un quad a pantalla completa. El núcleo se mantiene casi blanco; el halo y el humo FBM siguen tu acento.
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
Por qué importa para el diseño
- El halo y el humo se leen de tu acento de marca en vez de un azul fijado a mano.
- Anchos separados de núcleo y resplandor mantienen el haz como una hoja, no una barra.
- El humo se concentra cerca del haz y se disipa hacia fuera, protegiendo el contraste del texto.
Qué cubre
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
Cómo instalarlo
WebGL Laser
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/webgl-laser/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Define una propiedad personalizada --brand-accent, que el shader convierte a RGB.
-
Coloca el canvas fijo detrás del contenido con pointer-events none.
-
Ajusta coreWidth, glowWidth, smokeDensity y xOffset para posicionar el haz.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.