Rive redefined
Technical demonstration for repurposing interactive Rive animations as video templates or as a way to generate custom, user-centric video content, with the ability to save the final result.
Context
Most video templating tools out there—such as Plainly, and Nexrender—rely on After Effects in the background. There are also newer web-based animation tools like Fable (winding down as of Nov 2024), which offers a feature to turn projects into templates accessible to your team. However, my current favorite web-based animation tool happens to be Rive. With Rive, you can create interactive animations that can run virtually anywhere thanks to its runtimes, and you can also manipulate them with code.
This sparked the idea of repurposing Rive animations as video templates or using them as a method to generate custom, user-centric video content (think something like Spotify Wrapped) that can then be downloaded. With Rive, you can seamlessly blend between different animation states, and you even have access to text elements via code after exporting your animation. Best of all, it operates in real-time. You can pass live data into it—such as the current weather, time, football match scores, or user data—or allow users to input text directly. And since it runs on the web, all we need to do is find a way to capture it…
Tech demo
Note: This is just a technical demonstration and is not intended for commercial use, nor is it production-ready.
The demo I’ve put together includes the core features I envisioned. It has a text input field for the user's name, options for customization, and, at the end, I even added some live data, such as the time when the video was captured.
To save the final result, I’m recording the Rive canvas element on the web at 30 FPS (matching the Rive animation's forced framerate) after the button is pressed. The recording is saved as a webm video for better compatibility with the recording method, though this can be adjusted later. The video’s dimensions are based on the canvas size on the page, multiplied by the pixel ratio of the device viewing it. For troubleshooting, I’ve also added console logs.
In case the live demo stops working as intended (e.g., if the download doesn’t start or there are issues with the webm format), you can find a video walkthrough below. But, a simple reload or an ‘empty cache and hard reload’ on the page can also help resolve many issues.
Made using: Rive, Framer (with code overrides/components), and JavaScript.
Tested on: Google Chrome and Microsoft Edge (so far).
Click here to explore the live demo →
Context
Most video templating tools out there—such as Plainly, and Nexrender—rely on After Effects in the background. There are also newer web-based animation tools like Fable (winding down as of Nov 2024), which offers a feature to turn projects into templates accessible to your team. However, my current favorite web-based animation tool happens to be Rive. With Rive, you can create interactive animations that can run virtually anywhere thanks to its runtimes, and you can also manipulate them with code.
This sparked the idea of repurposing Rive animations as video templates or using them as a method to generate custom, user-centric video content (think something like Spotify Wrapped) that can then be downloaded. With Rive, you can seamlessly blend between different animation states, and you even have access to text elements via code after exporting your animation. Best of all, it operates in real-time. You can pass live data into it—such as the current weather, time, football match scores, or user data—or allow users to input text directly. And since it runs on the web, all we need to do is find a way to capture it…
Tech demo
Note: This is just a technical demonstration and is not intended for commercial use, nor is it production-ready.
The demo I’ve put together includes the core features I envisioned. It has a text input field for the user's name, options for customization, and, at the end, I even added some live data, such as the time when the video was captured.
To save the final result, I’m recording the Rive canvas element on the web at 30 FPS (matching the Rive animation's forced framerate) after the button is pressed. The recording is saved as a webm video for better compatibility with the recording method, though this can be adjusted later. The video’s dimensions are based on the canvas size on the page, multiplied by the pixel ratio of the device viewing it. For troubleshooting, I’ve also added console logs.
In case the live demo stops working as intended (e.g., if the download doesn’t start or there are issues with the webm format), you can find a video walkthrough below. But, a simple reload or an ‘empty cache and hard reload’ on the page can also help resolve many issues.
Made using: Rive, Framer (with code overrides/components), and JavaScript.
Tested on: Google Chrome and Microsoft Edge (so far).
Click here to explore the live demo →
Context
Most video templating tools out there—such as Plainly, and Nexrender—rely on After Effects in the background. There are also newer web-based animation tools like Fable (winding down as of Nov 2024), which offers a feature to turn projects into templates accessible to your team. However, my current favorite web-based animation tool happens to be Rive. With Rive, you can create interactive animations that can run virtually anywhere thanks to its runtimes, and you can also manipulate them with code.
This sparked the idea of repurposing Rive animations as video templates or using them as a method to generate custom, user-centric video content (think something like Spotify Wrapped) that can then be downloaded. With Rive, you can seamlessly blend between different animation states, and you even have access to text elements via code after exporting your animation. Best of all, it operates in real-time. You can pass live data into it—such as the current weather, time, football match scores, or user data—or allow users to input text directly. And since it runs on the web, all we need to do is find a way to capture it…
Tech demo
Note: This is just a technical demonstration and is not intended for commercial use, nor is it production-ready.
The demo I’ve put together includes the core features I envisioned. It has a text input field for the user's name, options for customization, and, at the end, I even added some live data, such as the time when the video was captured.
To save the final result, I’m recording the Rive canvas element on the web at 30 FPS (matching the Rive animation's forced framerate) after the button is pressed. The recording is saved as a webm video for better compatibility with the recording method, though this can be adjusted later. The video’s dimensions are based on the canvas size on the page, multiplied by the pixel ratio of the device viewing it. For troubleshooting, I’ve also added console logs.
In case the live demo stops working as intended (e.g., if the download doesn’t start or there are issues with the webm format), you can find a video walkthrough below. But, a simple reload or an ‘empty cache and hard reload’ on the page can also help resolve many issues.
Made using: Rive, Framer (with code overrides/components), and JavaScript.
Tested on: Google Chrome and Microsoft Edge (so far).
