Adding Product Demo Animations to the Homepage

For a learning tool that's carving out a new space, it's not enough to describe what it does — you have to show it. Lyka is interactive and AI-driven, so the experience is the product. Static screenshots were never going to cut it on the landing page.

The Video Problem

A screen recording seemed like the obvious answer, but it comes with real tradeoffs. A video file large enough to look polished would slow down page load and scale poorly to mobile screens. Not a great first impression for casual visitors checking out the homepage for the first time. 

A Lighter Approach

Instead, the demo animations were built directly from CSS — the same visual assets that make up Lyka's actual interface. They load as fast as the rest of the page, look sharp at any screen size, and naturally stay in sync with UI changes as the product evolves. GSAP handles the timing and sequencing, orchestrating each element. 

In total, it came to around 1,300 lines of code — and more than a few late iterations making sure the animation held together on mobile screens, even for a learning tool that is realistically suited for desktops. 

Comments

Post a Comment

Popular posts from this blog

Learning in the Time of AI

On May 21, Lyka quietly went from idea to reality: a 1:1 AI tutor built to make personalized learning accessible for every student. Lyka began with a simple goal: help with schoolwork should not depend on a family’s schedule, budget, or a parent's level of education. For many students, especially in middle school and high school, those years are when school becomes more demanding just as life gets busier. Classes become more advanced, expectations rise, and the pressure around grades, confidence, and future opportunities increases. At the same time, students are already using AI tools. Sometimes they use them to truly understand a concept. Sometimes they use them to get unstuck. And sometimes, if we're honest, they use them to take shortcuts. As with any profound change, the right response is to avoid denial or complete rejection. The question behind the project was straightforward: what if the same technology could be shaped around helping students actually learn more effectiv...
Read more

Curating Smarter Course Content

A good tutor doesn’t just answer questions. It guides students through the right material, in the right order, at the right depth. It all starts with a curriculum grounded in real classroom priorities, not textbook chapters. It’s tempting to include every topic that might appear on an exam. In practice, not all material carries equal weight. Too much extraneous content distracts from what students actually need to learn and do well in class. Some areas were more straightforward to design. AP courses are highly standardized around a single goal: the exam. That clarity provides a strong foundation, even if it still requires trimming to reflect real classroom time constraints. Adult learning modules sit at the opposite end. They’re driven by intent and curiosity, which allows us to curate content around what’s most relevant to the learner. Standard high school courses are where the balance gets harder. At this level, expectations vary across states, districts, and classrooms. Instead of a...
Read more

Easier Student Setup

There’s a simple truth about school: even the most motivated students will not be pulling out a credit card to do extra homework. Parents choose the tools, pay for subscriptions, and check in on progress. So for Lyka, there's really a pair of users: a parent and a student. The account model was built around this insight. Parents handle billing and track progress; students log in on their own devices with Google and focus on learning. But early user testing revealed that the first-time student setup could be confusing. This update simplifies that entire process. After a parent enters the basic info for their student, they immediately see a one-time registration link with clear instructions to share with the student. The homepage primary CTA has a safeguard for students, while a separate “Sign in” cleanly separates returning users. The goal is always to help users move from “Let’s try this” to actually using it as quickly and easily as possible. 
Read more