バネアニメのパラメーター生成

機能

• 質量・剛性・減衰・初速の 4 つを調整可能
• 公式のプリセット 5 種類：gentle / wobbly / stiff / slow / molasses
• Framer Motion の transition={{ type: "spring" }} コードを生成
• バネの応答を 60 点にサンプリングし、CSS の linear() として出力
• サンプリングに使った時間（バネが自然に止まるまでの時間）も表示
• ⚠️ 減衰比 ζ・固有振動数 ω0・「行き過ぎるかどうか」の判定を表示
• ⚠️ 固定ステップの半陰的オイラー法で、範囲外のパラメーターは NaN ではなくエラー
• プレビューの四角は行き来し続けるので、行き過ぎの大きさが一目で分かります
• すべてブラウザー内で完結し、何も送信しません

使い方

1. プリセットを選ぶか、質量・剛性・減衰・初速を自分で調整します
2. 下の減衰比と「行き過ぎるかどうか」の判定を確認します
3. Framer Motion のコード、または linear() 入りの CSS をコピーします
4. プレビューで四角の跳ね方を見て、行き過ぎの大きさを確かめます

よくある質問

減衰比 ζ とは何で、行き過ぎるかどうかをどう判定しますか？

`ζ = c / (2·√(m·k))` で、c は減衰、m は質量、k は剛性です。ζ < 1 は不足減衰で、バネは目標を通り過ぎてから戻ります（行き過ぎ）。ζ = 1 は臨界減衰で、ちょうど行き過ぎず、最も速く戻ります。ζ > 1 は過減衰で、行き過ぎませんが戻りが遅くなります。この 3 つの数だけで決まり、初速とは関係ありません（初速は前半の形にだけ影響します）。

CSS で linear() を使うのはなぜですか？

CSS のイージング関数の中で `linear()` だけが進み具合を点ごとに指定でき、「行き過ぎてから戻る」という動きを表せるからです —— `cubic-bezier` も縦軸は 0〜1 を超えられますが、バネの応答を正確に合わせるのは難しいです。バネを 60 点にサンプリングして入れるのが、現在の CSS で最もバネに近い方法です。代わりに長さが固定なので、バネが自然に止まるまでの時間を併記します。

減衰を 0 にするとエラーになるのはなぜですか？

減衰 0 のバネは永遠に止まらないからです —— 同じ振幅で振動し続け、「安定した」瞬間がなく、サンプリングできる有限の時間もありません。実際の画面でもこんなアニメーションはあってはなりません（利用者はただ震え続けるものを見せられます）。減衰を少し上げて、最終的に止まるようにしてください。

このパラメーターは Framer Motion でどう使いますか？

生成された行をそのまま使います：`transition={{ type: "spring", mass: ..., stiffness: ..., damping: ..., velocity: ... }}`。Framer Motion の spring はまさにこの物理モデルで、`velocity` はアニメーション開始時の初速です（ドラッグで投げたときによくあります）。プリセット名（gentle / wobbly など）は公式の代表値で、選ぶと上の 4 つの数値は計算に使われません。