カーソル位置に発生するディストーションエフェクトが面白い Filippo Ruffini さんのポートフォリオ
透明なガラスのような表現も面白い
今回ご紹介するのは、イタリア出身のグラフィックデザイナー、Filippo Ruffini さんのポートフォリオサイトです。
WebGL によって描かれるグラフィックスだけでなく、文字の大きさや色使い、エフェクトの強弱など、いろんな意味ですごくコントラストが強い個性的なポートフォリオサイトとなっていて、めちゃくちゃかっこいいですね。
WebGL では 3D 的な表現のほか、ポストプロセス的に掛けるディストーションエフェクトもいい味わいになっています。
リンク：
カーソルを動かすたびに何かが起こる
今回のサイトはポートフォリオサイトなので、氏の手掛けたさまざまな事例やご本人のバックグラウンドなどがコンテンツとして用意されています。
用いられている表現は WebGL に特化しているというわけでもないのですが、ビジュアルのインパクトが強いので WebGL 部分がやっぱり印象としては強く残る感じがします。
サイトの冒頭部分、まずはいきなり 3D のオブジェクトが大きく登場するのですが、まるでガラスかクリスタルのような透明感のあるオブジェクトの質感がとても迫力があります。
背景に置かれている文字が透けているかのように見えるのですが、一方で、オブジェクト自体のシルエットもしっかり見えているというなんとも面白い絵作りです。
カーソルを動かしてやるとオブジェクトの部分がタイル状に歪んで崩れたように描かれます。
より速くカーソルが動いているほうが歪みが大きくなるので、ついついカーソルをブンブン振り回したくなります。
画面内には実は小さな文字でリンクが置いてあって、そこにカーソルがホバーすると描画される 3D オブジェクトが切り替わるようになっていて、オブジェクトが切り替わる瞬間のトランジションもなめらかでかっこいいです。
スクロールしていくと About のセクションや Works のセクションが出てくるのですが、それらのシーンでもカーソルの位置に発生するディストーションエフェクトは健在です。
3D シーンが大きく歪むエフェクトは本当に見た目に強いインパクトがあって、思わず視線を持っていかれます。
イージングとしては結構瞬発性のある変化が掛かっている感じで、余韻は比較的長めに取られていて独特な触り心地があります。
よく観察してみると、サイト内の至るところに工夫が凝らされていることがわかります。
カーソルの部分にある十字のスコープのようなアイコンも、その時々の状況に応じて柔軟に変形したりしますし、とにかく細部にまでしっかりとこだわって作られているのを感じます。
WebGL の表現としてはけして唯一無二といったような内容ではありませんが、今回のサイトにすごくマッチする表現で、迫力もあって見応えがありますね。
ぜひチェックしてみてください。
