Wibe Studio is a modern, responsive, and visually captivating fashion website built using React and Styled-Components. The project showcases an immersive user experience through smooth animations, scroll-based transitions, and a stylish UI tailored for fashion brands and studios.
🌐 Live Site: wibestudio-eight.vercel.app
📁 Repository: GitHub - Wibe-Studio
- 🎬 Animated Hero Section with intro video
- 🎥 Locomotive Scroll & GSAP Animations for smooth transitions
- 🛒 New Collection & Product Listings with scroll-triggered image reveals
- 🆕 New Arrivals Section with fixed overlay and dynamic image transitions
- 🖼️ Interactive About Us section with floating layered images
- 💫 Marquee Text Effects synced to scroll for catchy slogans
- 🧭 Custom Navbar and Footer with scroll-linked navigation
- 📱 Fully Responsive Design optimized for all screen sizes
| Tech | Usage |
|---|---|
| React | Frontend framework |
| Styled Components | CSS-in-JS for styling |
| Framer Motion | Animation handling |
| GSAP & ScrollTrigger | Scroll-based animations |
| Locomotive Scroll | Smooth scroll + scroll events |
| Vite | Lightning fast bundler |
Wibe-Studio/ ├── src/ │ ├── assets/ │ ├── components/ │ │ ├── Home.jsx │ │ ├── Shop.jsx │ │ ├── NewArrival.jsx │ │ ├── About.jsx │ │ ├── Footer.jsx │ │ └── Marquee.jsx │ ├── App.jsx │ └── main.jsx ├── public/ └── README.md
| Resource | Credit | Link |
|---|---|---|
| Walking Girl Video | cottonbro | pexels.com/@cottonbro |
| Ring | Arif Syuhada | pexels.com/@arifsyd15 |
| Rings | cottonbro | pexels.com/@cottonbro |
| Earings | say straight | pexels.com/@say-straight-1400349 |
| White Tee | cottonbro | pexels.com/@cottonbro |
| Black T-shirt Girl | Lena Hsvl | pexels.com/@lenaneva |
| Red Girl | Yaroslava Borz | pexels.com/@yaroslava-borz-126286496 |
| Ethnic Wear | Artem Beliaikin | pexels.com/@belart84 |
| Suit | Chloe | pexels.com/@chloekalaartist |
| Cap Male | cottonbro | pexels.com/@cottonbro |
| Watches | Mister Mister | pexels.com/@bemistermister |
| Denim | Denis Zagorodniuc | pexels.com/@imdennyz |
| Jacket | Simon Robben | pexels.com/@simon-robben-55958 |
| Yellow T-shirt | RAUL REYNOSO | pexels.com/@raulkingr |
| Yellow Dress | Godisable Jacob | pexels.com/@godisable-jacob-226636 |
"Fashion is the armour to survive the reality of everyday life."
-- bill cunningham
"One is never over-dressed or under-dressed with a Little Black Dress." —Karl Lagerfeld
Built with ❤️ by Divyanshu Ranjan Singh
A passionate developer focused on creating immersive web experiences.
This project is licensed under the CC0 1.0 License.
- Inspired by modern fashion sites and creative portfolios.
- Smooth scroll made possible with Locomotive Scroll.
- Animations powered by GSAP and Framer Motion.
⭐ Feel free to star the repo if you find it useful!