🎢 Lenis – Interactive React Animation Project

Lenis is a modern interactive React application built with Vite that demonstrates cutting-edge smooth scrolling, physics-based interactions, and immersive animations.
It’s a playground where Lenis, GSAP, and Framer Motion work together to create fluid, dynamic, and scroll-driven experiences.

---

✨ Why This Project Stands Out

This project isn’t just about adding animations—it’s about building motion as part of the experience:

• 🌀 Lenis for scroll orchestration → provides buttery-smooth inertia-based scrolling as the foundation.
• 🎬 GSAP + ScrollTrigger for storytelling → complex, timeline-driven animations that sync with the scroll, including text staggers, pinned sections, and video scaling.
• 🎭 Framer Motion for UI micro-interactions → buttons, cursors, and transitions are powered by Framer Motion for a polished React-native animation feel.
• ⚡ Matter.js physics integration → drag, bounce, and interactive play powered by a physics engine.

---

🛠️ Tech Stack

• React 19 (functional components + hooks)
• Vite (lightning-fast dev server & build tool)
• Lenis (smooth scroll + inertia control)
• GSAP + ScrollTrigger (timeline & scroll-driven animations)
• Framer Motion (UI/UX micro-interactions)
• Matter.js (2D physics-based effects)
• Tailwind CSS (responsive utility-first styling)
• SVG Animations + Custom Fonts (visual identity & dynamic path animations)

---

🔑 Core Features

• ⚡ Smooth inertia-based scrolling with Lenis
• ⏳ Timeline-driven animations with GSAP ScrollTrigger
• 🖱️ Custom interactive cursor (reactive hover effects + motion trails)
• 🧩 Physics-powered drag & bounce interactions using Matter.js
• 📱 Responsive, fluid typography with clamp()
• 🎥 Horizontal scroll video scaling sections with GSAP pinning
• 🎨 Staggered text & SVG path animations for storytelling
• ⏳ Animated GSAP Loader before content reveal

---

📂 Project Structure

src/
 ├─ Animations/      # GSAP + ScrollTrigger setup & timelines
 ├─ Components/      # Reusable React components (Loader, Cursor, Landing, Drag, etc.)
 ├─ assets/          # Fonts, images, and static assets
 ├─ App.jsx          # Main integration hub
public/              # Static files served by Vite
index.html           # Entry file
vite.config.js       # Build config

---

🚀 Installation & Setup

# Clone the repo
git clone <repository-url>
cd lenis

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 in your browser.

---

🧑‍💻 Skills Demonstrated

• 🎬 Scroll-driven storytelling (GSAP + Lenis integration)
• 🎭 UI/UX motion design (Framer Motion micro-interactions)
• ⚡ Physics-based user interaction (Matter.js for draggable elements)
• 📱 Responsive layouts (Tailwind + fluid typography with CSS clamp)
• 🧩 Modular React architecture (custom hooks, refs, component composition)
• 🖼️ Performance optimization (rAF loops, efficient GSAP timelines)

---

🎯 What This Project Shows

This is more than a demo—it's a portfolio-ready showcase proving mastery in:

• Advanced front-end motion design
• Seamless library integration (Lenis + GSAP + Framer Motion in one ecosystem)
• Building interactive, physics-driven experiences
• Writing scalable, maintainable React code