同じ 1 枚の PNG（勇者レジェ）を、Rive の画像メッシュとボーンで動かしています。
触ると絵の内側が変形し、HP の数値がそのまま姿勢と発光になり、
同じ .riv を Remotion で動画に書き出せます。
マウスを動かす／画面を指でなぞると、頭が傾き、上体が向きを変えます。 呼吸とマントの揺れはループアニメーション。 CSS の transform は要素を丸ごと動かすだけで、画像の内側は曲げられません。
HP を動かすと、リングの円弧の長さ（TrimPath）、 発光のぼかし（Feather）、色、そしてキャラの姿勢が同時に変わります。 スライダーは HTML、下の 2 つのボタンは Rive ファイルの中のボタンです。
左とまったく同じ lege.riv を @remotion/rive で
1080×1080 / 30fps の mp4 に書き出したもの。
アイドル → ダメージ → 回復 の流れを、動画側では時間で hp を動かして描いています。
（書き出しは Remotion 4.0.475。--browser-executable で通常の Chrome を指定する必要がありました。理由は README）
左＝ライブ（触れる）／右＝同じファイルから書き出した動画。 デザイン資産が 1 つで、Web とオフライン動画の両方に出せるのが Rive の実利です。
| ① | HTML/CSS では無理だったこと：画像の内部の局所変形。transform は要素単位で、1 枚絵の胴だけ伸ばす・マントだけ振る、はできない。SVG なら可能だが、それはラスタ絵ではなくパスを描き直すことになる。 |
|---|---|
| ② | HTML/CSS では無理だったこと：1 つの数値から円弧の長さ・ぼかし半径・色・骨格ポーズが同時に出ること。CSS で円弧は stroke-dasharray の手品、ぼかしは filter、姿勢は別実装になり、3 つを同期させるのは全部 JS の仕事になる。ここでは全部ファイル内の宣言。 |
| ③ | Remotion 単体では無理だったこと：Remotion は React を毎フレーム描く。ベクター骨格の補間・ブレンド・ステートマシンは自前実装になる。ここでは Rive ランタイムが描いたものを Remotion が録っているだけ。 |