Prompt-Built Interactive Graphics: Pairing the Rive CLI With Coding Agents

Interactive graphics that react to a cursor or a tap, like Spotify’s yearly Wrapped recap or the loading icons in FigJam, are built with Rive. Until recently, making them meant hours in the Rive desktop editor: setting up artboards, rigging bones, wiring state transitions and scripting each interaction by hand. Rive now ships a command-line interface (CLI) that plugs into coding agents such as Claude Code and Codex, so the same work can start from a text prompt. Five builds, from a simple physics effect to a 3D desk lamp timer, show what an agent handles well and where a person still needs to step in.

Why Rive is different from Lottie or MP4

A Rive graphic is drawn in real time by a runtime inside the app, and it can carry a state machine, a set of rules that switches the animation between states based on input. That is what lets it respond to pointer hover, touch, gestures and input values. A Lottie file or an MP4 clip, by contrast, plays back a fixed sequence.

Duolingo’s characters are a well-known example. Layered state machines move a character between Idle, Correct Answer, Incorrect Answer and Neutral states, with lip movement kept in sync. Smartwatch faces and smart home control panels are built the same way.

The catch has always been the manual effort. The Rive CLI hands that effort to a coding agent, which can generate, script and preview interactive vector graphics from natural language instructions.

Getting set up

The free plan already includes both the editor and the CLI.

The free plan is enough to experiment, but every animation exported from it carries a mandatory Rive splash screen. Removing it for a production release requires a paid plan.

The setup takes four steps:

1. Create a free Rive account.
2. In the Claude Code desktop app, create a project folder used only for Rive work.
3. Select Claude Opus 5.5 with High reasoning effort, and turn on Bypass permissions so rapid file edits do not trigger repeated approval prompts.
4. Run the one-line install script from Rive’s website inside that folder through Claude Code.

After that, Claude Code can author, script and preview Rive artboards locally. Because Bypass permissions skips approval checks, keeping it confined to a dedicated folder like this seems like the safer choice.

From a static image to a responsive effect

The first build is the simplest kind of interaction. Claude Code receives a reference image of vertical gradient bars that fade in the middle, with a request to redraw it as blue lines on a black background that act like stiff guitar strings when the cursor passes over them.

The agent writes the physics itself in Luau, the scripting language Rive uses. The script tracks the pointer, catches and bends a line at the point of contact, releases it into a snap-and-ring oscillation at 5 Hz, and then damps the motion progressively. In the preview, sweeping the cursor across the canvas pushes the lines aside exactly where it touches before they settle smoothly.

Building UI components from two screenshots

The second build turns still frames into working interface parts. Two screenshots come from OpenAI promotional material: one of a collapsed, pill-shaped prompt bar reading “Ask ChatGPT,” and one of the same bar expanded into a white card with an aquarium thumbnail and a typed query. The instruction is one sentence asking for an animation in which the prompt rectangle opens up on hover.

Claude Code reads both states and builds a rounded vector container. On hover, the card grows with a slight overshoot, using easing (the acceleration and deceleration curve of a motion), swaps its icon, fades in the image and types out the text behind a blinking cursor.

The lesson is to supply both the starting and the ending state. With both screenshots, the model knows exactly where the animation begins and ends and can fill in the motion between them.

The same approach works for hardware-style interfaces. Given several screenshots of a circular smart home thermostat, Claude Code builds a prototype from scratch with a draggable dial that runs from cooling to heating, temperature numbers that update, mode toggle buttons and an ambient background glow that shifts with the setting.

Reading and rebuilding a website’s hover effects

For a more complex layout, the target is Dropbox’s brand guidelines site. Near the bottom sits a bento grid, a layout of tiles in different sizes fitted together like a lunch box, with eight tiles: Framework, Voice & Tone, Logo, Typography, Color, Imagery, Iconography and Motion. Each tile has its own hover effect, from bending bezier curves and sliding quotes to a spreading logo diamond and a padlock shackle that opens.

The prompt gives Claude Code the site address and asks it to scroll to the bottom, analyze the bento grid and rebuild it in Rive with the hover animations. The agent reads the page, works out the widths, gaps and RGB color values of every row and column against a 1024x768 viewport, and recreates the grid as vector graphics with matching triggers.

The first pass captures the structure and motion well, but finer micro-animations such as the padlock latch still benefit from manual polish. It is more accurate to treat the result as a fast draft than as a finished piece.

The rebuilt grid can also be restyled. Using a futuristic handheld gaming controller with dark neon buttons, spotted on X, as a reference, Claude Code turns the layout into a dark Claude Code theme. Its rounded cards, labeled Chat, Write, Code, Edit, Work, Analyze and Research, light up with purple and white wireframe glows on hover.

A character loading screen with help from MCP

Character animation brings in more tools through MCP, the Model Context Protocol, a standard for connecting AI agents to outside tools and data.

1. Generate the base art, a white bunny sitting at a laptop, with ChatGPT.
2. Connect Claude Code to Mobbin, a library of app screens, through the Mobbin MCP server, and search for mobile loading screens with motion. The self-care pet app Finch, which places a character inside a circular progress ring, serves as the reference.
3. Ask Claude Code to have the bunny type furiously by default, then look up and wave whenever the cursor hovers over it.
4. Splitting a single illustration into moving parts produces clunky arms, so use Higgsfield MCP with GPT Image 2.5 to generate separate, consistent pose images.
5. Place the finished bunny inside a Finch-style circular spinner with a short “getting ready” caption to create an interactive onboarding loader.

Automatic segmentation of one static illustration tends to leave awkward joints and rough edges. Generating a consistent image for each pose and layering them is the practical fix.

▲ Character loader and pose images

Turning a Blender model into a Rive widget

The most involved build combines 3D modeling in Blender with Rive. Here the work starts in Codex, which can control the operating system and the Blender application directly to model and rig 3D assets. Rigging means adding a skeleton of bones so a model can move.

Codex is asked for a sage-green, articulated retro desk lamp that switches between a folded sleep pose and an upright, lit pose. It builds the model, sets up mechanical bone constraints, checks the animation keyframes and exports the asset with a preview clip.

Those files go to Claude Code, together with a demonstration by a 3D artist who rigged a treasure chest in Blender, imported it into Rive and exposed its bones through the Rive CLI. Claude Code is asked to build a focus timer in the same illustrated style as the bunny, to this specification:

The finished widget animates smoothly on hover and runs a working countdown from 25:00 once switched on. For Blender work, Codex appears to be the better agent for now, because it can operate at the system level and interact with Blender’s interface directly.

What to delegate and what to check

Pairing the Rive CLI with a coding agent turns hours of timeline work into a draft that takes minutes. First-pass results rarely match a carefully hand-crafted animation, so plan for a round of manual tweaks. A sensible way to start:

• Create a free Rive account and install the CLI in a dedicated folder.
• Test the agent’s output on a simple hover effect, such as the guitar strings, before taking on larger pieces.
• For UI work, always provide screenshots of both the starting and the ending state.
• Treat the first result as a draft and refine the fine details by hand.
• Before shipping, check whether you need a paid plan to remove the Rive splash screen.