wibe-studio is a free React JS landing page template for a fashion studio, delivering smooth-scrolling navigation with Locomotive Scroll and scroll-driven animations powered by GSAP and Framer Motion.
What is wibe-studio?
wibe-studio is a single-page website template built with React 19, Vite, and styled-components v6, animated with GSAP and Framer Motion v12. It takes plain React source code and produces a ready-to-deploy static site, with a live demo hosted at wibe-studio.netlify.app. The repository, codebucks27/wibe-studio-starter-files, is maintained by developer codebucks27 and includes a companion video tutorial that walks through building the site.
What makes wibe-studio stand out?
- Smooth scrolling — Uses Locomotive Scroll for inertia-based, smooth scrolling, integrated through the react-locomotive-scroll package.
- Scroll-triggered animations — Combines GSAP ScrollTrigger with Framer Motion to animate text, images, and sections as the user scrolls.
- Modern React toolchain — Migrated from Create React App to Vite, with React 19 and the new createRoot API, reducing startup time and enabling fast hot module replacement.
- Styled-components theming — The entire UI is written in styled-components v6, with transient props for custom DOM attributes, making it easy to restyle via JavaScript.
- Video hero and photography — Features a Pexels video by cottonbro in the hero and dozens of free Pexels photos, all credited in the README.
- Tutorial-friendly architecture — The code is paired with a YouTube tutorial, and the pre-update commit f256a87 preserves the original CRA/React 17 version for learners.
- Responsive layouts — Desktop and mobile screenshots are provided for both the home and about pages, indicating the template is designed to adapt across viewports.
- Full fashion-studio content — Home and about sections include fashion quotes from Bill Cunningham and Karl Lagerfeld, plus product-focused imagery of rings, watches, denim, dresses, and more.
Who is wibe-studio for?
- React developers who want to study a real-world integration of GSAP, Framer Motion, and Locomotive Scroll can read the source and reuse its animation patterns.
- Self-taught front-end learners can follow the free video tutorial on devdreaming.com to reconstruct the site and learn modern tooling like Vite and bun.
- Fashion and creative agencies can use the template as a starting point for client sites, replacing the stock Pexels media with their own brand assets.
- Open-source hobbyists can fork the repository, contribute improvements, or adapt the design for any portfolio or studio.
What can you do with wibe-studio?
- Learn animation integration: Discover how GSAP ScrollTrigger and Framer Motion coordinate in a React app, with the migration notes explaining version-specific changes like replacing removed yoyo with repeat and repeatType.
- Launch a fashion studio site: Swap in your own products, photos, and quotes to create a distinctive landing page, then deploy the static build to Netlify or any host.
- Customize the design: Tweak styled-components theme variables, fonts (via @fontsource packages), and layout sections to match a different visual identity.
- Build a portfolio piece: Use the animated scrolling and editorial style as a base for a personal portfolio or creative showcase.
How does wibe-studio work?
The template follows the Vite development workflow. After running bun install, developers start the dev server with bun run dev at localhost:3000. A production build is generated with bun run build, outputting to the ./build directory, and bun run preview serves that build locally. React components render styled sections, while a combination of react-locomotive-scroll, GSAP ScrollTrigger, and Framer Motion hooks tie animations to scroll position.
Pros and cons
- Pros: Modern stack with React 19, Vite, and styled-components v6; all third-party animation libraries pre-integrated; a free video tutorial; demo site and screenshots for reference.
- Cons: The original tutorial was recorded against Create React App and React 17, so learners may need to translate older API calls to the Vite-based code; the project also depends on several animation libraries, which increases the dependency count.
FAQ
Is wibe-studio free?
The repository is publicly accessible on GitHub, so the source code can be cloned and used at no cost. The README does not include a license file, so you should check the repository for any usage terms before commercial deployment.
What React version does wibe-studio use?
The 2026 refresh upgrades the project to React 19 and uses the createRoot API. The original tutorial code, available in commit f256a87, runs on React 17 and Create React App.
Which libraries handle the animations?
The page combines Locomotive Scroll for smooth scrolling, GSAP for scroll-triggered effects, and Framer Motion for component-level animations. All three are listed in the README's external libraries section with links to their documentation.
How do I run wibe-studio locally?
Run bun install to install dependencies, then bun run dev to start the development server at localhost:3000. For a production bundle, execute bun run build, which writes the output to the ./build directory.
