Frontend & UI
WebGL Laser
Un faisceau shader plein écran, cœur incandescent et brume teintée aux couleurs de la marque.
De quoi il s’agit
Un fragment shader WebGL brut qui dessine un fin laser vertical sur un quad plein écran. Le cœur reste quasi blanc ; le halo et la fumée FBM suivent votre accent.
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
Pourquoi ça compte pour le design
- Halo et fumée se lisent depuis votre accent de marque au lieu d’un bleu en dur.
- Des largeurs de cœur et de lueur distinctes gardent le faisceau en lame, pas en barre.
- La fumée se concentre près du faisceau et se dissipe vers l’extérieur, préservant le contraste du texte.
Ce que ça couvre
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
Comment l’installer
WebGL Laser
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/webgl-laser/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Définissez une propriété personnalisée --brand-accent, que le shader convertit en RGB.
-
Placez le canvas fixe derrière le contenu avec pointer-events none.
-
Réglez coreWidth, glowWidth, smokeDensity et xOffset pour positionner le faisceau.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.