Bezier Labを作った話 — cubic-bezierを『見ながら』作りたかった

正直な話をすると、cubic-bezier(0.25, 0.1, 0.25, 1)みたいな数値を見て「あ、これがどう動くか完璧にイメージできる」という人、この世に何人いるんでしょうか。少なくとも自分は無理でした🙅。
数値を打つ→保存する→ブラウザで確認する→また戻る、を何十回も繰り返した末に「これもう数値いじるツールじゃなくて、動きを直接いじれるツールにした方が早くない?」と思ったのがBezier Labの出発点です。

ちなみに、CSSのeaseやease-in-outみたいなキーワードも、中身は全部このcubic-bezier関数の値に展開されています。普段なんとなく使ってるキーワードが実際どんな数値なのか、作りながら初めて意識しました。

作ってる最中は cubic-bezier.com(Lea Verouさんが公開してる老舗の可視化ツール)や、MDNのeasing-function解説を何度も行き来していました。既に良いツールがあるのに何を今更、という気もしたんですが、自分が欲しかったのは「速度グラフまで一緒に見せてくれる」やつで、そこだけはどうしても見つからなかったので、それなら作るかとなった感じです。

位置だけじゃなく、速度も見せる

やったこと自体はシンプルで、時間に対する位置の変化を示すカーブと、その動きの速度そのものを示すグラフを両方表示するようにしました。「途中で急に速くなる」「最後にじわっと止まる」みたいな動きの質感は、位置カーブだけ見てても正直ピンと来ません。というか、さっぱり意味不明な方の方が多いのではないでしょうか？

速度グラフを並べて初めて「あ、なるほどそういうことか」と腑に落ちた瞬間があったので、これは絶対両方載せようと決めました。

また、コードの出力も「CSS」を始め「Tailwind」「JS」「SCSS」「GSAP」などから選べるようにしました。個人的には、Tailwind使う事が多いのでTailwindでの取得はよく使います。

• 位置カーブ:時間に対して要素がどこまで進んだか
• 速度グラフ:その瞬間、どれくらいの勢いで動いているか
• 両方を並べて初めて「加速している区間」「急ブレーキがかかる区間」が一目で分かる

あとはグラフを眺めるだけじゃ意味がないので、実際に要素が動くプレビューを同じ画面でリアルタイムに再生できるようにしています。カーブをドラッグすると、プレビューの動きもその場で変わる。この「触ったら即反映される」感覚を作るのに地味に時間がかかりました。

また、地味な機能ですが、よく使う「マイイージング」として登録して残せておける他、「この設定の共有リンクをコピー」を選択することで、設定した数値や動きをそのまま他の人に渡すことができます。

アニメーションの動きなどを伝えるときに便利です。

完成してドラッグした瞬間、「お、いいんでないかい？」と1人で呟きましたね…。

数字をいじるツールじゃなくて、動きをいじるツールにしたかった。

というのが、最初から最後まで変わらなかった軸でしたので、＋アルファの機能もいくつか追加できたのでひとまず完成としました。 「Bezier Lab」（ベジェ・ラボ）、ぜひ使ってみてください！👇