Frontend & Arayüz
WebGL Laser
Ak sıcak çekirdek ve marka tonlu sisle tam ekran shader ışını.
Nedir
Tam ekran bir quad üzerine ince dikey bir lazer çizen ham bir WebGL fragment shader’ı. Çekirdek neredeyse beyaz kalır; hale ve FBM duman vurgu renginizi izler.
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
Tasarım için neden önemli
- Hale ve duman, sabit kodlanmış bir mavi yerine marka vurgu renginizden okunur.
- Ayrı çekirdek ve parıltı genişlikleri, ışını bir çubuk değil, bir bıçak tutar.
- Duman ışının yakınında yoğunlaşır ve dışa doğru dağılır; metin kontrastını korur.
Neleri kapsıyor
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
Nasıl kurulur
WebGL Laser
-
Depoyu klonlayın.
git clone https://github.com/MengTo/Skills -
Codex’i skill dosyasına yönlendirin.
agent-skills/web-design/webgl-laser/SKILL.md -
Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.
Codex ile nasıl çalıştırılır
-
Shader’ın RGB’ye çevirdiği bir --brand-accent custom property’si belirleyin.
-
Sabit canvas’ı pointer-events none ile içeriğin arkasına yerleştirin.
-
Işını konumlandırmak için coreWidth, glowWidth, smokeDensity ve xOffset’i ayarlayın.
Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.
codex-design listesinde dahası ↗Diğer Codex tasarım eklentileri
Frontend & Arayüz Ne yapar gpt-taste GSAP scroll hareketi ve boşluksuz bento ızgaralarıyla ödüllük tarzda landing page’ler kurar. 
Tasarım Sistemleri Ne yapar Stitch Design Taste Google Stitch’i sıradan olmayan ekranlara yönlendiren bir DESIGN.md yazar. 
Frontend & Arayüz Ne yapar image-to-code Önce tasarım görselleri üretir, onları analiz eder, sonra eşleşen frontend kodunu kurar. 
Frontend & Arayüz Ne yapar imagegen-frontend-mobile Premium mobil uygulama ekran akışlarını kod değil, görsel olarak üretir. Sonraki adım
Kurulum derdi olmadan Open Design ile tasarlayın
Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.