corner-lasers について
角を起点または合流点にするレーザー構図のデザインスキルです。細い光線、明るい発光点、局所的な雰囲気光を用いたシネマティックな演出に向いています。
主な機能
- 01角を起点にしたビーム構図
- 022〜3本の細いレーザー光線
- 03明るい発光点と集中したブルーム
- 04アクセント色の霞とグロー
- 05控えめなパルスや揺らぎ
活用シーン
- 01角の光やポータル効果の作成
- 02デザインへの雰囲気あるレーザー表現の追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ mengto/ skills --skill corner-lasersインストール後、Claude Code で/corner-lasersを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
demo/index.htmlPROMPT.mdsource.json詳細
コーナーレーザースキル
使用する場面
- 細いビーム、明るいエミッターノード、ブルーム、雰囲気のあるグローやフォグを備えた、コーナーを起点とするレーザー構図を作成するとき。
ワークフロー
適用範囲
- これはコーナーを基準とするレーザービームの構図にのみ適用し、中央を起点とする一般的なレーザー、パーティクルシーン、無関係なモーションシステムには適用しないでください。
- 強いシネマティックなエミッターポイントを備え、コーナーまたはエッジの接合部からビームが発生、またはそこに収束するデザインが必要な場合に使用してください。
ビジュアルの目標
- 2本または3本の細いレーザービームが明るいコーナーのエミッターで交わり、幾何学的な部屋のコーナーやポータルの継ぎ目のように、異なる方向へ伸びる構図を作成してください。
- ビームの線は細くシャープに保ち、中心は白熱するように明るく、ハローは控えめにし、コーナーの接合部を中心に強いブルームを加えてください。
- エミッターの周囲を柔らかく光らせ、暗い背景に平面的な線を置くのではなく、ボリューム感のある霞にコーナーが照らされているようにしてください。
- ハローと大気の色合いには、色を青に固定せず、デザインのプライマリカラーまたは最も強いアクセントカラーを使用してください。最も明るいビームのコアは白に近い色に保ってください。
実装ガイダンス
- 出力が対応している場合は、Raw WebGL シェーダーによる処理、または同等のエフェクトロジックを優先してください。
- 構図は中心から外れたコーナーの点を基準にし、無関係な別々の線を配置するのではなく、その点から複数のビーム方向を導き出してください。
- 符号付き距離関数や線分までの距離を使い、各ビームを細く、くっきりと連続した状態に保ってください。
- ビームが交わるコーナーのエミッターに、集中したブルームまたはエネルギーフレアを加えてください。このホットスポットが構図の中で最も明るい点になるようにします。
- ビームの周囲に控えめな大気グロー、フォグ、または光の拡散を加え、平面的ではなく、没入感と空間性のある効果にしてください。
- 動きは控えめに保ってください。ゆっくりとした脈動、かすかに伝わるエネルギー、穏やかなきらめきは適していますが、激しいちらつきは避けてください。
調整項目
- コーナーの位置:構図を整えるため、エミッターポイントを端やコーナーから内側へ移動します。
- ビームの本数と角度:方向の違いがはっきりした2本または3本の光線を使用します。
- ビームの太さ:コアは細く保ち、外側のグローは個別に調整して、レーザーの繊細さを保ちます。
- 色:ハローと霞の色合いは、使用中のデザインのアクセントカラーから決めます。
- 大気表現:ブルームの半径、フォグの密度、減衰、ビネットの強さを調整し、UIを白飛びさせずにコーナーを明るく保ちます。
避けること
- レーザー線の精密さが失われる、太いネオンバー。
- コーナーのエミッターとの局所的な関連性がない、全画面のフォグ。
- デザインで明らかに別のプライマリカラーが使われているのに、寒色系の青に固定すること。
- 軸を外れたコーナービームの効果が目的なのに、対称的な中央配置の構図にすること。
コメント
Markdown 対応