Lottie デモ
「ただ JSON を再生するだけのシンプル版」と、 「ホバー・ボタン・スライダーでガッツリ制御するゴリゴリ版」を並べて、 Lottie の得意分野を分かりやすく比較できるページです。
01. シンプル版（ただループ再生するだけ）
シンプル版 Lottie（ただループ再生）
JSON 形式のアニメーションファイルを読み込んで、 ひたすらループ再生するだけの最小構成です。 「Lottie を入れるとこういう動きが簡単に載るんだな」というイメージ用です。
常にループ再生中
コード上は animationData を渡しているだけで、 再生タイミングや速度の制御はしていません。
02. ゴリゴリ版（インタラクティブ制御）
ゴリゴリ版 Lottie（インタラクティブ制御）
ホバー・ボタン・スライダーから Lottie のタイムラインを直接制御します。 「状態に応じてアニメーションの見せ方を変える」ケースを想定したデモです。
1. 状態が分かる再生ビュー（Hover で再生 / 一時停止）
カードにマウスを乗せると再生、外すと一時停止します。 再生中かどうかは、バッジと背景グラデーションではっきり表示しています。
Hover で再生 / 離すと一時停止STOPPED
2. 再生コントロール（Play / Pause / Stop / 速度 / 方向）
下のボタンから、再生のスタート・一時停止・リセット、速度変更、逆再生を切り替えられます。
3. シークバーで任意の位置にジャンプ
スライダーを動かすと、アニメーションの好きな位置に一気にジャンプします。
進行度0%
フレーム数は仮に 120 として計算しています。 実際の JSON に合わせて調整してください。