万華鏡ともちょっと違う不思議な質感の表現がかっこいい k.c. Austin さんのポートフォリオサイト
こういう空気感だいすきです
今回ご紹介するのは、クリエイティブ・テクノロジストとして活動している k.c. Austin さんのポートフォリオサイトです。
これは完全に個人の感想になってしまうのですが、高い技術を習得している人に特有の、なんかギークな香りがするポートフォリオサイトですごくかっこいいですね。
WebGL を使った個性的なエフェクトが迫力のビジュアルとなっています。
リンク：
スクロールすると現れる驚き
今回のサイトは、シンプルな構造のポートフォリオサイトで基本的には上から下に向かってどんどんスクロールしていく構造です。
それぞれのセクションごとにカバー画像が用意されているのですが、それがスクロールの状態に応じて半立体的な感じでエフェクト共に描き出されます。
いわゆる万華鏡の感じとも少し違う独特なエフェクトで、迫力満点です。
静止画ではちょっと伝わりにくいと思うのですが……
手前にはテキストを格納した DOM のレイヤーがあり、背景部分に WebGL のグラフィックスが当て込まれているような構造です。
ガラスを通して世界が歪んで見えるような感じの質感なのですが、シンプルなんですけどそれがまたかっこいいですね。
単純に細切れに画像が表示されるだけではなく、RGB シフトのようなエフェクトも同時に掛かっていて、より複雑な味わいのビジュアルを実現しています。
中途半端な位置でスクロールするのをやめてしまっても、エフェクトが時間差で自動的に収束していくようになっていて、どこか有機的なかんじの振る舞いにも見えますね。
こういうシンプルなのにグッと心を掴まれるエフェクトは、本当に好きで何度も見てしまいます。
WebGL や GLSL を使って表現を行うとき、ある程度は定石というか、こうすれば鉄板みたいなテクニックや実装ってあると思うんですよね。
今回のサイトの表現はやっていることはそんなに複雑ではないのですが、実はいろんなパラメータがインタラクティブに変化していて、すごくビジュアルとしての完成度が高いなと感じました。
サイト全体のデザインもかなり思い切った感じで、個人的には（いかにも技術者っぽい雰囲気が）すごくかっこいいなと感じました。
ぜひチェックしてみてください。
