スワイプで決めるカード
カードを左右にドラッグすると傾きながら「残す／捨てる」のラベルが濃くなる。距離か速度がしきい値を超えると飛んでいき、下のカードが繰り上がる。届かなければ弾んで戻る。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- 判定は距離だけでなく速度も見る。短くても速いフリックは意思表示なので、届かなくても採用する
- ラベルの不透明度を移動量に比例させる。「あと少しで決まる」が指先に伝わり、しきい値を体で覚えられる
- 傾きは移動量 ÷ 12 度程度。傾けすぎると軽薄に、傾けないと物を動かしている感触が消える
- 戻るときはスプリング風のオーバーシュート。「決めなかった」ことを、弾む動きで明確に伝える
コード（コピーして使えます）
<div class="gs-wrap">
<div class="gs-stack" id="gsStack"></div>
<div class="gs-bar">
<button class="gs-btn gs-btn--no" id="gsNo" type="button">捨てる</button>
<span class="gs-count" id="gsCount">残す 0・捨てる 0</span>
<button class="gs-btn gs-btn--yes" id="gsYes" type="button">残す</button>
</div>
</div>