Linus Prep
UI Components Powered by Rive
Overview
Linus is an emerging, Duolingo-style platform designed to help students prepare for the SAT.
I had the opportunity to collaborate with the talented team at Linus, bringing their user interface to life and crafting responsive elements optimized for both desktop and mobile.
A key part of my role was bridging the gap between design and development, ensuring a seamless handoff of assets for rapid iteration and implementation.
Scroll down for a breakdown of each UI element I worked on throughout the user journey. Keep an eye on the smartphone to the right, it will update in real-time to showcase what I’m describing.
Splash Screen
Opening the app is a small but crucial moment in the user journey. The team and I wanted to make the most of Linus’ charismatic character animations, setting the tone for the experience right from the start.
The splash screen adapts based on whether the user is logged in, transitioning into the app differently in each case. To keep it engaging, the animation loops indefinitely.
We designed an animation of Linus that feels warm, friendly, and full of personality – excited to welcome users into their learning journey.
While it’s not visible in this example, we also included a subtle type animation that syncs perfectly with the character’s movements, tying the entire splash screen together.
Lesson Nodes
Lesson nodes are the gateway to each lesson, designed to communicate key information at a glance. What type of lesson is this? Which domain does it belong to? Is it available, locked, or in progress? Has it already been completed? Some nodes even function as chests, rewarding users for their progress.
Packing all this information into a single button was a challenge, but the UI design team created a clear, intuitive system. My role was to connect the wires and bring it to life.
Each lesson node uses color to indicate its domain, while icons hint at the lesson type. A floating tooltip highlights the next lesson in the sequence. A green radial progress indicator tracks completion, and when a lesson is finished, a smooth checkmark animation provides instant feedback.
Oh, and by the way: The nodes on the phone are clickable. Go ahead, tap them!
Progress Bar
The progress bar provides instant feedback on a lesson’s progression, showing how far you’ve come and how much is left. It also visually responds to correct answers, incorrect answers, and streaks.
This feature has a lot of moving parts. The goal was to make it feel rewarding without distracting from the lesson, while also handling mistakes in a way that keeps users motivated.
A subtle stars effect appears on correct answers, while fire animations trigger during a streak. If an answer is incorrect, the progress bar still advances, but the missed question is moved to the end of the lesson—giving users another chance to get it right.
Lesson Summary
At the end of each lesson, users earn experience points based on their performance. Points can be awarded in all three categories or just a select few, depending on their results.
The asset was designed to give developers full control over the number of experience widgets displayed, along with their icons and text. The layout adapts dynamically based on the device’s width, animating in as a column on smaller screens and as a row on wider ones.
Streak Summary
The streak summary helps users track their weekly progress at a glance. Each node represents a day, visually reflecting the user's consistency throughout the week. When a new streak day is achieved, it animates into place, reinforcing the habit-building experience.
If a new week has started, the asset first displays the results from the previous week before transitioning to the current one. This gives users a moment to reflect on past performance before focusing on their ongoing streak.
To keep the experience engaging, we designed smooth animations that highlight progress without overwhelming the interface. The streak summary not only motivates users to maintain their learning habit but also provides a subtle sense of accomplishment with every completed week.
Chests
Chests add a rewarding and playful element to the experience, encouraging users to stay engaged through continuous effort. They serve as a fun incentive, reinforcing progress with tangible rewards.
There are three chest rarities—bronze, silver, and gold—each offering different levels of rewards. When opened, they trigger a dynamic, explosive animation that reveals the prize inside. Several animated rewards are available, and developers can seamlessly swap between them at runtime to keep the experience fresh and exciting.
Beyond just rewards, the chests contribute to the overall game-like feel of the platform, making progress feel both satisfying and motivating.
Built for Every Screen
Every UI element was built to be responsive, ensuring a seamless experience across both desktop and mobile. Whether users are studying on their phones or reviewing lessons on a larger screen, the design adapts effortlessly to provide a smooth and intuitive interface.
Code-driven Animation State Machine
To go beyond passive visuals, I wired the Rive animations into a custom state machine controlled by JavaScript. This allowed the app to respond dynamically to data — for instance, triggering specific animations based on the user’s weekly progress.
Instead of hardcoding visual feedback, the logic lives in code: arrays like thisWeekStreak or lastWeekStreak inform the animation state in real time.
By binding Rive state machine inputs to live data, we turned a simple fire emoji streak into something expressive, programmable, and maintainable.