top of page

Interactive Frog Made With Rive

Unlike my usual workflow, I skipped the sketching phase and dove straight into Rive with one goal: to create cute frog and learn how to use the state machine.

Without a set plan for the scene, I built him from scratch, using tutorials to troubleshoot along the way. This project quickly became a favorite as I explored and learned Rive. Everything was crafted in Rive, except for the textures, which I created in Photoshop.

Frog SS-02.png

I built this frog using bones to structure and control its animations, giving it smooth and dynamic movements. To make the interaction more engaging, I used 'hitboxes' as triggers, allowing the frog to perform different animations based on where the cursor hovers. Additionally, I implemented another trigger that enables an object to follow the cursor, adding an extra layer of interactivity to the project.

Frog SS-03.png

Frog SS-05.png

Frog SS-07.png

Frog SS-09.png

Frog SS-11.png

Frog SS-13.png

Frog SS-14.png

State Machine

"The state machine in Rive is a visual logic system that controls how animations transition and respond to user interactions or events. It’s built around states, which represent different animations or poses, and transitions, which define how and when the animation moves from one state to another."

bottom of page