モーショングラフィック
MOTION LAB — キネティック・モーショングラフィック
点・線・面・文字・色だけで構成した、144BPM の拍に同期するモーショングラフィック。すべて HTML と GSAP で描き、画像素材は使っていない。Suno で作った曲の拍に1拍単位で合わせ、スクイーズ&ストレッチの文字、グリッドの波、SVG パスの描画、帯のスライドを経てロゴに組み上がる。
使った技法
- 拍グリッドに合わせたタイミング設計
- 楽曲のビート検出と頭合わせ
- キネティック・タイポグラフィ
- スクイーズ&ストレッチ
- グリッド・スタッガー
- clip-path による図形モーフ
- SVG パスの描画とパス追従
- mix-blend-mode によるロゴ合成
- 効果音のタイミング同期