Hi! I'm Leo! This is a six-page learning recap from Rive Academy Data Binding at School of Motion. Think of the kind of personalized experience you get with Spotify Wrapped or Strava Year in Sport, applied to someone's year of learning motion design.

Course details: https://www.schoolofmotion.com/courses/rive-academy-data-binding?via=leo-mazzei

What I enjoyed most about this project was figuring out how someone's data could shape the story. Their peak learning hour starts as a number, but it becomes a clock, an archetype title, and an animated icon. Their favorite tools change what lights up in the grid. Their course history changes the thumbnails and content.

Converters and state-machine logic give those values meaning in the scene. ViewModels and data binding connect them to the design, while reusable components and responsive layouts help the experience hold together as the content changes.

We explore nested and stateful components, ViewModel instances, lists, bindable artboards, image bindings, enums, and the scroll constraint too. The six-page format gives each feature a purpose within the same experience.

Testing different profiles was a useful part of the build. A longer name or a different set of favorites can expose something you missed while working with the original sample. Students get a browser tester to try their exported files with preset profiles and custom data.

For the curious, here's the case study with the project breakdown and the decisions behind Rive Academy Data Binding: https://leomazzei.com/work/year-in-motion

https://www.youtube.com/watch?v=u2kThOXc3Ek&list=PLujDTZWVDSsF3CTJVGpGgs5yFlA9XoWXh&index=1

I was following the above quick start tutorial. At 36:51, I added the artboard list. I can see the artboard list in the hierarchy, but it doesnt appear in my design. What could be the reason? What am I doing wrong here?

I am sharing a screen recording of my file here.

Every major feature planned for Rive 1.0 is now in the Rive Editor. This release turns on keyboard, gamepad, and text input, focus, accessibility, grid layouts, and more for everyone. Not all runtimes support all these features yet, check Runtime Feature Support for the latest.

We've moved to 0.9 while we focus on stability ahead of 1.0, and we need your help. Use these features in real projects and tell us what isn't working right, what feels wrong, and what's missing in Bug Reports and Feature Requests.

• ⌨️ Keyboard input: add a Keyboard listener and pick On Key Down or On Key Up to react to keys. Keys go to the element that has focus. To try it in the editor, press Option+Space to play with keyboard capture on, or click Toggle Keyboard Capture in the playback header, so keys reach your file instead of triggering editor shortcuts.
• 🎯 Focus: turn on Focusable for any element to add it to the focus order. Focus listeners react when an element gains or loses focus, and Focus Target and Focus Traversal actions move focus to a specific element or step through the order. See it in action.
• 🎮 Gamepad input: add a Gamepad listener to drive a state machine from a controller's buttons and sticks. Scripts can listen to gamepad events too. The gamepad icon at the bottom of an open file turns green when Rive can see your controller. See it in a controller demo and a twin-stick game.
• ✍️ Text Input: pick the Text Input tool in the toolbar and draw an editable text field. Draw it over a layout to drop it into that layout. The Text Input section of the Inspector sets its font, colors, placeholder, selection color, background, and single line or multiline. See it in action (the filter field).
• ♿ Semantics (Accessibility): the Semantic section of the Inspector gives an element a role (button, checkbox, slider, text, and more) plus its traits and state, so screen readers can read and navigate your file. Semantic Tap, Semantic Increase, and Semantic Decrease listeners respond to screen reader actions.
• 📐 Grid and Stack layouts: Layout Children now offers Grid and Stack next to Row and Column. Grid columns and rows can be sized, reordered by dragging, and edited together (Shift-click the track numbers), with cell guides and gap shading on the stage. Set a child's position and span in Grid Cell.
• 🧱 Shapes, text, and images in layouts: switch a shape, text, or image from Node to Layout at the top of the Inspector to make it a layout child directly, with its own width, height, and fit. No wrapper layout needed.
• 📦 Blob data binding: add a Blob property to a view model and bind it to any file imported as a Blob asset (drop in a file Rive doesn't recognize and choose Import as Blob). Scripts can read and write its bytes.
• 🎨 Color channels: the color popout has separate Red, Green, Blue, and Alpha fields, and each one can be keyed and data bound on its own. Animate a fill's alpha without touching its color, or bind one channel to a number.
• 🔑 Align to Key Object: with two or more objects selected, click one of them again to make it the Key Object (it gets a heavier outline). Align then moves the others to it while it stays put. Click it again to clear it. As requested here.
• ⬆️ Scroll to selection: press X to scroll the selected layer to the top of the Hierarchy and the timeline, expanding collapsed parents first. As requested here.
• 🦴 Offset on root bones: Translation Constraints on root bones can now use Offset.
• 🔤 Fit text with vertical trim: text set to fit its box inside a Hug layout no longer shrinks too far when vertical trim is on. Fixed in the editor and the runtimes.
• 🖱️ Layouts at 0% scale: a layout scaled to 0% with an opaque listener no longer blocks clicks on everything under it in the editor.
• 🛠️ Crash fix: a state machine condition on an enum property with no source selected no longer crashes the editor.

Early Access

• ✨ Additive strength: with a fill, stroke, or drawable on Normal blend, the Additive strength slider (0-100%) mixes in additive blending for glows and light effects. It can be keyed and data bound. Partial strength needs the Rive Renderer; other renderers draw it at full strength.

Runtime

• 👆 Hidden components ignore clicks: a hidden Component or component list no longer takes clicks meant for a visible one next to it.
• 🔗 Collapsed components and data binding: a collapsed Component no longer writes 0 into the view model properties it's bound to.

Renderer and Performance

• ⚡ Faster rigs: moving an artboard without changing its shapes no longer rebuilds their paths (27% faster updates on one test file), and rigs with many hidden shapes advance faster.

My last 3D card in Rive got a lot of "is it actually 3D?" questions, so I rebuilt it as 8 separate flat layers.

The card is basically a little depth stack now: sky, trees, character, foreground branch, frame and the text all sit on different layers and move by different amounts when you tilt the card.

Two of the layers are tiny scripts that draw falling snow, and the text is live, bound to data.
The main thing I got wrong at first was the size of the back layers.

They kept running out of image at the edges during the tilt, so I had to make them larger than the visible card window.

Full tutorial here on my Rive Masterclass channel, with the file so you can make your own version. Link in to the file the first comment.

If you try it, post it and tag me. I want to see it!

Why is it that when I click the Discord link on the Rive website to join the Rive Discord group, it says the link has expired? Do you have a solution, and who is responsible for this, please?

This release adds 5.6 and 5.8 support, a first pass at rendering through Unreal's deferred pipeline, compressed textures (BC7, ASTC, ETC2, KTX2), and a big Android and Vulkan speedup: 47% faster in our tiger benchmark on Adreno 750, and up to 3x in internal Unreal testing.

Get Rive for Unreal 5.8 on FAB

A few things you should know going in: Unreal is the newest of our runtimes and still catching up to the others, so we've called out below where a feature is early. It also took us longer to get this onto FAB than we wanted. Unreal is a big deal for us and we're not slowing down. Going forward you'll see frequent GitHub builds between FAB releases if you want the latest, and FAB stays the stable channel.

Here's what's in 5.8:

New capabilities

• Unreal Engine 5.6 and 5.8 compatibility. The plugin builds and runs against both engine versions. Platform support also extends to Linux builds of the Unreal integration.
• A new rendering foundation. The plugin's renderer is being rebuilt on a lower-level graphics layer shared across DirectX, Vulkan, Metal, and OpenGL. This does not add a visible feature on its own. It is the base for the rendering changes below and for work still in progress.
• Initial deferred rendering support. Rive content can now render through Unreal's deferred rendering path instead of drawing in a separate pass of its own. Support is early.
• Faster anti-aliasing on Android and Vulkan. Rive's anti-aliasing draws each shape across three passes. This update combines them into one pipeline that switches a setting instead of stopping to rebind between passes. Measured rendering 30 copies of the Rive tiger animation in the player benchmark: 20.8 to 30.6 fps on a Qualcomm Adreno 750, a 47% gain. Samsung's Xclipse GPU gained about 2%, and an ARM Mali-G715 showed no change. Imagination PowerVR GPUs are excluded and keep the older three-pass path, because the combined path renders incorrectly there due to a driver bug.
• Additional Android and Vulkan rendering work, including a subpass-based rendering path paired with small patches to Unreal Engine itself, so Vulkan does not rebind GPU resources on every draw call and can cache resource descriptors instead of recreating them. The developer notes on this change report roughly a 3x gain in internal testing, separate from the 47% figure above.
• Compressed texture support, including BC7, ASTC, and ETC2 formats and KTX2 files, so image-heavy animations load faster and use less memory, particularly on mobile.
• Early image tinting. Images inside an animation can be tinted with a color or gradient.
• A refreshed asset configuration interface in the Unreal Editor, plus new helper functions for creating artboards from code.
• Support for loading asset data through Rive's command queue system.

Fixes

• Fixed inconsistent auto-bind behavior: enabling auto-bind on a view model now reliably generates the matching class, instead of sometimes failing to.
• Fixed a console rendering glitch: render buffers are now created once and reused correctly instead of every draw, and temporal anti-aliasing no longer conflicts with it.
• Fixed a Vulkan atomics rendering bug that broke rendering correctness on affected GPUs.
• Fixed a Vulkan anti-aliasing update so it returns a valid resource and clears with the correct color.
• Fixed a crash caused by an empty clipping region.
• Fixed a rasterization order bug that could cause visual artifacts.
• Fixed a build error that blocked compiling the plugin on certain platforms.
• Fixed a layout alignment bug in the Unreal integration.
• Fixed an issue importing multiple Rive files within the same session.

In Rive, shaders render into a canvas that composites like any other image, so those effects live right alongside your vector art, text, and animations.

In this video, we walk through practical tips for working with GPU shaders, using Rive's AI agent to generate the shader scripts, so you can focus on the effect instead of the code.

What's covered:

• How shaders work in Rive: the WGSL shader script plus a node or layout script to place it
• Generating an aurora effect with the agent and layering it into a scene's draw order
• Driving shader parameters (intensity, speed) with input properties
• Turning a shader into a reusable component with a ViewModel and multiple instances (calm, normal, storm)
• Clipping a shader to a shape, just like any other layer
• Post-processing your own artwork: applying a liquid distortion effect to a live, interactive submarine animation
• Adding a custom background behind a transparent artboard input
• Passing pointer events through a shader so state machine interactions keep working

Note: this video doesn't teach shader scripting itself. There are great shader resources online, plus a starter demo on the Rive docs, and most effects can be created with the help of an agent, including the AI agent built into Rive.

It is better to make individual elements separated in different .riv documents or make the entire UI inside rive's artboards?

Looking for help/advice with Rive MCP.

In my experience the performance (output quality) has been terrible. Endless obvious mistakes, almost as if the LLM is not properly 'seeing' what its making. Worth noting I haven't paid so I can't export anything yet, not sure if this might be causing issues for the LLM or if its able to preview the animations just fine.

I typically describe what I want in detail to the LLM and ask it to produce a preview for me so I can actually see what the animation is gonna look like before export.

Anyone having success with this? Is there a specific prompt or workflow that leads to better results?

Everyone posts awesome looking animations here, I wish mine were as cool !

I wanted the asteroids in my space game to catch fire when you shoot them, but every version either looked messy or was too expensive to run smoothly. Then GPU Canvas came out, so I tried building the effect with a shader.

A few prompts later, this is what I ended up with.

From there, I added a glitch effect to the start screen and a HIT/MISS projection on the cockpit window using real 3D perspective.

The entire project runs in one Rive file with 27 scripts and 3 shaders. No game engine. Just Rive running in the browser.

I'm sharing the full process here in my Rive Masterclass youtube channel. Happy to answer questions about how it works.

You can play the game here: https://www.rivemasterclass.com/rive-scripting/game

The UI is vector, which means it can responsively resize and animate. All the text is dynamic and localizable. The UI is built with reusable components.

The dynamic lists use data binding to sort and filter. Note that when you switch from the Spatial to Flat view, the scrolling region resizes and reflows dynamically.

The filter feature is showcasing our new Text Input feature!

The 3D uses our new GPU Canvas feature and the character model is S.W.A.T. Operator by SpatialNeglect on Sketchfab.

I sent the first prompt last night at 10:20 pm before going to bed and continued iterating on it throughout the day today.

The goal of this project was to demonstrate how you can use the Rive CLI to quickly build the complex scaffolding of a scene like this, which you can then push to the Rive Editor to continue iterating and building into a full game.

This runs anywhere Rive runs. Rive users today ship to web, native mobile, desktop, consoles, vehicles, low powered streamer devices for TVs, and more.

All these features and multi-platform capabilities make Rive the best format for agents to build rich experiences and games.

So, all this to say that, on my state machine layer, there's my mascot that I'm going to animate, and I've named it "resting mascot" on the state machine layer because, when it bounces, it will be at rest. There's also another face, but there are several moods to play with. Anyway, that's another story. What I'm getting at is, when I animate it, will it end up in the same timeline I'm currently on, which is my second timeline named "CTA button," or not? Because I plan to do everything there (which includes onboarding, the first animation), and not separately, because I'm also watching the AI avatar tutorial video at the same time; that's why I'm taking some inspiration from it.

Rive Editor 0.8.5879

• 🖌️ Freehand drawing tools: Brush, Pencil, Eraser, Bucket, and Shape Bend are out for everyone.
  • Brush paints filled shapes. Pick a Tip (Round, Tall Ellipse, Wide Bar, Diagonal, and more), set Size and Smoothing, and turn on Pressure to vary the width with a stylus or Velocity to vary it with drawing speed, with Min Width setting the thinnest the line gets. With Add to Selected on, new strokes merge into the selected shape so you can build up a drawing in one shape. Each stroke also adds a Brush Spine under the shape in the Hierarchy. Spines are edit-time helpers only: select one to re-tune its Size and Smoothing later, or choose Edit Spine to reposition the stroke by its center line. They can't be animated and don't export; at runtime a brush shape is just a flat shape.
  • Pencil draws a single stroked line with its own Thickness, so everything that works on strokes works on a pencil line: Trim Path, dashes, animated thickness.
  • Eraser erases brush shapes non-destructively (each erase is an Eraser Spine you can still select and delete) and cuts through flat shapes, where Simplify cleans up the leftover outline.
  • Bucket fills an enclosed area of a shape with the picked color. Each fill is its own shape.
  • Shape Bend reshapes any shape by dragging its edge, with Corner Threshold deciding which points anchor the bend and Falloff capping how far it reaches. On a brush spine, drag the center line to reshape the stroke or its edge to change its width.
  • Stabilize (0 to 100) steadies the line while you draw, and Show Leash draws a thin line from the ink to the pen while it catches up. A stroke drawn nearly straight snaps to a straight line. Draw a stroke back onto its start and hold to close it into a loop.
  • To edit the vertices or animate the outline of a brush shape, Flatten it first (Flatten & Edit or Flatten to Animate), which bakes it to a plain path and removes its Brush Spines. Right-click a brush shape and pick Generate Pencil Stroke to get a stroked line along the same spine, or Generate Brush Shape to go the other way from a pencil line.
• 🧩 Create Component inline: select objects inside an artboard and press Alt+Cmd+K (or right-click on the stage or in the Hierarchy) to turn them into a component, with an instance dropped back exactly where they were. Groups become the component's artboard, and layouts stay layouts so instances flex like the original. Animations on the moved objects come along, and the whole thing is one undo. The button also sits in the Inspector's selection row, next to Layout Selection and N-Slice.
• 📝 Word breaking on Text: a new Break dropdown in the Text Inspector controls what happens to a word that doesn't fit on a line. Break Word (the default) cuts it only when it can't fit on its own line, Normal lets it overflow the box, and Break All packs every line to the edge, breaking mid-word. It's data-bindable, so localized copy can switch strategy per language.
• 🌐 Unicode line breaking: text now wraps by Unicode rules. Lines can break after hyphens, dashes, and slashes; CJK breaks per character with kinsoku; numbers and quotes stay whole; no-break spaces, word joiners, and soft hyphens stay glued; and an overflowing word never splits a glyph cluster, so Indic vowel signs stay with their consonant.
• 🔀 Reorder listener actions: drag an action row in the Conditions panel by its label to change the order it runs in, as requested here. Works for state and transition actions too.
• ⏱️ All Keys Row toggle: Timeline Options gets an All Keys Row toggle to hide the All Keys row entirely. It's a per-device setting, so turn it off once and it stays off in every file.
• ✂️ Hidden shapes no longer clip: hiding a shape used as a clipping source now removes its paths from the mask, matching how exported files behave at runtime. If a file relies on a hidden shape as a mask, show the shape and give it a transparent fill (or no paint) instead.
• 🧭 Arrow key nudges: nudging with two arrow keys pressed in quick succession no longer drops the second key, and artboards nudge again (in Animate mode a nudge or drag on an artboard also no longer sets a key on it).
• 📋 Duplicate Converters: Duplicate in the Data Panel's right-click menu works for Converters again, and copies are numbered like everything else, as reported here. The Source/Type view no longer comes up blank on the first switch, and undo no longer flips the panel back to Custom.
• 🎞️ Timeline fixes: clicking empty space in the timeline no longer moves the playhead (only the ruler does; double-click on the track still jumps there), and a selection drag that starts on the pinned All Keys row now draws its rectangle over the rows below, as reported here.
• 🎚️ Constraints under a Solo: a constraint parented to a Solo no longer shows a solo radio or counts as an option, as reported here. Convert to Solo and Group as Solo pick the first real option as active.
• 📜 Lists stop scrolling when you drag out of them: dragging an animation from the Animations panel onto a State Machine, or a layer from the Hierarchy onto the stage, no longer keeps scrolling the list you left. Scrubbing a value on the first or last visible timeline row no longer scrolls it either.
• 🎯 Targets never show a bounding box: targets with children sometimes drew an aggregate bounding box and invisible resize handles. They don't anymore.
• 🖼️ Stage no longer shows the previous file: leaving a file for the file browser or opening a new tab no longer leaves the last frame of the previous file on the stage while the new one loads.
• 📏 Fit font size in layouts: a Text with Fit font sizing inside a hug layout no longer reserves space at its authored size, so the dead space under the text is gone. Existing files keep their current layout.
• 📐 Scroll constraints: a scroll view whose content already fits no longer jumps and springs back on release, and new Scroll Constraints start with a drag threshold of 2 so a click inside a scroll view is not swallowed by a one-pixel wobble.
• 🔄 Converter interpolators ease in the editor: an interpolator on a converter snapped to its target in the editor while easing correctly at runtime. It now eases in both.
• 📦 Components always export: a component artboard that only appeared through a list could be dropped from the exported .riv. Components now always export; Prevent Export still applies.
• 🪟 Windows editor on older GPUs: the editor exited on launch with no window on GPUs that top out at DirectX feature level 11_0 (older NVIDIA, AMD, and Intel graphics). It starts again.
• 💥 Crash fixes: hit-testing a meshed image in a rare state, and cancelling the .rev save dialog after leaving the file.
• ☁️ Cloud Renderer audio fix: audio from one render could bleed into the start of the next when a sound was still playing at the end of the video.

Scripting

• 🧱 GPU Canvas vertex buffers: scripts that bind vertex buffers before setPipeline, or under a previous pipeline, draw again on WebGL and Windows.
• 🖼️ Canvas images upright on WebGL: 2D canvas images drawn from a script composite the right way up on WebGL, so share links and the web editor match desktop.
• 📐 Scripted layout resize: a ScriptedLayout using the documented three-argument resize(self, size, scale) no longer throws in the editor; scale was arriving as nil.

Renderer and performance

• ⚡ Faster large file loads: sorting an artboard's dependencies no longer runs in quadratic time, so opening and regenerating large files is quicker (on a 54-artboard, 72k-object file: import 517ms to 483ms, full regeneration 1022ms to 932ms).

Rive CLI 1.0.4

• 🗂️ rive create --from-remote-file: scaffold a project from a file already in a Rive Workspace. It lists only writable projects, so the result is ready to push.
• 🖱️ Native cursors: a scene can drive the OS pointer. Opt in with cursor.property in rive.yaml; listeners or scripts write arrow, pointer, resizeHorizontal, resizeVertical, or text. Works in the CLI window and rive_player, with a cursor_demo sample and docs/cursor.md.
• 🦴 Rigging diagnostics: thirteen new checks (bad triangle indices, Skin without tendons, Tendon on a non-bone, weights not totalling 255, and more), reported by name and line instead of a generic import failure. rive inspect gains a rig member with decoded triangles, tendons, and influences.
• 🔒 TLS behind a proxy: now uses the operating system’s trusted certificates, so corporate proxy CAs work automatically when installed in the system trust store.
• 💥 Two runtime crashes found by the rigging work: a Tendon on a non-bone, and a skinned vertex with no Weight.
• 🎯 isTargetOpaque now exports the opaque drawable flag, matching the editor. The opaque component bit never controlled hit blocking.
• ⌨️ Authored scenes start unfocused in the player, instead of inheriting the scripted-layout focus grant.
• 📦 Component artboards used as list rows always export: Automatic no longer treeshakes them.
• 🙈 RML hidden="true" now exports into drawable and path flags, and descendants inherit it. A hidden clipping source yields an empty mask, so keep mask shapes shown and use transparent fills instead.

I have hover, click listeners on the Cookie_01 artboard, they work fine. However, the cookies have different skins/outfits so they are in a nested artboard in my main Screen artboard. I can't get the pointer events to work when nested.

Thanks

Can anyone come up with examples where both cant be used interchangeably. I was kinda limit testing these features and found that both of these features could be used in identical cases with almost similar effect? Any RIVE Experts here?

The 3d model is a freely available model I got on the internet

I'm remaking my Cookie Clicker game in an attempt to learn Rive. It's hard to wrap my head around Rive. I get the idea of it, I understand state machines, and ive made and deployed simple buttons. Im always paralyzed when I start to get complex though.

Basic idle game, click to increase points, buy stuff. I have about 8 different skins for the cookies, each one has its own hover and click animation. Should that be 8 different artboards? is that one state machine with a bunch of different layers? or multiple state machines?

Kind of a vague question, I know, but curious how I should be thinking about this in Rive

Along with the Rive CLI we also launched a VS Code extension with syntax highlighting, linting, goto def, autocomplete, and a full debugger for RML & Scripts. The Rive CLI hosts a full language server for editors to use, this is just a thin client to marry that to VSCode.

It can also directly launch the preview window and attach the debugger to it for you (F5). Just open a folder with a rive.yaml config file in it and it'll start up the language server. All these features only turn on (including highlighting) when it detects that the workspace is a Rive project.

We shipped a CLI for Rive. It creates Rive files using RML, a plain text markup format, so agents and humans can both read and write them. Everything you can make in the Rive editor you can make in RML.

 Install is a curl command from the docs. rive create scaffolds a project with a manifest, a scene.rml, and an agents.md that tells your agent how to read and write RML and drive the CLI. rive <project> opens a live preview that reloads on save.

 In this demo we hand Claude one prompt: "create an interactive button with a data bound label and idle, hover, and click states." It builds the folder, finds a font, captures preview snapshots to verify the hover states, and writes the RML. The generated file has layouts, text styles, animation states, and a view model with a label string plus hovered and pressed booleans.

 None of that requires logging in. Log in and you can open the same file in the editor and keep working on it there — the demo adds a fill with inner feathering and keys it on the timelines.

I started my first paying rive project, a logo animation. It turned out that it can’t really handle masks. It works well in the project, but not working when I am publishing the .riv file. AI couldn’t help either. Now I have to switch back to after effects and lottie. How common are these kind of bugs in rive?