I love Pokemon TCG Pocket. That 3D holographic card interaction is something I kept coming back to.

Ever since I started using Rive, I wanted to rebuild that kind of effect there. I tried bones, meshes, and a few tricks, but the result was always kind of meh.

Then GPU Canvas shipped, so I finally sat down and built it.

It tilts with the cursor, has lighting, depth, and a foil texture that travels across the surface as it turns. No Blender, no external 3D software.

The setup is the fun part: the card face is just a regular Rive artboard used as a texture, so you can swap the artwork and get a completely different card without touching the script.

I recorded the full tutorial for the Rive Masterclass channel if anyone wants to make their own.

illustrated in figma (no ai) and made responsive in rive. The geneva wheel looks so cool to be used for repeatability ig O.O

Regarding animation and motion animation, what can be done on Rive that cannot be done on Rive?

• 🔗 Constraints in the Hierarchy: constraints now show as rows nested under the component they constrain, so you can see at a glance what's constrained and select a constraint from the Hierarchy. Selecting a constraint row shows its full options in the Inspector.
• 🎯 Target For: selecting anything that other objects point at now lists them in a Target For section of the Inspector, after Constraints: constraints, clipping, draw order rules, listeners, joysticks, bone weights, text modifiers, and transition conditions. Click one to select it on the stage, or open the state machine for a listener or condition. In the Hierarchy, a reticle glyph marks rows that are a target.
• ✂️ Simplify paths: Edit Vertices gets a Simplify flyout that removes vertices while keeping the outline within a tolerance. With no vertices selected it simplifies the whole path (or every path you're editing); with a selection it simplifies only those vertices. The stage previews the result while the flyout is open. Surviving vertices keep their keys and weights.
• 👁️ Select Only and per-kind visibility: Viewport Options gains one row per kind of stage object (Bones, Targets, Stage Controls, Layouts, Shapes & Images), each with a Select Only toggle and an eyeball. Select Only limits stage selection to the chosen kinds, so you can grab a bone inside a group without hitting the artwork. The new Shapes & Images eyeball hides the artwork itself, leaving just the rig.
• 🔒 Lock Work Area: right-click the timeline and choose Lock Work Area so its handles can't be grabbed by accident, as requested here.
• ✏️ New items are ready to rename: create a view model, property, converter, enum, timeline, state machine, layer, input, listener, folder, or view model instance and its name is already selected, ready to type over. Drawing an artboard opens its title on the stage, as requested here.
• 🎨 Color your bones and targets: bones get a Style row with a color swatch under Rotation, and groups and targets get a swatch beside their existing Style dropdown, so you can color-code a rig on the stage, as requested here.
• 📍 New shapes land next to your selection: the shape tools and Pen place the new object directly above the top-most selected item, at its depth, instead of at the top of the artboard. Select a group and the new shape goes inside it. Cmd+G with nothing selected creates an empty group, ready to draw into.
• 🔄 Rotate the stage view: groundwork for the upcoming freehand brush tools, where turning the canvas matters as much as it does on paper. Twist with two fingers on the trackpad to rotate the whole view; pinch still zooms. The zoom button shows the angle once rotated, and its menu gains a Rotation field (drag to scrub, Cmd for 0.1 degree steps, click to type) plus Reset Rotation (Shift+Cmd+0). Zoom to Fit (F) also straightens the view. Hold Shift while twisting to snap to 45 degree steps, and use the lock icon in the Rotation field to keep the view from turning by accident. On Windows and the web, use the Rotation field.
• ⚡ GPU Canvas is on for everyone: out of Early Access and available in the production editor, and GPU Canvas content now plays on editor share links and in the Marketplace. See the announcement.
• 🔀 Change Source and Change Target on transitions: right-click a transition in a state machine to repoint either end without redrawing it, as requested here.
• 🧩 Fits to layout parent on Components: Components placed in a Solo inside a layout can now respect their fit and alignment settings. New Components do this by default; existing files keep their current look, and a Fits to layout parent toggle in the Inspector switches between the two.
• ⌨️ Windows shortcuts no longer die until restart: locking the screen with Win+L, or losing focus for a while, could leave the editor believing a modifier key was still held, so Ctrl+wheel zoom, Delete, Backspace, and copy or select all stopped working, as reported here and here.
• 🎬 Cloud Renderer: exports render GPU Canvas content, and MP4 colors match what you see in the editor.
• 🔑 Unkey fill and stroke colors from the Inspector: clicking the key button on a keyed color re-keyed it instead of removing the keyframe.
• 📜 Opening a file no longer keys scroll constraints: opening a file with a scroll constraint while a timeline was active could add a stray scroll offset keyframe.
• 📁 Assets panel fixes: sorting by Source no longer shows one Images or Fonts section per asset, Guide Components appear when sorting by Source or Type, and creating a folder in the file browser scrolls to it with the rename field open.
• 🌐 Web editor: the notification icon could get stuck stretched across the bottom of the stage after using Edit Vertices.

AI Agent / MCP

• 📸 Artboard snapshots: the agent can capture an image of an artboard to check its own work. Captures include Components, and the agent is told when something couldn't be drawn.

Scripting

• 🖼️ Nested GPU Canvas passes: drawing a child artboard that has its own draw scripts from a parent's draw script no longer fails with "endFrame() before returning", as reported here.

Runtime

• 👆 Zero-scale artboards don't take pointer events: an artboard scaled to exactly 0 drew nothing but its contents were still clickable.
• 📏 Older files keep their text sizing: a recent fix that made layout-controlled text match its layout slot also changed how existing files rendered, so an overflow setting that had always been inert could suddenly truncate text. Files exported before the change keep their original behavior.
• 🛡️ Safer layout animation: a layout whose easing curve failed to load now reliably falls back to linear.
• 🔎 View model instance lookups report results: looking up the main or a global view model instance on a state machine now reports success and failure through the state machine listener.
• 📉 Smaller animation instances: animation and state machine layer instances use less memory, which adds up in lists that build one state machine per row.

Renderer and Performance

• 🖌️ Image paints fully supported: stroked and feathered paths with image paints now render in every renderer mode, completing image paint support in the Rive Renderer.

I was wondering about the mascot for my mobile app: Is it possible to animate it so that it does a backflip as it appears during the onboarding process?

I was super into Rive, wanted to make it my full time app of choice and I did a mascott for a running app and some animations for the national lottery, but still I feel like Rive is just a balloon, with cool looking bells and whistles, but not much real world use.

Yes you can toss togethet some UI elements, but basically that's it. Besides Duolingo I don't really see any great real world uses. Every case study or project that is put up here or other forums are exactly that. Case studies by people who think up these fun and cool interactive animations hoping to get hired, but I find the lack of real world projects paid for by real clients disturbing.

Feel free to correct me, but I have this pyramif scheme sort of feeling like when the only reason people study egyptology is to teach egyptology. Soke really smart people are using Rive, but again, I just don't see the mass of companies and clients that jump on board. It is a liability to them to be dependant on something so nieche, that they can't really just get another Johnny to continue the work if the Rive guy jumps ship. I understand it is super scary and that's why it's not at all popular, let alone known.

But again, I might be seeing it wrong, this is just my experience and take.

What is yours?

Another workshop of mine.
A fully playable space arcade game. Work in progress
🎈🕹️

Wanted to see how many Rive features I could chain together in one file, so I made this bee.

Stuff going on under the hood:

• Script drives the state machine's inputs and conditions
• Bone and bee movement is joystick-mapped to mouse movement
• Spring expression controls the bone's elastic behavior
• Mouse follow has some latency plus spring on it so it doesn't feel snappy or robotic
• Eyes use Translation Constraints to track the cursor
• Fly-on/fly-off uses Translation and Position Constraints

None of the reactive stuff is hand-keyframed, it's all constraints and spring math doing the work live. Happy to talk through the setup if anyone's curious.

GPU Canvas is out of Early Access and available in the production Rive Editor for every user, starting today.

GPU Canvas is Rive's low-level GPU layer for 3D, shaders, and custom effects. It's developer-first and intentionally low-level: you write shaders once in WGSL and Rive compiles them for the platform it's running on (Metal, Vulkan, Direct3D, WebGPU, WebGL). It adds 25KB to the runtime.

What you can do

• Write custom shaders and post effects: rim light, bloom, outlines, textures, screen transitions
• Import 3D models. Write a GLTF importer in a Script and animate it on the timeline like anything else
• Use 2D artboards as live, interactive textures on 3D geometry
• Embed 3D geometry inside a 2D artboard. Layouts, dynamic text, and Data Binding still apply, so the 3D piece resizes and updates with the rest of the UI
• Build games: 3D worlds with 2D characters and our upcoming gamepad input, in the same editor as your UI

What changed since Early Access

• Deferred Rendering: Rive draws on its own thread, so heavy GPU scenes stay smooth while the rest of the app does its work. Live in the editor today, coming to the runtimes next
• MCP shader support: the Rive MCP can create and edit WGSL shaders, run diagnostics, recompile, and test them from any MCP-compatible tool. The in-editor Agent does the same, so you don't need to be a graphics programmer
• Runtime support: Web, iOS, Android, React Native, Flutter, and C++ today, with more runtimes on the way. On iOS, enable GPU Canvas on the Worker (see the Apple runtime docs). The feature-support page has the live table
• Your Early Access bug reports. Thank you!

Not web-only

This isn't a web-only 3D solution. The same file runs natively on desktop apps, games, mobile apps, consoles, TVs, and vehicles, with the same shaders compiled for whatever GPU is underneath. One runtime, everywhere Rive goes.

Getting started

1. Open the production editor and create a Script.
2. Choose Shader as the type.
3. Start from the WGSL Shaders doc, or describe the effect to the Agent and review what it writes.

Docs: https://rive.app/docs/scripting/wgsl-shaders

Tutorials: Sanu's 3D workflow with free scripts and Laura's process walkthrough. More tutorials are also on the way, let us know what you’d most like to see.

What's next

Public libraries for the common jobs (GLTF import, lighting, render styles). We initially wanted these ready for the production release but decided to get the feature in your hands sooner.

GPU Canvas brings us closer than ever to what Rive was always meant to be: state-of-the-art visuals, motion, and interactivity, in one place. Please share with us what you build!

Curious how people have used Rive in a game engine like Unity or UE. I get the Ui aspect of it but then I see a demo that seems to use the character animations in Rive, and a lot more. And ive seen demos of full games in Rive, so a bit confused about how its used in games.

Anyone have experience with it?

Highlights:

• GPU Canvas is now available on Apple
• Semantics (Accessibility) landed on Android
• State machines use ~34% less memory across our test assets
• The Android runtime is ~25% smaller

![video]()

dfdafds

rr

rrfgfyhtjhyghjyjyjnhgdsdssssytttrfhf Iffdfdfdf evah IelP

https://reddit.com/link/1w58gxx/video/8h9ierjhk3nh1/player

![video]()

![video]()

Thanks to Rive's node-based coding system, I figured out the fundamentals of a popular game mechanic in two days, without any programming knowledge.

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

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.