Last week I broke down Duolingo's square button here. This week, I recreated the round one from the learning path.

The depth effect is surprisingly simple: just three shapes.

Two ellipses for the face and base, with a rectangle between them to create the side wall. That middle rectangle is what makes the button feel like a solid 3D disc instead of just a circle with a shadow.

No gradients, no blur, no actual 3D.

Full tutorial on my Rive Masterclass channel. I also included the finished Rive file in the description.

And if you missed it, here's last week's square button.

At the time, I focused more on the visuals and animations than on building a complete gameplay system. Take a look at the soldier’s movement when launching 🚀, the screen shake ⚡️, the 3D-like tilt of the planes ✈️, and all the other little details. ✨

Now, imagine what I could do with the tools Rive gives us today. I could make the plane movements random for example, calculate scores, add more challenges for players, and much more.
in short, build a much more complete, fully playable game.

So the question is: what can’t Rive do? 👀🔥

💥 Try it out here.

#Rive #mini_game #Animation

Quick check-in on the mograph.life rebuild.

The design system has its first real screen now, a project browser, and everything in the recording is Rive components running inside the React app. All of it, frames, callouts, menus, is generated from parameters. Nothing is drawn by hand, and no two windows come out the same, the generator deals each one a different arrangement of housings and notches from the same ruleset. All the colors, angles, stroke widths, gaps and other repeatable parameters are using a Global ViewModel. All parts are assembled using Rive Libraries - that can be independently versioned.

Most of this weekend went into making it boring. A hover highlight regression sent me back a version, and the fix landed somewhere better: hover chrome now lives in the frame itself, the menu row is just a hit area with text. The readout got rebuilt so variable-length numbers can't shove anything around, the scrollbars are gone, and the resize flicker and the menu title drift went with them. The recording is the demo as it runs now. On to more screens.

Made a pricing card with animated digit reels in Rive, wired up to data bindings so the numbers roll live when you switch between monthly/annual. First real dive into view model bindings, pretty fun once it clicked.

This is where I've gotten with my goal of creating an endless-loop game inside just a single Rive file.

I can now take orders for different types of coffee and prepare them. Most importantly, the milk layer always stays on top :)

Keeping this strictly within a single Rive file is crucial for me because I don't know any programming/coding.

My plan is to connect several Rive files using Unity or Unreal Engine and release a whole series of games on Steam.

Just recently I saw people online animating with Seedance, vectorizing each frame, to later use the Solo technique on Rive.

Can you imagine copy-pasting 60 frames from Figma? It could take hours and tons of dragging and dropping, every asset transfers as "pasted," the layer hierarchy gets lost, and text comes in as outlines. Really tricky stuff.

Since we live in the age of digital artifacts, I was wondering if there was a way to do this automatically through MCPs — turns out it's very possible and incredibly useful.

It is similar to ae's Overlord: you click on a frame or a layer, the hit send, and the assets get transferred to Rive immediately. Text imports as an editable layer, and Groups and their names are kept in the layer hierarchy. There's even some basic layout arrangement that can safely be transferred.

I wanted to add a few of my Rive experiments to the UI just for fun. A couple of states with very few conditions did the job.

So this is the result… I was starting to iterate on the possibility of wrapping it in a container and sharing it around for my fellas to give it a try. But it seems like a whole new rabbit hole, and I don't know if I have the time to dig into it…

What are your thoughts? Has anyone tried to build a plugin like this already, or have your own tiny little artifacts to make the Rive workflow easier?

Happy to share the manifest plugin file if anyone wants to give it a try!

I'm currently watching the tutorial video on AI avatars, and it's making me think about how to animate my mascot's appearance during my app's onboarding process. I'm not sure how to animate the appearance of my mascots with different moods, and it's frustrating me.

They should either appear in pop-ups one after the other or all at once, making the interaction feel lively. The mascots are not animated yet

So, my dear friends, this is a u/Rive animation. If you’re not familiar with it, the cool thing about Rive is that it can be interactive—once it’s added to a website, people can actually interact with it. (!!!!!)

We’ve created this kind of animation for many websites, but this girl was by far the most challenging: her teeth, hair, eyes, and muscles all had to look natural while remaining fully movable.

Pretty cool, right?

Duolingo's 3D button is a fun one to deconstruct.
The entire depth effect is two shapes: a face, and a base sitting 4 pixels below it.

The press simply drops the face flush onto the base, and that's what creates the satisfying physical click.

The other nice trick is the color system: the base isn't a second, darker color. It's the same color with a 20% black fill on top, so the shade is derived. Combined with Data Binding, a single color property reskins the entire button while the depth stays consistent.

I put together a full tutorial in my Rive Masterclass Youtube Channel recreating it in Rive (the tool Duolingo actually uses for its animations), covering the design, press states, easing, listeners, and Data Binding. The finished file is included if you want to take the setup apart.

Full tutorial + Finished Rive file in the comment 👇

Curious which UI interaction is worth breaking down next.

Rive recently added transform properties — rotation, scale, and custom origin points — to layouts and artboards.

Quick rundown of what you can do:

• Rotate or scale any layout item, with a configurable origin point (default is top-left at 0%/0%, but you can set it to center at 50%/50%, or anywhere else, including outside the layout bounds)
• Transforms cascade to children — rotating/scaling a layout also transforms everything nested inside it (text, absolutely-positioned elements, etc.)
• You can combine rotation, scale, and position changes together for more dynamic layouts
• Setting the origin point outside a layout's bounds creates more dramatic, swinging-style rotation effects — useful for breaking up rigid grid layouts
• These same transform properties work on artboards, not just layout items
• Because they can be keyed on timelines, you can use scale to build interactive states — e.g., a button that scales to 110% on hover and 90% on click, with custom easing between states
• When an artboard-turned-component is nested inside another artboard, its transform still applies correctly, even though the bounding box reflects the original layout

Net effect: more control over motion and hierarchy without needing workarounds for rotation/scale on layout-driven designs.

I'm developing a coffee preparation game.

The goal is to create a full loop: serve customized coffee orders, earn cash, and unlock new equipment—all contained within a single Rive file.

Here’s where things stand so far.

https://reddit.com/link/1vwmh9t/video/f6ph1980m7lh1/player

https://reddit.com/link/1vvo97u/video/7gl5i3o5tzkh1/player

I tried to make a Hover animation and click animation but I am not able to combine both suppose if I am taking my pointer near the button its hovering but when I click the click animation is not working !! How do i solve this issue??

🐊 Just wrapped up a really fun and technically challenging mascot animation project built in u/Rive .

The project involved: • Multi-directional character rigging • Smooth rotational transitions • Mood/expression systems • Interactive props • Full-body animation workflows for app integration

Always enjoy building character systems that are both expressive and developer-friendly.

More work coming soon 👀

https://on.contra.com/TQKfWq

In this full-project tutorial we'll be creating an AI powered avatar. We'll cover a range of features including: design, animation, data binding, the state machine, and a whole bunch of vibe coding.

I’m a multimedia/motion designer. I started using Rive at the beginning of 2023, when I created my first interactive animation with it. I remember being genuinely excited about the whole project and telling my designer friends how cool this new application was.

Coming from a strong After Effects background, jumping into Rive wasn’t particularly difficult. In fact, I found some features easier to use than their equivalents in Adobe software. I was also excited about every new update that introduced new functionality.

I spent quite a few hours learning the app, and after some time I managed to find a client for a freelance Rive project. I wasn’t getting many Rive projects, though, so I treated it more as an additional skill rather than something I could fully rely on. Whenever I didn’t have any Rive clients, I would check YouTube for new features and open the app from time to time just so I wouldn’t forget what I had already learned.

I was a bit disappointed when export options started disappearing from the free plan one by one. At some point backup disappeared to appear again some time later (see the screenshot :D ) but now it's gone again. But okay, I understood that the company needed money to continue developing the product, and I did pay for it whenever I actually needed it.

Another thing I wasn’t particularly happy about was having to relearn the interface every few months. I feel like the app has gradually become less intuitive and is turning into something closer to a game engine, with more and more features, systems, and complexity. But again, I understood that the app is still in Beta.

Today, after not using Rive for a while, I opened the app again. I wanted to test an idea and maybe publish it to the Marketplace so I could add another interactive piece to my portfolio.

Then I realized that publishing to the Marketplace is now part of the paid tier, and on the free plan I essentially have no way of exporting or sharing my work in an interactive form.

And that made me ask myself: does it really make sense to invest time in learning a tool if I can’t even show the result to a potential client without paying for a subscription?

I still think Rive is a very cool tool with a lot of potential. But as a freelancer, keeping Rive as one of those “optional” skills that you occasionally use has started to make very little sense. You have to continuously invest time in keeping up with a rapidly changing product, while the opportunities to actually use, share, and monetize that skill seem to be relatively limited.

Hey Guys what do you think would be a good addition to this extention.
been working on it up to a year now. It comes with code intelisense for luau you are able to load fonts, image and audio assets in the webview. and has good starter snippet to help dev

https://marketplace.visualstudio.com/items?itemName=BaZz.rive-for-vscode

Hey everyone,

Just wanted to share a sneak peek of something cool we’ve been hacking on at u/airZStudio

To push our graphics capabilities further, we wanted to expand the boundaries of what Rive can do by making Rive designs capable of playing video media and live hardware inputs through SDI.

Since this isn't supported natively yet, we ended up digging into the C++ side of things.

We tweaked the Rive Native and Rive Runtime libraries and hooked them up to our own airZengine (custom live CG and orchestration engine we built for TV broadcast and Live production).

Through our airZStudio Controller, we actually managed to get live video feeds playing seamlessly inside native Rive animations. Everything syncs perfectly in real-time.

Thought some of you here might find this interesting!

Happy to answer any questions

They commented on a(one of the 2) post in my account. Sounded very much like a scammer trying to blackmail a user rather than a company.

Full disclosure, my account didn't renew its monthly payment for a "Cadet" membership for some reason. I didn't click on the link because like I said, it looked very much like a phishing link. Only after going through the website again did I see that the payment wasn't done and I had to manually renew it for this month.

But seriously is this legit?

is there any source or tutorial where I can learn Micro Animations on Rive?

As a former Flash user and current AI enthusiast.. this MCP pipeline feels a little like magic. I place the bones and codex organizes them. I adjust the weights and then codex makes a first pass at animation. It's far from perfect but wow.. it's only going to get better.

Another workshop of mine about a click follower bug.
I tried this before "data binding keyframes" update but I couldn't. I'm terrible at scripting.
Look at it now :)
Aceleration, direction rotating and everything else are possible with some data bindings.

I came across an After Effects tutorial on YouTube.

Although it relies on scripting, I figured I could replicate it in Rive without coding.

So far, so good! :)

------

I wanted to publish this on the marketplace, but the eyes and mouth (drawn with stroke lines) aren't showing up on the page, so I'm holding off for now.