Following a visitor without stealing attention
A cursor-following mascot turns a small pointer movement into a moment of recognition. The eyes lead, the head follows within its limits, and the body remains calm. This feels more intentional than moving the entire illustration across the page.
The character belongs in a stable layout position. It should not chase the pointer over buttons, cover a form field or make the visitor work around it. Good tracking is a response to curiosity, not a demand for attention.
Map the pointer to the character’s gaze
The website measures the pointer relative to a reference rectangle, usually the mascot’s canvas. It converts the horizontal and vertical positions into the numeric range expected by the rig. Values are clamped so movement outside the rectangle cannot pull the face beyond its designed limits.
Inputs often use names such as lookX and lookY, but those names are a convention, not a Rive requirement. A rig might expect values from zero to one hundred, from zero to one, or a signed range. The integration guide must document the actual range and which direction each axis means.
The cursor tracking guide walks through coordinate normalization and smoothing. Your developer should not need to reverse-engineer these choices from the artwork.
Make movement look natural
Directly applying every pointer change can make a character snap. Smoothing lets the gaze approach a target over a short interval. Keep the response quick enough to feel connected, and cap head rotation separately from eye movement so the character remains recognizable.
The idle and the gaze need to coexist. Blinking should not reset the eyes to an unrelated pose, and a click reaction should return to the current gaze or neutral state according to the agreed design. A robust rig treats these as coordinated layers or states.
Design the edges of the interaction
When the pointer leaves the area, gently return the gaze toward center. Decide whether the character follows movement across the whole hero or only within its own preview. Avoid a global tracking listener if the character is far offscreen.
A touch device has no persistent hover. A tap can set a short gaze target and trigger a greeting, then return to idle. Do not block scrolling to capture touch movement. Keyboard visitors can use a labelled greeting button; decorative eye tracking should never be essential to completing a task.
The hook, plus the rest of the character
Cursor following works best alongside a natural idle, blinking and a click reaction. Product events can later add a celebration, a concerned expression or an assistant state. These are additional scoped behaviors, not something every tracking rig automatically supports.
Send your artwork and intended placement to begin. We review whether the face can support the required range, how the character appears on mobile and what your developer needs for integration. The package overview explains the existing-artwork and design paths.
Questions, answered.
Does it follow the pointer outside the canvas?
It can, if the integration listens over a larger region. The behavior must still clamp gaze values and stop unnecessary updates when the mascot is offscreen.
What happens for reduced-motion visitors?
The website should show a meaningful static character and avoid pointer-driven animation. No essential action should depend on the movement.