Kare: iOS Health Companion App Development

Kare is an iOS health companion that logs blood pressure, blood oxygen and heart rate through conversation instead of forms. Its mascot, Kari, is a Rive character that reacts to the conversation as it happens: idle while you type, thinking while it works, and holding still while its reply rises past it. I designed it in Figma, animated it in Rive, and built it in React Native.

Prototype → [TBD: Figma prototype URL] Watch it run → [TBD: video URL]

Self-initiated. I wanted to answer two questions in one product.

The first was about health apps. Most of them are data entry with a wellness skin: the number goes in and nothing useful comes back. Kare flips that. You tell Kari your numbers, it reads them back before saving, and when you ask how you're doing, it answers from the readings on your screen. It records, clarifies and explains. It never diagnoses and never prescribes.

The second was about mascots. I wanted one that responds live to a conversation rather than looping in a corner, which meant the animation had to be driven by app state, not by a timeline.

Every colour, spacing step and radius is a Figma variable, and type lives in text styles: Archivo Expanded SemiBold for headings, DM Sans for body. I audited the file for near-duplicate values and off-scale spacing before exporting anything, because that's where "looks right in Figma, renders wrong on device" starts.

The decision that shaped everything after: the chat isn't four screens. It's one message list at four points in its life (entry, sent, thinking, response). What changes is the thread's contents and where the mascot stands.

The Rive file came before any code. One .riv, three artboards: splash, idle and thinking, each on its own state machine. The app binds a view model instance and fires state machine triggers to move Kari between states. The blur on the mascot is baked into the artboard, so the runtime draws it without any compositing on the code side.

The launch is my favourite piece. The heart isn't drawn over the Home screen. It's cut out of the layer above it with an even-odd fill, so the shape is a hole that widens until the app underneath is fully exposed. The native iOS splash draws the same mark at the same size and position the artboard starts from, so the handoff from system launch to live animation has no seam.

I built it in React Native with Expo, TypeScript in strict mode and Reanimated, pairing with Claude Code throughout. Design tokens flow one way: Figma variables, to a JSON export, to a generated theme file, to components. ESLint blocks raw hex values and raw spacing numbers, so a hardcoded value fails the build instead of slipping through review.

Each screen went through the same loop: scan the frame from Figma over MCP, record the tokens and node IDs to a spec, build against the spec, then diff a simulator screenshot against the Figma frame. Referencing the right token and rendering correctly are two different claims, and I checked both.

There's no navigation library. Home to detail and Home to chat are shared-element transitions where both screens animate at once, which a stock navigator fights. Route state lives in the root component.

A working iOS prototype covering the launch animation, vitals Home, per-vital detail with trends, and a conversational chat that logs and explains, with a Rive mascot driven by app state from the first frame to the last.

Looking for a Rive animator who can design the screens and ship the app too? Let's talk.