This project is a modern, interactive web experience built using React, GSAP animations, and Tailwind CSS — inspired by the incredible design and motion work of Spylt.
I followed a tutroial, and my goal was to recreate and learn from Spylt’s advanced UI/UX techniques while adding personal touches and improvements.
| Technology | Purpose |
|---|---|
| HTML | Base structure for the project |
| CSS / Tailwind CSS | Styling and responsive design |
| JavaScript (JS) | Dynamic and interactive features |
| React (via Vite) | Component-based architecture and fast dev environment |
| GSAP (GreenSock Animation Platform) | Smooth animations and transitions |
| Node.js | Environment setup and dependency management |
Check out the live version of this project here:
This hosted version showcases the full functionality, animations, and design of the Spylt-inspired website.
It’s best viewed on desktop for the complete interactive experience.
This project was developed following a tutorial and inspired by Spylt.com.
All design credit goes to the original creators.
This version was made purely for educational and learning purposes.
- ⚡ Fast and optimized build setup using Vite
- 💫 Smooth page transitions and animations powered by GSAP
- 🎨 Clean and responsive design with Tailwind CSS
- ⚛️ Modular React component structure for scalability
- 🧠 Educational project focused on learning motion design and UI development
Planned enhancements and ideas for future versions:
- 🌙 Add dark/light mode toggle
- 📱 Improve mobile responsiveness and optimize GSAP animations on small screens
- 🧭 Add navigation animations and smoother route transitions
- 🗂️ Integrate content management (CMS) or backend API for dynamic content
- 🎥 Add video background controls and lazy loading for better performance
- 💾 Implement Progressive Web App (PWA) support
- 🧠 Add AI-generated motion variations or interactive elements
To run this project locally:
# 1️⃣ Clone the repository
git clone https://github.com/khalid-tarazi/energy-milk-website.git
# 2️⃣ Navigate to the project folder
cd energy-milk-website
# 3️⃣ Install dependencies
npm install
# 4️⃣ Start the development server
npm run dev