public 3d-motion repository

wibe-studio

// codebucks27/wibe-studio

Build a stunning Fashion Studio Website Landing page with React JS. This website is created using locomotive-scroll for smooth scrolling. Also, GSAP and Framer-Motion for some custom animations and effects. You can learn to make this website by visiting the tutorial link from the description.

$ git log --oneline --stat
stars:244forks:48updated:2026-05-17
README.md
readonly

🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]

GitHub stars   GitHub forks   Github Followers  

This repository contains final code for Fashion Studio Website in ReactJS.

View Demo👇: https://wibe-studio.netlify.app/

checkout following Tutorial to learn👇: 🔥Build a Stunning Fashion Studio Website with React JS YouTube Video Views

YouTube Video Views

🚀 2026 Refresh — What Changed

The original tutorial code (Create React App + React 17) has been modernized:

  • Build tool: Migrated from create-react-app (react-scripts) to Vite for instant startup and fast HMR.
  • Package manager: Switched to bun.
  • React: 17.x19.x (uses the new createRoot API).
  • Routing: react-router-dom 6.x7.x.
  • Animation: framer-motion 6.x12.x (replaced removed yoyo with repeat/repeatType).
  • Styling: styled-components 5.x6.x (custom DOM props converted to transient $ props).
  • Fonts: @fontsource/* 4.x5.x.
  • Removed CRA-only files (reportWebVitals, setupTests, manifest.json, default logos, test boilerplate).

Looking for the original tutorial code? Check out the pre-update commit: f256a87.

Run Locally

bun install
bun run dev      # start dev server at http://localhost:3000
bun run build    # production build to ./build
bun run preview  # preview the production build

Images of The Fashion Studio Website:

HOME ABOUT HOME ABOUT

Resources Used in This Project

Fonts: https://fontsource.org/

External Libraries used in this project:

styled-components GSAP Framer-mMtion React-Locomotive-Scroll Locomotive-Scroll

All The Resources Used in This Website Are from👇:

Walking Girl Video: Video by cottonbro from Pexels [https://www.pexels.com/@cottonbro]

Images:

Ring: Photo by Arif Syuhada from Pexels https://www.pexels.com/@arifsyd15

Rings: Photo by cottonbro from Pexels https://www.pexels.com/@cottonbro

Earings: Photo by say straight from Pexels https://www.pexels.com/@say-straight-1400349

White Tee:Photo by cottonbro from Pexels https://www.pexels.com/@cottonbro

black t-shirt girl: Photo by Lena Hsvl from Pexels https://www.pexels.com/@lenaneva

Red girl: Photo by Yaroslava Borz from Pexels https://www.pexels.com/@yaroslava-borz-126286496

Ethnic Wear: Photo by Artem Beliaikin from Pexels https://www.pexels.com/@belart84

Suit: Photo by Chloe from Pexels https://www.pexels.com/@chloekalaartist

cap male: Photo by cottonbro from Pexels https://www.pexels.com/@cottonbro

Watches: Photo by Mister Mister from Pexels https://www.pexels.com/@bemistermister

Denim: Photo by Denis Zagorodniuc from Pexels https://www.pexels.com/@imdennyz

Jacket: Photo by Simon Robben from Pexels https://www.pexels.com/@simon-robben-55958

Yellow T-shirt:Photo by RAUL REYNOSO from Pexels https://www.pexels.com/@raulkingr

Yellow Dress: Photo by Godisable Jacob from Pexels https://www.pexels.com/@godisable-jacob-226636

Famous Quotes Used:

"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

metadata.json
JavaScriptfashionFramer MotionGSAPgsap-scrolltriggerShowcaseslocomotive-scrollPortfoliosportfolio-projectreactreactjsstyled-componentswebsitewebsite-template

[INFO] 4 topics link to curated motion topic pages.