Granny AI: Rive Animations & SVG for a Pediatric Health App

I designed and animated four branded assets in Rive for Granny AI, the in-app assistant inside GrannyDr, a pediatric healthcare app. Each asset shipped as an SVG illustration plus a production-ready .riv file the mobile team could drop straight into the build: a bot icon, a splash screen, a success state and an error state.

GrannyDr already had a Granny mascot, but it was static. The team wanted the AI assistant to feel alive and reassuring, since the people using the app are parents dealing with a sick child. The animation had to add warmth without adding weight to the app bundle.

Character had to read as the same Granny from the existing brand SVG

Primary dark blue #020d27, maroon detailing only

No circular badge or border around the character (client's explicit call, so the mascot reads as a character, not a sticker)

Every asset needed to hold up at small icon size and full splash size

Illustration reference for each asset, shared for approval before any production time

Vector build in SVG, clean layer naming so the rig maps 1:1

Rig and animate in Rive: [bones / groups / nested artboards - pick what you actually used]

State machine with named triggers so developers fire states from code instead of playing a timeline

Handoff: .riv + SVG + the exact input names

The four assets - one heading each, with its own looping clip:

Bot icon - book flip. Granny reading a "GRANNY AI" book with "Ask Granny" below. The book flip loops on idle so the entry point stays noticeable without pulling focus from the medical content.

Splash screen. Mascot, logo and the tagline "The Complete Pediatric Ecosystem". Timed to the app's cold-start window so it resolves rather than gets cut off.

Congratulations icon. Thumbs-up with a warm expression for success and achievement states. A one-shot trigger with a settle back to idle.

Sorry icon. Apologetic expression with "Sorry" integrated into the composition, for error and empty states. Deliberately soft - an error screen in a children's health app shouldn't feel like a failure.

Why Rive and not Lottie or a GIF (this block is a magnet for search and for clients comparing options):

Rive ships one .riv file with a state machine inside it. The developer fires a named trigger and the animation responds. No video file, no sprite sheet, no separate JSON per state, and the file scales without quality loss. For an app where these states fire constantly, that's a much smaller footprint than the equivalent Lottie set.

4× SVG illustrations · 4× .riv files · state machine input documentation · [total bundle size] KB combined