A high-performance, interactive 3D web experience built to showcase premium product design with cinematic lighting, dynamic textures, and liquid simulations. Fully responsive across all devices from desktop to mobile.
See the project live in action: https://bottle-animation-omega.vercel.app
- Interactive 3D Product View: Fully interactive 3D bottle model with realistic reflections and materials.
- Dynamic Texture & Flavor Switching: Smooth asset swapping for different product flavors (Strawberry, Grape, Ginger, etc.).
- Cinematic Lighting & Micro-interactions: Advanced WebGL lighting arrays tailored for luxury packaging presentation.
- Fully Responsive UI/UX: Dual-optimized design featuring dedicated layouts for Desktop and Mobile viewpoints.
- Scroll-Driven Animations: Premium UI elements synchronized with smooth viewport storytelling.
- Frontend Core: React.js + Vite (For ultra-fast building and hot-module reloading)
- 3D Graphics: React Three Fiber (R3F) & Three.js (WebGL framework)
- Animation & UI: Tailwind CSS for high-fidelity interactive component rendering
- Hosting & Deployment: Serverless edge distribution via Vercel
To run this project locally, clone the repository and execute the following commands:
# Install development dependencies
npm install
# Run local development server
npm run dev
# Compile and optimize production build
npm run build