capsule
This is a clone of the Awwwards-winning "capsule.moyra.co," developed to level up my frontend skills. The goal was to reverse-engineer the site's complex animations and responsive layout using React, Vite, GSAP, and Tailwind CSS. It serves as a portfolio piece to showcase my proficiency in modern web development tools.
🏆 Capsule - Awwwards SOTD Clone
> ⚠️ This Website Is Still Under Construction. Not fully responsive yet. Try to see in desktop mode (1200px to 1900px width). Thanks🚨☠️
A faithful React.js clone of the “awwwards” (Awwwards.com) SOTD-winning “Capsule” website by Moyra (capsule.moyra.co), which won Awwwards Site of the Day. This project was built for learning purposes to master advanced frontend techniques like scroll-triggered animations, smooth page transitions, and responsive design.
- React Vite (version: 19.1.0)
- React Router Dom (Version: 7.6.2)
- Tailwind CSS (Version: 4.1.8)
- GSAP (Version: 2.1.2)
🚀 Live Demo
✨ Features
- Smooth Animations: Recreated the sophisticated scroll-driven animations from the original site using GSAP.
- Modern Stack: Built with a cutting-edge tech stack including React, Vite, and Tailwind CSS.
- Fully Responsive: Designed to provide a seamless experience across all device sizes.
- Pixel-Perfect UI: Focused on replicating the original design’s visual appeal and user interface details.
🛠️ Tech Stack
- Frontend Framework: React with Vite
- Styling: Tailwind CSS
- Animations: GSAP (GreenSock Animation Platform)
- Icons: React Icons
- Package Manager: npm / yarn
📦 Installation & Setup
To run this project locally, follow these steps:
- Clone the repository
git clone https://github.com/showravkormokar/capsule.git cd capsule
🪧 Notice
To build this website only study perpose and understanding animation and increase design knowledge.
All rights reserve (capsule.moyra.co)