Frontend & UI
WebGL Laser
Feixe em shader de tela cheia, com núcleo incandescente e névoa na cor da marca.
O que é
Um fragment shader WebGL puro que desenha um laser vertical fino sobre um quad de tela cheia. O núcleo fica quase branco; o halo e a fumaça FBM seguem o seu destaque.
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 que isso importa para design
- O halo e a fumaça saem do destaque da sua marca em vez de um azul fixo no código.
- Larguras separadas de núcleo e brilho mantêm o feixe como uma lâmina, não uma barra.
- A fumaça se concentra perto do feixe e se dissipa para fora, protegendo o contraste do texto.
O que cobre
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
Como instalar
WebGL Laser
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/webgl-laser/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Defina uma custom property --brand-accent, que o shader converte para RGB.
-
Coloque o canvas fixo atrás do conteúdo com pointer-events none.
-
Ajuste coreWidth, glowWidth, smokeDensity e xOffset para posicionar o feixe.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.