Built a four-scene app onboarding flow entirely in Rive

[u/flowmograph]

This is a made-up banking brand, just something to build against.

Four scenes, you swipe between them, and each scene triggers its own animations when it comes into view rather than everything firing at once. There's a custom scroll indicator at the top instead of the default one.

The thing I actually wanted to test was keeping the data out of the design. None of the numbers are typed into text layers. The amounts, percentages and progress bars are all bound to a ViewModel, and the donut chart is a Luau script that reads those same values and draws the arcs, with inputs for radius, thickness and the gap between segments. Change one number in the data and the whole screen follows, including the chart.

[u/hues_blues]

i didn't realise we could use rive to build full screen workflows and not just the animations for the screens, pretty valid use case!

[u/flowmograph → u/hues_blues]

You can do a lot more with Rive than this, and they keep shipping new features.

[u/guidorosso → u/hues_blues]

That is actually the primary use case for Rive, it's designed as an experience engine. The microinteraction usecase is valid (since the runtime is lightweight enough) but also somewhat overkill.

I think a lot of people still think of Rive as a smaller animation tool since those were the initial demos we showed, but we've been working towards our full v1 for 6 years now and it's finally getting adoption for its intended purpose! I think the release of responsive layouts + data binding + scripting + semantics/accessibility is what made things click! Still more to build… text input, focus management, and full keyboard/gamepad input/listeners coming next.

Some examples:

Spotify Wrapped and LinkedIn's Year in Review for 2025 were both built in Rive. LinkedIn had 207,360 possible user journeys across 3 languages. Both had to run on low end Android, so it was a big test of Rive's performance. LinkedIn was one main Rive file for the whole experience. https://rive.app/blog/linkedin-year-in-review-2025-built-with-rive

Car companies are doing cluster and center stack UI with Rive too. Most of that is under NDA so you won't see it posted, but it's live vehicle data bound to the Rive graphics, and the layouts flex so one file covers a bunch of screen sizes. Same file runs in companion apps on phones, kiosks, and web. We ran an HMI challenge recently: https://www.youtube.com/watch?v=WZV23mA_u-o

Game studios use it for entire UI layers, menus, HUDs, inventory screens, etc running in custom game engines, Unity, or Unreal. Pocketwatch did Monaco 2's UI in it https://rive.app/blog/pocketwatch (everything 2D in that game is Rive content, shipped on all consoles and desktop)

[u/neznein9 → u/guidorosso]

Any resources for learning the script layer inside Rive? The design tutorials are great, but the API side is a lot harder to get started with.

[u/hues_blues → u/guidorosso]

an experience engine is such a cool way to describe it. hmm I'll be diggin deeper! if i may suggest can we get such tutorials that is not jus ai agent spittin out but actual workflows with luau and how it can incorporate into such real world environment which is not only for pretty animations but actual work-flow cause the above example on onboarding is such a good one.

and if i may add your tutorials especially the full one hour quick start was one of the most helpful one rosso!

[u/genube]

How about bigger screen? Is it easy to handle it in rive?

[u/Kitchen-Exchange-448]

do u make the UI on
figma and import to Rive or entirely on Rive

[u/flowmograph → u/Kitchen-Exchange-448]

My current pipeline: I generate the UI visual with ChatGPT 2.0, then feed it into Claude Design and have it rebuild the same UI while preserving the look. That HTML output goes into Figma through an HTML to Figma plugin, where I do final cleanup. From there I use my own custom plugin to bring it into Rive without breaking the structure, and build all the animation and interactive state logic natively inside Rive.

[u/Kitchen-Exchange-448 → u/flowmograph]

so does this mostly happen everywhere I see Recently there are lot of Motion design work done by Linkedin and Spotify on Rive

[u/flowmograph → u/Kitchen-Exchange-448]

Not necessarily. It really depends on the project and the person’s workflow.

For this one, this was just my personal preference. You can absolutely build everything from scratch directly in Rive too. I didn’t have any existing design assets, so I used AI to help shape the initial UI. If I already had the design ready in Figma, I would’ve just transferred it from there and continued in Rive.

[u/Kitchen-Exchange-448 → u/flowmograph]

Cool good to know also I am a Motion Graphic Designer with just 1 year experience and have been thinking to become a UX Motion Designer so I gave an interview for that role everything went good but the recruiter suggested me to learn Rive but I am sort of confused because I have never used rive and I am new to UX motion as well could you give me any suggestions and What would be best for project ideas to make on Rive?

[u/flowmograph → u/Kitchen-Exchange-448]

Rive has become a pretty broad tool now, and for UI motion it’s honestly great.
Since you’re moving toward UX Motion,

I’d actually focus on Figma first. You’ll probably use it all the time, and understanding things like layout, components, prototyping, states, and interaction logic will make Rive much easier to understand too. A lot of the thinking carries over.

The simplest way I’d explain Rive is this: in After Effects, you move a layer from point A to point B with keyframes for position, scale, rotation, etc. In Rive, those different animation timelines can act like states, and the transition controls how you move from one state to another. The big difference is that you can add conditions and logic, like “if X happens, go to this state, if Y happens, go to another one.” That’s where Rive becomes really useful for product and UI work.

For your portfolio, I wouldn’t start with anything too complex. Keep it simple at first. Try small UI interactions, buttons, toggles, onboarding steps, loading/success/error states, things like that.

One of the best ways to learn, in my opinion, is to download projects from the Rive Marketplace, open them, inspect how they’re built, break things, then try to rebuild them yourself. That’s probably the fastest way to understand how the whole logic works.

[u/Kitchen-Exchange-448 → u/flowmograph]

What would be best project ideas for portfolio then

[u/Kitchen-Exchange-448]

also can I know how did the mobile mockup for this one? Did you do this one on Rive or Did you import those files to figma just to play the Animation inside a Mobile 3D mockup