🍪 Cookie Co. - Interactive Cookie Website (Hackathon Project)

This project was created as part of the Tata 1mg Hackathon, where the focus was on frontend excellence, animation, and UI/UX design. The project showcases smooth scroll-based animations using GSAP and Locomotive Scroll, while following design standards offered by the Catalyst design system.

Video Link of explanation : https://www.loom.com/share/8a5c5d9330f64cb69306ed70845dcaee?sid=9fbb0411-4a02-4032-91f7-d57cff3bffc1

🚀 Tech Stack Used

• React.js – Frontend framework for building the UI.
• SCSS/CSS – For styling and layout of the pages.
• GSAP (GreenSock Animation Platform) – For scroll-triggered animations and element transitions.
• ScrollTrigger (GSAP plugin) – To bind animations to scroll behavior.
• Locomotive Scroll – For smooth scrolling and custom scroll handling.
• Catalyst by Tata 1mg – Design system providing components, colors, and layout structure.

---

Vide Link : https://www.canva.com/design/DAGjw9wBzaM/nHwkzN1hhRkYlLtrfHs6DA/edit?utm_content=DAGjw9wBzaM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

🧪 What is Catalyst?

Catalyst is the official design system and component library by Tata 1mg. It provides developers with:

• Predefined color schemes, typography, and spacing tokens.
• Ready-to-use React UI components that are accessible and responsive.
• Standardized design tokens to keep branding and design consistent.

In this project, the visual structure, color palette, and spacing were inspired by Catalyst’s design principles, ensuring consistency and aesthetic appeal.

---

✨ Key Features

🔁 Scroll-Triggered Animations

• GSAP + ScrollTrigger is used to animate cookie elements (like #cookie, #chips, #cookism) when the user scrolls between sections.
• Smooth parallax-like transitions give the page a dynamic, storytelling effect.

🎢 Smooth Scrolling

• Integrated Locomotive Scroll to enhance user experience with fluid scrolling and better animation sync.

📱 Responsive Layout

• The entire layout is mobile-friendly and adapts based on screen size.
• Animations are bound only for large screens using ScrollTrigger.matchMedia().

🍫 Product Showcases

• Cookies like Frosted Sugar, Oreo, and Monster are visually highlighted.
• Includes product cards and mock CTA buttons.

Built with ❤️ By Arpit & Akshith.