ℹ️ Design & Concept Attribution: This repository is an unofficial, non-commercial educational recreation created solely to study the interactive 3D WebGL and GSAP animation techniques seen on DogStudio. This is not an original visual design — all original design, aesthetic concepts, branding, and visual media credit belong entirely to the creative team at DogStudio.
-
Live Deployment: fluid-motion-dogstudio.vercel.app
stucked.mp4
- GLSL Custom Matcap Shader Interpolation: Custom
onBeforeCompileGLSL fragment shader modification that smoothly interpolates between multiple Matcap textures based on scroll and hover triggers. - Scroll-Synced 3D Camera Timeline: GSAP
ScrollTriggerintegration coordinating 3D mesh position/rotation with DOM scroll progression. - Accessibility & Reduced Motion: Automatically detects
prefers-reduced-motionto tone down camera scroll transitions. - WebGL Resilience & Fallback: Includes runtime WebGL2/WebGL1 hardware capability detection and React Error Boundaries to display a graceful fallback on unsupported or GPU-restricted devices.
- Progressive Asset Loading: Preloads Draco-compressed GLTF 3D models and high-resolution Matcap texture arrays via React
Suspense.
- Framework: React 19 + Vite 7
- 3D Graphics Engine: Three.js +
@react-three/fiber+@react-three/drei - Animation & Scroll Control: GSAP +
@gsap/react+ScrollTrigger - Asset Pipeline: GLTF / Draco Loader + WebGL MatCap Textures
- Node.js
^20.0.0or higher - npm
^10.0.0or higher
-
Clone the repository:
git clone https://github.com/1Bharat007/FluidMotion.git cd FluidMotion -
Install dependencies:
npm install
-
Start the development server:
npm run dev
Open
http://localhost:5173in your browser. -
Build for production:
npm run build
- Original Design & Concept: DogStudio
- Recreated for educational purposes to practice interactive WebGL and 3D web animation.
MIT License. See LICENSE for details.