Role: concept, UI and illustration, interaction design, Rive state machine Tools: Figma, Rive (State Machine, View Models, Data Binding, Listeners, Feathering) Deliverables: desktop 1440×900 and mobile 390×844 artboards, one state machine per artboard

Most habit apps show progress as a number. Moss shows it as something alive. Every habit you complete becomes a leaf on a small pot plant, and the pot has a face. The hero doesn’t just describe the product: it lets you feel the core loop in five seconds, before you read a word.

A hero is often seen by someone who never touches it, so this one doesn’t wait to be touched. A ghost cursor walks through the story on a 20-second loop:

It checks two habits. Leaves unfold, the flower blooms, and the streak rolls from 12 to 13.

It waters the plant, tickles the mascot, and taps the cloud for rain.

It switches night on and off, and finishes on the call to action.

The moment a real cursor enters the scene, the ghost fades out and the user is in charge. When the cursor leaves, the demo resumes after a short pause. The demo is state-aware: it sets each habit to the state it needs instead of toggling, so it never undoes what the visitor just did.

Check a habit: a check draws in, the row strikes through, the progress ring fills a quarter, and a new leaf springs out of the stem.

Reach 4/4: the bud opens into a flower with a burst of petals. The mascot jumps, the streak counter rolls over and today’s dot lights up.

Uncheck it: everything reverses gracefully. A 7-state garden logic handles any order of checks and unchecks.

Eyes: they follow your cursor across the whole hero, and it blinks on its own, sometimes twice.

Hover the pot: it blushes and wiggles, like being petted.

Tap it: it giggles, with squash and stretch and happy closed eyes.

Hover the main button: it squints with excitement, as if it knows what’s coming.

Water button: a drop arcs through the air, lands on a leaf, and the plant bounces.

Cloud: tap it and it rains on the garden.

Hidden reward: water three times in a row and the mascot sends you a heart. Nothing tells you about it; you just find it.

One toggle repaints the whole scene:

the sky deepens, the hills and pot darken, and the sun turns into a crescent moon;

stars and fireflies appear, and the headline flips to cream;

the mascot falls asleep with floating Zzz, and every hint turns white to stay readable.

Soft lime beacons pulse on everything you can interact with.

Handwritten notes with drawn arrows (“tap for rain”, “pet me”, “try night”) point the way.

Hovers never zoom; they respond with color, fills and small movement. The main button’s lime circle pours across the whole button and the label flips color.

Even when nothing happens, the scene breathes: clouds drift, leaves float, daisies sway, the sun glows and the streak flame flickers.

Logic: one state machine with 28 layers on desktop. Every interaction is its own layer, so they stack without fighting each other.

Inputs: a single view model holds the hover states, taps and the demo step. The autoplay timeline drives the same logic a user would, through data binding.

Design: built in Figma with named layers and auto layout, so it moved into Rive one-to-one. Soft shadows were rebuilt with Rive feathering.

Mobile: the same story on 390 px, with touch in place of hover.