- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
This is an innovative landing page for a fizzy drink brand, leveraging React.js, Three.js and TailwindCSS. It showcases the power of GSAP (Greensock Animations) and Three.js to create an immersive 3D experience, bringing the fizzy drink to life. The website features interactive 3D models of drink cans, dynamic bubble animations and a responsive design that adapts to various screen sizes.
- React.js
- Tailwind CSS
- Three.js
- React Three Fiber
- React Three Drei
- GSAP (Greensock)
👉 Engaging 3D Animations with GSAP: Captivating animations that bring the fizzy drink to life, enhancing user engagement.
👉 Interactive 3D Bottle Rendering: Explore the fizzy drink bottles from every angle with dynamic 3D rendering, showcasing different flavors and sizes.
👉 Bubble Animation Effects: Realistic bubble animations that simulate the effervescence of the fizzy drink.
👉 Custom Flavor Carousel: An interactive carousel showcasing different drink flavors, developed using GSAP for smooth transitions.
👉 Fully Responsive Design: Ensures a consistent and optimal viewing experience across all devices and screen sizes.
👉 Performance Optimized: Efficient code and asset management for fast loading times and smooth interactions.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/connorhanks/fizzy-drink-website.git
cd fizzy-drink-website
Installation
Install the project dependencies using npm:
npm install
Running the Project
npm run dev
Open http://localhost:3000 in your browser to view the project