BuenHogar | Interactive Rive Mascot

Meet Tilo, the mascot of BuenHogar, an AI platform for real estate agencies and developers. The brief was a friendly blob that could live inside a React app, follow the cursor, shift mood with the conversation, and never feel like a looping GIF.

Starting from the client’s original concept, I took over the character design. I redrew Tilo as clean vectors, built a soft fake-3D look with gradients and inner shading, and added a glow that changes color with each mood.

The Rive rig uses bones and constraints for eye tracking and head tilt, driven by mouseX and mouseY properties that the development team can feed from React. The state machine randomly selects between 4 idle animations, with separate blinking and breathing layers.

Tilo has 5 emotional states: Working, Thinking, Oops, Curious, and Happy. Each is triggered by the app and has its own color. Shape, posture, and color blend between states rather than cutting abruptly.

Everything lives in one .riv file with a camera property that frames Tilo at 4 distances, from full body to close-up. The handoff included a guide with each property name and value for the developers.

Give BuenHogar’s AI a face people want to talk to: a production-ready mascot the team could place in its React app and control with a couple of inputs, expressive enough to show what the AI is doing without extra copy.