チームのタスクを、 積み木のように。

手法

参照に挙げたのはLusionやOff-Whiteのような、動き自体が顔になっているモーションスタジオの実例。そこから、GSAPとScrollTriggerだけで実装できる5種類の動き――行マスクの文字stagger、等速マーキー、罫線ごとのslide-in、数字のカウントアップ、カーソル追従と磁力ボタン――を先に仕様として固定し、色とタイポグラフィはその動きが映える最小限まで削った。

なぜAI感が消えるのか

1. 生成AIが装飾として選ぶ動きは、hoverでのtranslateY数pxとフェードインの2択にほぼ収まる。ここでは行のoverflow:hiddenをマスクにしてyPercent:100→0で立ち上げる文字stagger、xPercentを回し続ける等速マーキー、mousemoveで座標を読み替える磁力ボタンという、そもそも語彙の異なる3系統を重ねている。
2. イージングはpower2.outのような既製の名前止まりにせず、cubic-bezier(0.16,1,0.3,1)という実数値を1つに固定して全ての出現アニメーションに使い回した。ボタンの吸着だけはcubic-bezier(0.34,1.56,0.64,1)というわずかにオーバーシュートする値に切り替え、この2曲線だけで動きの手触りを統一している。
3. カーソルの追従はgsap.quickTo()でx,yの目標値を毎フレーム書き換えているだけの単純な処理だが、実体はマウス座標を読み続けて別要素に反映するフレーム処理そのもの。CSSのtransitionは要素自身の状態変化にしか反応しないので、この遅延追従は原理的に再現できない。
4. 料金の数字は{val:0}という値をターゲットまでトゥイーンし、onUpdateでtextContentを書き換えているだけで、情報としては静的な料金表と1文字も変わらない。それでも数字が動いている間だけ視線がそこに留まり、¥980や¥1,980という金額の印象が強く残る。
5. 機能3つは一度に出さず、ScrollTriggerの個別トリガーを罫線ごとに設定してスクロール量と発火を1対1で結びつけた。3枚同時にフェードインする作りより、読む順番そのものを演出として使っている。

向いている場面

動き自体を見せることが提案になる、モーションスタジオやブランドのティザーサイトに向く。情報を並べて比較検討させるより先に、体験のトーンを一瞬で伝えたい入り口として機能する。料金の詳細比較を淡々と読ませたい場面や、動きに酔いやすいユーザーが多い管理画面向けの用途には向かない。