はじめに
自分用メモ。
チルトだけだと少し物足りないので、光の位置も一緒に動かすと表面の反応が出る。傾きと発光をセットで見る。
このサンプルでは本物の WebGL ではなく、発光とノイズでシェーダーっぽい空気感に寄せている。重くしすぎず少しだけリッチに見せたいときのやり方として残しておく。
組み合わせのポイント
- 回転だけで終わらせず、光の位置も一緒に動かして面の反応を見せる
- ノイズやグリッドは主役にせず、表面情報として薄く重ねる
- チルト量は控えめにして、カードとして読める範囲を保つ
- hover 中の変化は気持ちよく、hover 解除時はすっと元に戻して操作感を軽くする
- UI で使う場合は、文字やボタンの視認性を最後まで優先する
実装のポイント
- ポインタ位置からカード中心までの差分を取り、回転量と発光位置に同時に反映する
- ノイズやグリッドは疑似要素で重ね、主役のカード面とは分離して管理する
- hover 中の更新量は小さく抑え、チルトの気持ちよさと可読性を両立する
- 解除時は回転と発光を一緒に戻して、表面の反応が残らないようにする
まとめ
覚えておくのは、WebGL 風の印象は本格的な描画がなくても寄せられるということ。面の傾き、光の追従、表面情報の 3 つを丁寧に重ねる。