Prism Cube
WebGL が使えないタッチデバイス向けの Hero アニメーション。CSS preserve-3d とカスタムプロパティのみで、 ダイクロイックガラスの光学効果を再現する。PC=流体(WebGL)/
Mobile=固体(CSS)という対比構造の「固体」側。 モチーフはネイチャーアクアリウムの水槽。
Experiments
Hero セクションで採用した2つの表現技術。
設計の判断と実装の記録。
WebGL が使えないタッチデバイス向けの Hero アニメーション。CSS preserve-3d とカスタムプロパティのみで、 ダイクロイックガラスの光学効果を再現する。PC=流体(WebGL)/
Mobile=固体(CSS)という対比構造の「固体」側。 モチーフはネイチャーアクアリウムの水槽。
Move cursor here
マウスの軌跡を水面の波紋として可視化する WebGL シェーダー。ガウス関数による膨張リングと、 変位方向から色相を導くプリズム効果、カスティクス反射を模した Magic Light を組み合わせる。 PC の Hero セクションに「水の記憶」として実装。