Easing / cubic-bezier editor

Bezier Lab

曲線の形だけでなく「実際にどう動くか」を、位置カーブと速度カーブの両方で確認しながら cubic-bezier を作れるツールです。CSS・Tailwind・JS・SCSS・GSAP 用のコードをそのまま書き出せます。

使い方を見る — このツールの触り方を3分で
STEP 1

曲線を作る

左の曲線エディタでハンドルをドラッグ、数値を直接入力、プリセットをクリック、または cubic-bezier(...) 文字列を貼り付けて反映できます。

STEP 2

動きを確認する

右のモーションスコープで再生ボタンを押すと、実際の動きと速度グラフが同時に見えます。プレビュー方式を移動/スケール/不透明度/回転に切り替え可能。

STEP 3

比較する

「比較表示」をONにすると、選んだプリセットとレース形式で速度差を見比べられます。

STEP 4

コードを取得

コード出力パネルでCSS / Tailwind / JS / SCSS / GSAPを切り替えて「コピー」。気に入った曲線は「マイイージング」に保存、またはリンクとして共有できます。

主な機能
  • 位置カーブ + 速度(dy/dx)グラフの同時表示
  • 比較カーブとの同時再生(レース表示)
  • プレビュー方式切替(移動/スケール/不透明度/回転)
  • 矢印キーでの微調整 + グリッドスナップ
  • cubic-bezier(...) 文字列からのインポート
  • 対称化ボタン(ease-in-out系を自動生成)
  • マイイージングの保存(ブラウザ内に保持)
  • リンクでの共有(URLに値を埋め込み)

曲線エディタ

選択したハンドルは矢印キーで微調整(Shiftで0.05刻み)
基本
Material Design
よく使われるイージング

マイイージング

まだ保存されたイージングはありません

モーションスコープ

速度 dy/dx(進行の速さ) 等速の基準線(=1)

コード出力