This Rive character mascot responds to hover, clicks, and cursor movement, giving a product or website a more responsive and expressive interface moment. The interaction was designed so the character can maintain an idle loop, react to the cursor, and play click or hover responses without visible snapping between states.

Character animation

Interaction design

Cursor-tracking behavior

Hover and click states

Layered Rive State Machine logic

Several behaviors need to run together without fighting for control of the character. The animation system needed a clear priority order so temporary reactions could play, then return smoothly to the live idle and cursor-tracking behavior.

Idle as the base layer. A looping animation that never fully stops, so the character reads as alive even with zero input.

Cursor tracking as a continuous layer. Cursor position mapped to a blend input inside the state machine, so the gaze shifts smoothly instead of snapping between positions.

Hover and click as interrupt states. Built to take priority briefly, play the reaction, then hand control back to idle without a visible reset.

All three layers are synchronized in one state machine, so nothing overrides another layer or plays out of sync.

The result The mascot behaves like a live interface component rather than a looping animation, making it suitable for product onboarding, landing pages, empty states, or brand moments.

Rive Animator

Interactive Designer

Motion Designer

Tools: Rive