Build a Cursor-Reactive Eye in Rive

Use Rive's AI Agent to animate an eye that tracks your cursor in real time.

Introduction

30 Second Summary

You know how a cartoon character's eyes follow you around the room? That effect feels alive and responsive. It turns a static drawing into something that reacts to you.

In this project, you will build an interactive eye animation inside the Rive Editor. The pupil follows your cursor in real time, and clicking triggers a blink. You will use the Rive AI Agent to generate all the movement code from plain-English prompts.

What You'll Build

A stylized eye animation built entirely in Rive, where an AI-generated Luau script drives the pupil to track your cursor and react to clicks.

By the end of this project, you'll have:

A Rive file with a custom eye design containing an outer shape, iris, and pupil.
A cursor-tracking script generated by the AI Agent that constrains the pupil inside the eye boundary.
A click-triggered blink animation that makes the eye squash closed and pop back open.
Secret Mission: a "panic" mode where the pupil shrinks and darts away when your cursor moves too fast.

Are there any prerequisites?

None. This project runs entirely in your browser using the free Rive Editor. You do not need to know any programming language. The AI Agent writes all the code for you from plain-English descriptions.

Set Up Your Rive Account and Open the Editor

Before you can build an interactive eye, you need a workspace to build it in. Rive is a web-based animation editor where you design, script, and preview interactive graphics all in one place.

In this step, you will create a free Rive account, open the editor, and get familiar with the key panels you will use throughout this project.

In this step, get ready to:

Create your free Rive account.
Open the Rive Editor and create. a new file.
Identify the key panels and tabs you will use in this project.

Create your free Rive account

Rive's Free plan includes everything you need for this project: State Machines, scripting, and unlimited personal files.

Open your browser and go to rive.app.
Click Sign up in the top right corner.
Answer the role question (pick whichever best describes you).
Enter your email address and choose a secure password.
Click Get Started.

You now have a free Rive account with unlimited personal files.

Can't find the Sign up button?

If you already have a Rive account, click Log in instead and skip to the next substep.

If the page looks different, make sure you are on rive.app (not a similarly named site). Help me sign up for Rive.

Open the Rive Editor and create a new file

The Rive Editor is a web app where you design shapes, build animations, and attach scripts. You do not need to install anything on your computer.

Navigate to editor.rive.app in your browser.
You will land in your personal workspace showing your files.
Click the + button to create a new file.
Name the file Reactive Eye.

Your new file opens with a default artboard on the Stage. This is your canvas for the entire project.

What is an artboard?

An artboard is the rectangular area where your animation lives. Think of it as a single frame or screen. Everything you draw and script happens within this boundary.

🙋‍♀️ Editor not loading?

Try refreshing the page or clearing your browser cache. Rive's editor works best in Chrome or Edge. The Rive Editor won't load for me.

Orient yourself to the interface

You will use several panels throughout this project. Take a moment to locate each one so you know where to find them later.

Find the Stage in the center of the screen. This is the large canvas area where your artboard sits.
Find the Hierarchy panel on the left side. This lists all objects (shapes, groups, scripts) in your file.
Look at the top of the editor and locate the Design and Animate tabs.
Click the Animate tab.

You should now see the Timeline and State Machine options at the bottom of the editor.

Find the left sidebar icons. This is where you will open the AI Agent panel in a later step.

What is a State Machine?

A State Machine is how Rive makes animations interactive. Instead of playing a fixed timeline from start to finish, a State Machine responds to inputs like pointer movements and clicks.

Your eye animation will use a State Machine to run the cursor-tracking and blink scripts in real time.

Your workspace is ready and you know where everything lives. Next up, you will draw the eye shape that your cursor-tracking script will bring to life.

Draw the Eye

Your Rive Editor is open and your file is ready. Now you need something on that blank canvas.

Every interactive animation starts with the visual design. In this step, you will draw the eye itself using simple ellipses. You will end up with three shapes: the white of the eye, a colored iris, and a dark pupil.

In this step, get ready to:

Draw the outer eye shape and name it in the Hierarchy.
Create the pupil and iris shapes.
Group the iris and pupil together so they move as one unit.

Create the outer eye shape

The outer eye is the white boundary that everything else sits inside. Later, your script will constrain the pupil's movement to stay within this shape.

Select the Ellipse tool from the toolbar at the top of the Stage. You can also press O on your keyboard as a shortcut.
Click and drag on the artboard to draw an ellipse. Make it approximately 300px wide and 200px tall.
In the properties panel on the right side of the screen, set the Fill color to white.
Add a Stroke to the ellipse. Set the stroke width to 2-3px and choose a dark gray or black color.
In the Hierarchy panel on the left, double-click the shape's name to rename it.
Type EyeOuter and press Enter to confirm the name.

You should now see a white ellipse with a dark outline on your artboard, and EyeOuter listed in the Hierarchy panel.

Why name shapes in the Hierarchy?

The AI Agent references shapes by their Hierarchy names when generating scripts. A clear name like EyeOuter helps the Agent understand your design and produce accurate code.

🙋‍♀️ Don't see the ellipse?

Make sure you clicked and dragged on the artboard after selecting the Ellipse tool. A single click creates a tiny shape that is hard to see. If the fill is transparent, check the properties panel and set the fill to white.

help me find my ellipse on the Rive artboard

Create the pupil

The pupil is the small dark circle that will track your cursor later. It needs to be centered inside the eye for now.

Select the Ellipse tool again (or press O).
Draw a small circle inside the eye, approximately 60px wide and 60px tall.
In the properties panel, set the Fill to a dark color like black or deep brown.
Double-click its name in the Hierarchy panel and rename it to Pupil.
Select both EyeOuter and Pupil by holding Cmd (macOS) or Ctrl (Windows) and clicking each one in the Hierarchy.
Use the alignment buttons in the top toolbar to center the pupil. Click Align Center Horizontal and then Align Center Vertical.

Your artboard should now show a dark circle sitting perfectly in the center of the white ellipse.

Pupil not centering?

Make sure you select EyeOuter first, then hold Cmd/Ctrl and click Pupil. The alignment tools align relative to the first selected object. If both are selected but not centering, try deselecting and reselecting them in that order.

help me align shapes in Rive

Add an iris and group the moving parts

An iris ring between the outer eye and the pupil adds visual polish. More importantly, you will group the iris and pupil together so the tracking script can move them as a single unit.

Select the Ellipse tool and draw a medium-sized circle inside the eye, approximately 100px by 100px.
Set its Fill to a color you like for the iris. Blue, green, or brown all work well.
Rename it to Iris in the Hierarchy panel.
Center Iris within EyeOuter using the same alignment method you used for the pupil.
Select both Iris and Pupil in the Hierarchy panel by holding Cmd (macOS) or Ctrl (Windows) and clicking each.
Press Cmd+G (macOS) or Ctrl+G (Windows) to group them together.
Double-click the new group's name in the Hierarchy and rename it to PupilGroup.

Why group the iris and pupil?

In the next step, the AI Agent will generate a script that moves a single node to follow the cursor. By grouping the iris and pupil together, both shapes move as one unit when the script targets PupilGroup.

Without the group, you would need separate scripts for each shape, and they could drift out of alignment.

Check your Hierarchy panel. You should see EyeOuter as one item, and PupilGroup as a group containing Iris and Pupil nested inside it.

On the artboard, your eye should look like a white ellipse with a colored ring and a dark center dot. Make sure the Iris is larger than the Pupil so both layers are visible.

Pupil hidden behind the iris?

The Hierarchy panel controls layer order. Items higher in the list appear behind items lower in the list. Drag Pupil below Iris within the group so it renders on top.

help me fix layer order in Rive

Your eye design is done. Next up, you will use the AI Agent to generate a script that makes PupilGroup follow your cursor in real time.

Generate a Cursor-Tracking Script with the AI Agent

Your eye is drawn, but it is completely static. To make the pupil follow your cursor, you need code that reads the pointer position every frame and moves the pupil toward it.

Writing that code from scratch in Luau would take time and scripting knowledge. Instead, you will describe the behavior you want in plain English and let the Rive AI Agent generate the script for you.

In this step, get ready to:

Open the AI Agent panel and write a prompt that describes cursor-tracking behavior.
Attach the generated script to your PupilGroup and test it inside a State Machine.

Open the AI Agent panel

The AI Agent is a built-in chat interface where you describe behavior in plain language and Rive generates Luau scripts for you. No coding knowledge required.

Look at the left sidebar of the Rive Editor. Click the Agent panel icon to open it.
A chat panel opens where you can type prompts and receive script responses.

What is the AI Agent?

The AI Agent is a chat-based tool built directly into the Rive Editor. You describe what you want a script to do, and the Agent generates the Luau code, explains how it works, and suggests customization options.

On the Free plan, you have a limited capacity per prompt that recharges hourly. This project only needs 2-3 strategic prompts, so you will stay well within the limit.

💡 Can't find the Agent icon?

The Agent panel is accessed from the left sidebar. If you do not see it, make sure you are signed in and try refreshing your browser.

Write your tracking prompt

A good AI Agent prompt is specific about what the script should do, what inputs it should expose, and how the movement should feel. The more detail you give, the better the result.

Click into the Agent chat input field and type the following prompt:

Create a Node Script called EyeTracker. It should track the pointer position on every frame. Move the node toward the pointer, but constrain it so it never moves more than 50 pixels from its starting position. Add an input called maxRadius of type number so I can adjust the constraint distance. The movement should feel smooth, not instant. Use lerp or easing so the node drifts toward the cursor rather than snapping.

Press **Enter** to send the prompt.
Wait for the Agent to respond. It will display a summary of the script it created, an explanation of how it works, and suggestions for customization.

What does the Agent return?

The Agent responds with a summary of changes it made, any new scripts it created, explanations of how the script works, and ideas for customizing it further. The new script automatically appears in your Assets panel on the left side of the editor.

The generated Luau code uses the Node Script protocol. This means it can respond to pointer events, run logic on every frame via the advance method, and operate in the transform space of whatever node it is attached to.

💡 Why a Node Script instead of a Listener?

Rive has a built-in Align Target listener that can position an object to follow the pointer. However, it does not support constraining movement within a boundary.

A Node Script gives you per-frame logic through the advance callback, pointer event access via pointerMove, and the ability to do math like clamping distance. This makes it the right choice for keeping the pupil inside the eye.

Apply the script to PupilGroup and test

The script exists in your Assets panel, but it is not doing anything yet. You need to attach it to the node you want it to control and then play the State Machine to see it work.

In the Hierarchy panel on the left, click on **PupilGroup** to select it.
In the Inspector panel on the right, look for the option to add a script. Drag the newly created **EyeTracker** script from the Assets panel onto **PupilGroup**, or use the script attachment option in the Inspector.
Set the maxRadius input to 50 in the Inspector. This constrains the pupil to move no more than 50 pixels from its center.

What does maxRadius control?

The maxRadius input sets the maximum distance (in pixels) that PupilGroup can travel from its starting position. A value of 50 keeps the pupil safely inside your ~100px-radius eye. You can adjust this later if the pupil clips outside the eye boundary or does not move far enough.

💡 The Agent may wire the script automatically

Depending on how you phrased your prompt, the AI Agent may have already attached the script to PupilGroup for you. Check the Inspector on PupilGroup to see if EyeTracker is already listed before dragging it manually.

Now you need a State Machine to run the script. Every artboard has at least one State Machine by default.

Click the **Animate** tab at the top of the editor (or press the **Tab** key to switch modes).
In the Animations list on the left, look for your State Machine. If one does not exist, click the **+** button in the Animations list and select **State Machine**.
Click on the State Machine name to select it. The graph view appears below the stage.
Click the **Play** button in the toolbar to start the State Machine.
Move your cursor around the artboard.

Your pupil should now drift smoothly toward your cursor, staying constrained within the eye boundary.

Pupil not moving?

Make sure the EyeTracker script is attached to **PupilGroup** (not EyeOuter or the individual Pupil shape). Check the Inspector when PupilGroup is selected.

Confirm you are in the Animate tab with the State Machine selected and playing. The script only runs during State Machine playback, not in Design mode.

If the script has errors, open the Debug Panel (look for it at the bottom of the editor) and check the Problems tab for issues.

Help me troubleshoot why my EyeTracker script is not moving PupilGroup when I play the State Machine

Your pupil is alive. It tracks your cursor in real time, smoothly drifting without ever escaping the eye boundary. Next up, you will add a satisfying blink animation triggered by a click.

Add a Click-to-Blink Reaction with the AI Agent

Your pupil now tracks the cursor smoothly, drifting toward it without leaving the eye boundary. That covers movement, but real eyes do more than just look around.

In this step, you will use the AI Agent again to generate a second script that makes the eye blink when you click. The blink squashes the eye shape's Y scale to nearly zero, then springs it back open.

In this step, get ready to:

Prompt the AI Agent to generate a Blink script that responds to clicks.
Attach the Blink script to EyeOuter and test it in the State Machine.
Troubleshoot any issues using the iterative prompt-test-refine workflow.

Prompt the Agent for a blink script

The Node Script protocol includes a pointerDown event handler that fires whenever the user clicks. Your prompt needs to tell the Agent what should happen on click: scale the eye shut, then pop it back open.

Click on the AI Agent panel in the left sidebar to make sure it is open.
Type the following prompt into the Agent chat and press Enter:

Create a Node Script called Blink. When the user clicks (pointer down), quickly scale the EyeOuter ellipse's Y axis to 0.1 over 100 milliseconds, then scale it back to 1.0 over 150 milliseconds. Add an input for the node to blink. The blink should feel snappy.

What does this prompt do?

You are asking the Agent to create a script that listens for a pointerDown event. When that event fires, the script rapidly squashes the shape's vertical scale to 0.1 (nearly flat) over 100ms, simulating an eyelid closing.

It then reverses the scale back to 1.0 over 150ms so the eye pops open. The slightly longer open time gives the blink a snappy, organic feel.

The Agent will respond with a summary of what it created, an explanation of how the script works, and suggestions for customization. A new script called Blink appears in your Assets panel.

Read the Agent's response

Take a moment to read through the Agent's explanation. It will describe which Luau functions it used and how the timing values create the blink effect. Understanding the summary helps you troubleshoot later.

Attach the Blink script to EyeOuter

The Blink script needs to be attached to the shape it will scale. In this case, that is EyeOuter because it represents the entire eye shape that should squash closed.

In the Hierarchy panel on the left, click on EyeOuter to select it.
Look for the newly created Blink script in the Assets panel and drag it onto EyeOuter, or add it via the script section in the Properties panel on the right.
Configure any inputs the Agent created (for example, a reference to the node to blink) by setting them in the Properties panel.

The Agent may wire the script automatically

Depending on how you phrased your prompt, the AI Agent may have already attached the script to the correct node. Check the Hierarchy to see if EyeOuter already shows the Blink script beneath it. If it does, skip the manual attachment step.

Click the Animate tab at the top of the editor.
Select your State Machine from the animations list on the left.
Click the Play button in the toolbar to start the preview.
Click anywhere on the artboard.

You should see the eye squash closed and pop back open in a quick, snappy blink. The pupil should still track your cursor between clicks.

Blink not firing on click?

Make sure the Blink script is attached to EyeOuter, not to PupilGroup. The script needs to scale the outer eye shape.
Confirm you are clicking inside the artboard while the State Machine is playing. If the State Machine is paused, pointer events will not register.
If nothing happens at all, the script may be listening only on the EyeOuter hit area rather than the full artboard. This is a perfect case for troubleshooting with the Agent in the next substep.

Why isn't my Blink script responding to clicks?

Troubleshoot with the Agent if needed

If the blink does not trigger or looks wrong, the fix is simple: describe the exact problem back to the Agent. This iterative loop of prompt, test, and refine is the core workflow for AI-assisted scripting in Rive.

Open the AI Agent panel again.
Type a description of the specific issue you are seeing. For example:

The blink script does not fire on click. It should respond to pointerDown anywhere on the artboard, not just on the eye shape.

Why paste the exact symptom?

The Agent works best when you give it a small, specific problem rather than asking it to rewrite everything. Copy the smallest failing behavior and describe what you expected versus what actually happened. The Agent will revise just the relevant part of the script.

After the Agent responds with a revised script, click Play again in the State Machine to re-test.
Repeat the loop until clicking anywhere on the artboard triggers a satisfying blink.

Keep prompts short and targeted

Resist asking the Agent to rewrite the entire script. One targeted fix at a time gets better results and helps you understand what changed.

Your eye now tracks the cursor and blinks on click. Next up, you will fine-tune both interactions and preview your finished animation with a shareable link.

Test, Tweak, and Preview

You have a cursor-tracking pupil and a click-triggered blink. Both scripts are attached and running inside your State Machine.

Now it is time to play the full interaction, fine-tune the feel, and generate a shareable link so others can see your reactive eye in action.

In this step, get ready to:

Test both interactions together in the State Machine preview.
Fine-tune movement speed, constraint radius, and blink timing.
Publish your file and generate a shareable preview link.

Play the full interaction

Both scripts are wired up, but you have not tested them running side by side yet. Playing the State Machine with both active confirms nothing conflicts.

Click the Animate tab at the top of the editor.
Make sure your State Machine is selected in the Timeline panel (not an individual animation).
Click the Play button.
Move your cursor around the artboard. The pupil should drift smoothly toward your cursor and stop at the edge of its constraint radius.
Click anywhere on the artboard. The eye should squash closed and pop back open.

What should I see?

Two behaviors running simultaneously: the pupil follows your cursor with a smooth drift (not snapping), and clicking triggers a fast blink animation on the outer eye shape. If the pupil escapes the eye boundary, your maxRadius value is too high.

🙋‍♀️ Pupil not moving or blink not firing?

Make sure the State Machine is selected, not an individual timeline. Scripts only run inside the State Machine preview.

Check the Hierarchy panel to confirm the EyeTracker script is attached to PupilGroup and the Blink script is attached to EyeOuter.

Why isn't my eye animation responding during playback?

Fine-tune the feel

The default values get the interaction working, but small tweaks to speed and radius make it feel polished. You can adjust values directly through script inputs or ask the AI Agent to modify the behavior.

Select PupilGroup in the Hierarchy panel.
In the Properties panel on the right, find the maxRadius input under the EyeTracker script section.
Try increasing it to 60 or decreasing it to 40 and hit Play again to see the difference.
To change the movement speed or easing, open the AI Agent panel from the left sidebar.
Type a prompt like: "Make the pupil movement faster" or "Make the pupil lag behind the cursor more."
Press Enter and test the updated behavior by clicking Play again.

One change at a time

Adjust one value per test. If you change both the radius and speed at the same time, you will not know which change caused the improvement (or the problem).

💡 What is the iterative workflow?

The "prompt, test, refine" loop is the core workflow with the Rive AI Agent. You describe a change in plain English, test the result, and describe the next adjustment. Each cycle teaches you how script inputs control behavior without needing to write Luau code yourself.

🙋‍♀️ Agent not responding to your prompt?

The Free plan has limited AI Agent capacity that recharges hourly. If you see a rate limit message, wait a few minutes and try again.

The AI Agent says I have reached my limit. What should I do?

Publish and share your animation

Your interactive eye is complete. Time to generate a link so you (and anyone else) can see it running live in a browser.

Click the Editor menu (the hamburger icon in the top-left corner of the toolbar).
Select Publish to Marketplace.
Follow the prompts to publish your file. Rive will generate a community page for your animation.
Copy the link from your browser's address bar once the page loads.
Open the link in a new tab to confirm the interactive eye works. Move your cursor and click to verify both behaviors.

What does publishing do?

Publishing to the Marketplace shares your file with the Rive community. Anyone with the link can view your interactive animation and even remix it. Your file remains editable in your personal workspace.

This is different from Embed URLs (which let you embed animations on external websites). Embed URLs require a paid plan, but Marketplace publishing is available on the Free tier.

🙋‍♀️ Don't see the Publish option?

Make sure you are clicking the hamburger menu icon in the top-left corner of the toolbar, not the Export button. The Editor menu contains the Publish to Marketplace option.

I cannot find the publish or share option in Rive. Where is it?

You now have a live interactive animation that anyone can play with in their browser. Next up, the Secret Mission challenges you to add a "panic" mode that makes the pupil react to fast cursor movement.

Secret mission

Add a Panic Mode That Reacts to Fast Cursor Movement

Your eye tracks the cursor smoothly, but what if the cursor moves too fast? In this challenge, you'll make the pupil detect rapid movement and react by shrinking and darting to the opposite side of the eye, as if startled. This adds a layer of personality that makes the animation feel alive.

Clean Up Your Resources

This project runs entirely in the browser using Rive's free plan, so there are no ongoing costs.

Decide whether to keep your Rive file as-is, or delete it if you want a fresh start.

Resources you used:

Rive account (free, no billing).
"Reactive Eye" file in the Rive Editor.
AI Agent-generated Luau scripts (EyeTracker, Blink).

Keep everything running

No action needed. Choose this if you want to keep experimenting with your Reactive Eye file or show it to others.

Your Rive file stays in your workspace at editor.rive.app.
You can open it anytime and continue tweaking scripts or adding new animations.
The free plan includes unlimited personal files, so there is no storage limit to worry about.

Pause - I'll come back to this later

Since everything lives in the cloud on Rive's servers, there is nothing to shut down or pause locally.

Your file remains saved in your Rive workspace automatically.
Close the browser tab when you are done. Your work is already saved.

Delete - I don't want to use this again

Remove your project file entirely if you want a clean workspace.

Open editor.rive.app and navigate to your workspace.
Right-click the "Reactive Eye" file and select the delete option.
Your Rive account itself is free and does not need to be deleted unless you want to remove it entirely.

That's a Wrap!

Nice work! You just built a live interactive animation using AI-generated scripts, without writing a single line of Luau by hand.

You've learned how to:

Design and build a Rive file with a custom eye composed of artboard shapes, groups, and styling.
Use the Rive AI Agent to generate a constrained cursor-tracking script that keeps the pupil inside the eye boundary.
Apply the iterative prompt, test, refine workflow to add a click-triggered blink animation and fine-tune interactive behavior.
Secret Mission: Added panic detection that makes the pupil shrink and dart away when your cursor moves too fast.

Ready to quiz yourself?