Experiments

Labs

Hero セクションで採用した2つの表現技術。
設計の判断と実装の記録。

No.01
CSS 3D Custom Properties GPU Composited

Prism Cube

WebGL が使えないタッチデバイス向けの Hero アニメーション。CSS preserve-3d とカスタムプロパティのみで、 ダイクロイックガラスの光学効果を再現する。PC=流体(WebGL)/ Mobile=固体(CSS)という対比構造の「固体」側。 モチーフはネイチャーアクアリウムの水槽。

Move cursor here

No.02
WebGL GLSL Mouse Tracking

Fluid Ripple

マウスの軌跡を水面の波紋として可視化する WebGL シェーダー。ガウス関数による膨張リングと、 変位方向から色相を導くプリズム効果、カスティクス反射を模した Magic Light を組み合わせる。 PC の Hero セクションに「水の記憶」として実装。