Lush Pour Animated Landing Page

🤖 Introduction

Create a visually striking JuiceBar landing page with React, Tailwind CSS, and GSAP. Enjoy smooth scroll-driven animations, dynamic text reveals, parallax effects, pinned sections, and a custom animated carousel—all fully responsive and perfect for modern web projects.Some Assests are taken from JSMystery.

⚙️ Tech Stack

• 🟢 GSAP — A powerful JavaScript animation library used to create scroll-driven visuals. Includes SplitText animations, ScrollTrigger, parallax scrolling, pinned sections, scroll-synced video, image masking, and a custom animated carousel.
• ⚛️ React — A declarative JavaScript library for building interactive UIs with reusable components that integrate seamlessly with GSAP.
• 🎨 Tailwind CSS — A utility-first CSS framework for designing custom UIs directly in your markup.
• ⚡ Vite — A lightning-fast build tool and development server for instant HMR, optimized builds, and smooth development workflow.

🔋 Features

🍿 SplitText Animations — Bold text reveals for dynamic intros and highlights.

🌀 ScrollTrigger Effects — Scroll-based animations with timeline control.

🌄 Parallax Scrolling — Smooth parallax for immersive depth.

📌 Pinned Sections — Lock sections in place while animating.

🎬 Scroll-Synced Video Playback — Sync video progress with scroll.

🖼️ Image Masking Effects — Scroll-triggered pins and masks for stunning visuals.

🎠 Custom Carousel — Fully animated, customizable carousel.

⏱️ Seamless Timeline Animations — Fluid animations across sections.

📸 Screenshots

Home page Art page Menu page Contact page

🚀 Live Demo

Check out the live demo of Lush Pour.