Meow Mocha Website

About The Project

I recently designed and developed an interactive and visually engaging website for a conceptual Cat Café (Meow Mocha) — a cozy online space where visitors can explore café offerings, meet the resident cats, book visits, and enjoy a uniquely playful digital experience.

The website was built to reflect the warm, friendly, and slightly whimsical atmosphere of a real-life cat café while delivering a smooth, user-friendly experience on both desktop and mobile devices. The layout is clean and minimalistic, with soft tones, rounded edges, and playful cat-themed visuals to enhance the brand personality.

Special care was taken to ensure the site’s animations, layouts, and user interactions are fully optimized for mobile devices. I implemented responsive media queries and adjusted ScrollTrigger animations for touchscreens, ensuring a seamless experience on smaller screens without compromising performance or aesthetic.

From animated hero sections to ScrollTriggered sections & Microinteractions, the animations enhance the user journey without being distracting. Performance testing and layout optimization were conducted using Chrome DevTools mobile simulation and multiple device tests to guarantee consistency.

Summary

This project was a fun opportunity to combine clean web design with interactive animation techniques, creating a digital experience that feels lively and welcoming. It showcases my skills in front-end web development, motion UI design, and mobile-first optimization.

All images are genarated by AI & credit for the background artworks used in this project are sourced from www.freepik.com, with full attribution to the respective owners.

Live Demo

Used Technologies

• HTML + SASS

• GSAP

• Lenis

• Javascript

• Bootstrap

Application Features

1. Responsive Design - HTML5, SASS, and Bootstrap for responsive, grid-based layouts and clean typography.

2. Animations - GSAP (GreenSock Animation Platform) with ScrollTrigger to create smooth, scroll-based animations that bring sections to life as the user navigates through the site.

3. SVG's - For lightweight, scalable, and sharp vector illustrations, icons and artworks, ensuring crisp visuals across all devices and resolutions.

4. Optimized for Mobile - Every animation and transition is carefully crafted to be lightweight, ensuring smooth performance even on mobile devices.