RiveをReactで動かしてみました

こんにちわ。nap5です。

RiveをReactで動かしてみましたので、紹介したいと思います。

Rive - Build interactive motion graphics that run anywhere

Lottieと比較されているツイートとかも観測しました。

We recreated this Lottie animation in Rive.

Lottie file is 181.7 KB.
Rive file is 18 KB.

Lottie GPU memory: ~149 MB-190 MB
Rive GPU memory: 2.6 MB

Lottie JS heap: 16.9 MB
Rive JS heap: 7.3 MB

Lottie CPU: 91.8%
Rive CPU: 31.8% pic.twitter.com/y6TJkkeZSk

— Guido Rosso (@guidorosso) October 12, 2022

今回はドキュメントを参考にReactで動かしてみました。

Webpack App

デモコードです。

icy-dew-sc89b6 - CodeSandbox

デモサイトです。

Have a nice day

RiveコンテナDOMにある程度高さを持たせないと「表示されない！」などになりそうですね。

<RiveComponentPlayback className="min-h-[20rem] w-full" />

簡単ですが、以上です。