How I Used Rive to Build a PUNCHY Pixel Art Character for my Website

By School of Motion
Published: Sep 03, 2025

“
Learn how to craft an interactive hero section for your portfolio!

In this comprehensive Rive tutorial, Joey demonstrates how to build an interactive hero section for a portfolio website featuring a pixel art character that tracks mouse movement and responds to clicks. The tutorial covers the entire workflow from creating pixel art assets using AI tools like Midjourney (with significant manual cleanup in Photoshop), to implementing complex interactive behaviors in Rive including mouse tracking with hit boxes, joystick controls for directional head movement, nested solos for managing multiple character states, state machines with listeners and inputs for click events, constraint-based animations, and advanced features like activation zones that control when the character starts tracking the mouse. This is a mini-course all on its own, and is ideal for Rive artists looking for intermediate-level tips and tricks.

Get the FREE project files here: www.schoolofmotion.com/blog/rive-pixel-art-tutorial

? CHAPTERS ?
00:00 Intro
00:08 Setting Up the Design in Figma
01:50 Creating Pixel Art for Interactivity
03:29 Dancing with the Devil (AI)
04:02 Challenges with AI Tools for Pixel Art
06:00 Hacking the AI
11:00 File Size Considerations
13:29 Importing and Optimizing Assets in Rive
15:56 Creating an Idle Animation
23:38 One head down, eight to go
25:55 Draw Order to the Rescue
29:27 Mouse Tracking 101
30:58 Setting Up the Hit Box
31:42 Mouse Tracking with Rive
33:48 Creating a Joystick Control
36:51 Nested Solos FTW
39:04 How Joysticks Work
46:02 Time to Punch Out
47:14 Animating the Face Punch
50:22 Adding Sound Effects
51:48 Animating the Gut Punch
47:14 Animating the Face Punch
50:22 Adding Sound Effects
51:48 Animating the Gut Punch
53:23 Creating Hit Boxes for Click Events
00:55:06 Configuring State Machines for Click Events
00:58:17 Troubleshooting Visibility Settings
00:58:44 Optimizing Animation Timelines
00:59:58 Creating and Configuring Gut Punch
01:01:41 Integrating Animations into Design
01:04:50 Advanced Mouse Tracking Behavior
01:15:09 Adding Interactive App Icons
01:19:08 Final Touches and Troubleshooting
01:25:00 Wrap Up

?? SHOW NOTES
Rive https://rive.app/
Midjourney https://www.midjourney.com/home
Figma https://www.figma.com/
Webflow https://webflow.com/
Framer https://www.framer.com/
Lottie https://lottiefiles.com/

[READ MORE]

”