WebGL Hover Lab — ホバーエフェクトの実験室

作ったきっかけ

シェーダー(GLSL)の表現をもっと自分の引き出しにしたくて、「ホバーしたときの気持ちいい動き」だけを集めた実験室ページを作りました。
写真を歪ませたりズラしたりしながら、楽しく手を動かせる作品になりました。写真はわが家の愛猫たちです🐈

見どころ

カードにカーソルを重ねると、写真ごとに違うエフェクトが動きます。
カーソルに引っ張られてグニャッと歪むもの、RGBがズレるもの、波紋・グリッチ・魚眼・ドット化など全部で10種類(7/12現在)。

それぞれのカードの「</>」ボタンから、そのエフェクトの実装コード(HTML/CSS/JS)をその場で見てコピーできるようにしました。
同じ表現を作ってみたい方はぜひ持ち帰ってください。

技術的には、10枚のカードを canvas 1枚+1つの共有レンダラーで描いているのがこだわりです。
スマホでは仮想カーソルが自動で動いてデモを再生します。

これから

面白い表現を思いつくたびに、この実験室に足していく予定です。