A learning app
that feels rewarding.
Every animation here is real and interactive — press the buttons and feel the streaks, XP, level-ups, badges and mascot react. Built the way I'd ship it inside your app: smooth, lightweight, and never distracting while a student is solving a question.
Next.js · TypeScript · Framer Motion · Lottie · Rive (state machines)
Scroll to play with each mechanicA mascot with real states
One Rive artboard, one state machine — not a folder of GIFs. It tracks the student's focus, covers its eyes for no-peeking rounds, and reacts to a correct or wrong answer. Drag and tap to feel every state switch instantly.
@rive-app/react-canvas · useStateMachineInput
The 30-day streak moment
Streaks are the strongest retention lever in learning apps — so the payoff has to feel earned. The flame grows every day, each cell pops in on a spring, and hitting day 30 sets off a confetti burst. Tap through it.
spring transitions · staggered grid · AnimatePresence
XP that counts up, rings that fill
Numbers should never just snap into place — they should climb. The total XP rolls up with tabular figures so the layout never jumps, while the progress ring eases toward the next level. Add some XP and watch both respond.
animated pathLength · useTransform counter · tabular-nums
Level-up, front and centre
The big dopamine hit. The level badge flips over, golden rays sweep out, a Lottie trophy pops and confetti rains — then it all settles so the student can get back to learning. Combining Lottie for the set-piece with Framer for the choreography.
AnimatePresence swap · Lottie trophy · spring badge
Badge unlocks worth chasing
A locked badge is a promise; unlocking it should feel like opening a gift. Each badge flips from a muted locked state to full colour with a shine sweep and a spring pop — collectible energy without a heavy asset in sight.
3D flip · shine sweep · spring pop · stagger
Answer feedback that rewards, not distracts
This is the one that matters most: feedback while a student is thinking. Correct answers get a calm green confirm and a quick check — wrong answers nudge, not punish, with a short shake and the right answer revealed. Fast, legible, never in the way.
micro-interactions · shake keyframes · Lottie confirm
Which hook drives a Rive state machine input in React?