Skip to content

Latest commit

 

History

History
100 lines (63 loc) · 2.4 KB

File metadata and controls

100 lines (63 loc) · 2.4 KB

🥤 SPYLT Website Clone

A high-fidelity clone of the SPYLT official website, built with a modern frontend stack to deliver buttery-smooth animations, premium visuals, and an immersive scrolling experience.

This project focuses on motion, performance, and clean UI engineering, closely recreating the look-and-feel of the original SPYLT brand while using industry-standard tools.

Original website : https://www.spylt.com/

🚀 Live Demo

🔗 Deployed on Vercel: https://your-vercel-url.vercel.app

🧠 Tech Stack

React – Component-based UI architecture

Vite – Lightning-fast development & optimized builds

Tailwind CSS – Utility-first styling for rapid UI development

GSAP – Advanced animations & timelines

Lenis – Smooth scrolling for a premium feel

Vercel – Production-grade deployment

✨ Features

Smooth scrolling powered by Lenis

High-performance animations using GSAP

Fully responsive design (mobile, tablet & desktop)

Video backgrounds & animated hero section

Clean, modern UI inspired by the SPYLT brand

Optimized production build with Vite

📂 Project Structure Spylt-Clone/ ├── public/ │ ├── images/ │ └── videos/ ├── src/ │ ├── components/ │ ├── sections/ │ ├── styles/ │ └── main.jsx ├── index.html ├── vite.config.js ├── package.json └── README.md 🛠️ Getting Started 1️⃣ Clone the repository git clone https://github.com/your-username/Spylt-Clone.git cd Spylt-Clone 2️⃣ Install dependencies npm install 3️⃣ Run the project locally npm run dev 4️⃣ Build for production npm run build 🌐 Deployment

This project is deployed using Vercel.

Key deployment settings:

Framework Preset: Vite

Build Command: npm run build

Output Directory: dist

🎯 Learning Outcomes

Deep understanding of animation-driven UI development

Practical use of GSAP timelines & scroll-based animations

Handling production issues with Vite & Vercel

Optimizing media-heavy websites for performance

Building brand-inspired, real-world UI clones

⚠️ Disclaimer

This project is created for educational and portfolio purposes only. All brand names, assets, and references belong to their respective owners.

🙌 Author

Shubham Kumar Frontend / Full Stack Developer

If you like this project, don’t forget to ⭐ the repository!

Happy Coding 🚀