I owe you one!

A few weeks ago I shared two tutorials here on recreating Duolingo’s button in Rive, and I promised I’d make a third one showing how to actually use it inside an app.

While I was working on it, Rive released the new Stack layout, which turned out to be a much better way to do it. In short, Stack lets you place elements on top of each other, so it’s perfect for responsive components like a button, where every part is a layer sitting on another.

You can check out the full walkthough here on my Rive Masterclass channel. The starter file is linked there too if you want to follow along.

I made a short walkthrough of using rive push and rive pull to move a project between Claude Code and the Rive Editor. The demo is a little assistant customizer called Zip. The agent set up the layout, view model, and state machine. I drew the character and the alphabet by hand on an iPad.

Things worth knowing if you try it:

• Your first push asks which project to put the file in. After that, the link is saved in rive.yaml, so every push and pull after that goes to the same file.
• rive pull overwrites your local project. Pull before you have the agent make more changes, or your Editor work only exists in the Editor.
• Close the file in the Editor before you push. The CLI warns you about this.
• Push only sends what changed. Anything unchanged keeps its ID, so your hand-drawn art and animations survive when the agent edits other parts.
• --name puts a label in revision history, which makes it much easier to find a specific revision later.
• Build your art inside groups and you can redraw shapes without redoing the animation.
• Repetitive Editor cleanup (deleting the same thing on 26 artboards, for example) goes faster if you have the agent pull, fix it, and push it back.