フロントエンド & UI
WebGL Laser
白熱するコアとブランド色の霧を持つ、全画面シェーダーのビーム。
概要
全画面の quad に細い縦のレーザーを描く、素の WebGL フラグメントシェーダー。コアはほぼ白のまま、ハローと FBM の煙はアクセント色に従う。
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
デザインにとっての意味
- ハローと煙は、ハードコードされた青ではなくブランドのアクセント色から読み取られる。
- コアとグローの幅を分けることで、ビームが帯ではなく刃のまま保たれる。
- 煙はビームの近くに集まって外へ散るので、コピーのコントラストが守られる。
カバーする内容
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
インストール方法
WebGL Laser
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/webgl-laser/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
--brand-accent のカスタムプロパティを設定すると、シェーダーがそれを RGB に変換する。
-
固定した canvas を、pointer-events none でコンテンツの背後に置く。
-
coreWidth、glowWidth、smokeDensity、xOffset を調整して、ビームの位置を決める。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。