Frontend & UI
WebGL Laser
Vollbild-Shader-Strahl mit weißglühendem Kern und markengetöntem Nebel.
Worum es geht
Ein roher WebGL-Fragment-Shader, der einen dünnen vertikalen Laser auf ein Vollbild-Quad zeichnet. Der Kern bleibt fast weiß, Halo und FBM-Rauch folgen deiner Akzentfarbe.
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
Warum das fürs Design zählt
- Halo und Rauch lesen aus deiner Markenakzentfarbe statt einem hartkodierten Blau.
- Getrennte Kern- und Glow-Breiten halten den Strahl als Klinge, nicht als Balken.
- Der Rauch konzentriert sich am Strahl und löst sich nach außen auf, das schützt den Textkontrast.
Was es abdeckt
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
So installierst du es
WebGL Laser
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/webgl-laser/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Setz eine --brand-accent Custom Property, die der Shader in RGB umwandelt.
-
Platzier das fixierte Canvas hinter dem Content mit pointer-events none.
-
Justiere coreWidth, glowWidth, smokeDensity und xOffset, um den Strahl zu positionieren.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.