スプリング物理ドラッグ
つまみをドラッグして離すと減衰振動で中央へ戻る。stiffness（硬さ）と damping（減衰）を変えると、同じ距離でも戻り方がまったく変わる。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- スプリングは「時間」でなく「物理量」で動きを決める。途中で掴み直しても速度を引き継ぎ、途切れない
- stiffness を上げると速く戻り、damping を下げると行き過ぎて揺れる。UI では揺れ1回以内（damping 高め）が上品
- cubic-bezier では中断時の速度を引き継げない。ドラッグ→離す、のように途中で介入される動きにスプリングを使う
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="sp-wrap">
<div class="sp-track" id="spTrack">
<span class="sp-center" aria-hidden="true"></span>
<button class="sp-knob" id="spKnob" type="button" aria-label="つまみ（ドラッグして離す）"></button>
</div>
<svg class="sp-graph" id="spGraph" viewBox="0 0 300 80" preserveAspectRatio="none" aria-label="離したあとの位置の変化"><line x1="0" y1="40" x2="300" y2="40" stroke="#d9d2c5" stroke-width="1"/><polyline id="spCurve" fill="none" stroke="#2b50c7" stroke-width="2" points=""/></svg>
<div class="sp-controls">
<label class="sp-field"><span>stiffness <b id="spKVal">180</b></span><input id="spK" type="range" min="40" max="400" value="180"></label>
<label class="sp-field"><span>damping <b id="spDVal">14</b></span><input id="spD" type="range" min="2" max="40" value="14"></label>
<button class="sp-flick" id="spFlick" type="button">右へはじく</button>
</div>
</div>