Grannys Watch

Inspiration

I wanted to create a fun and interactive way for users to track their habits while being guided by a virtual companion. The idea of a “Granny” character reacting to user actions made the experience more playful and engaging.

What it does

Granny’s Watch is an interactive web app where my virtual granny reacts to my actions, offers reminders, and tracks progress. I can log activities, see Granny’s animations change in real-time, and get encouragement or warnings based on my performance.

How we built it

I used React for the frontend and Framer Motion for smooth animations. Granny’s state—happy, angry, suspicious, etc.—changes based on my interactions, and I store activity data locally to make the app responsive and fun.

Challenges we ran into

Animating Granny realistically without making her movements too stiff or exaggerated. Synchronizing Granny’s expressions with my actions so she feels natural. Designing a UI that’s intuitive while keeping the character engaging.

Accomplishments that we're proud of

Implemented dynamic animations that change Granny’s expressions in real-time. Built an interactive interface that keeps me engaged and motivated. Made the design responsive so it works across devices.

What we learned

How to use Framer Motion with React for dynamic character animations. Techniques for managing state and syncing it with animations. How to desgn playful and interactive UX/UI elements.

What's next for Grannys Watch

Adding a global leaderboard so users can compare activity logs. Implementing more interactive features like mini-games or quizzes with Granny. Expanding Granny’s personality and reactions to make the experience even more engaging. Adding more charecters like strict teacher,mom and tutoring sister,etc.. in future i plan to add camera access so the user doesnt distract to outside distractions by using motion tracking of user face and eyes making the animations and visuals more attractive to view and smooth

Built With

• and-localstorage
• deployed
• framer-motion
• github
• html/css
• javascript
• on
• pages/vercel
• react