Frontend e UI
WebGL Laser
Fascio shader a schermo intero con nucleo incandescente e foschia tinta di brand.
Che cos’è
Un fragment shader WebGL grezzo che disegna un laser verticale sottile su un quad a schermo intero. Il nucleo resta quasi bianco; alone e fumo FBM seguono il tuo accento.
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
Perché conta per il design
- Alone e fumo derivano dal tuo accento di brand invece che da un blu scritto a mano.
- Larghezze separate per nucleo e glow tengono il fascio una lama, non una barra.
- Il fumo si concentra vicino al fascio e si dissolve verso l’esterno, proteggendo il contrasto del testo.
Cosa copre
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
Come installarlo
WebGL Laser
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/webgl-laser/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Imposta una custom property --brand-accent, che lo shader converte in RGB.
-
Metti il canvas fisso dietro al contenuto con pointer-events none.
-
Regola coreWidth, glowWidth, smokeDensity e xOffset per posizionare il fascio.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.