Scroll Progress 3D
NewPremium3D scene that rotates and scales based on page scroll progress. Wireframe icosahedron with direction-aware coloring.
three3dscrollprogresswebgldirection-aware
Dependencies: @react-three/fiber, three
Installation
Terminalbash
npx motioncraft add scroll-progress-3dUsage
scroll-progress-3d.tsxtsx
import { ScrollProgress3D } from "@/components/three/scroll-progress-3d";
<ScrollProgress3D wireframe stages={4} className="h-96" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| wireframe | boolean | true | Show wireframe |
| stages | number | 4 | Number of morph stages |
| className | string | — | Additional CSS classes |
Related Components
Particle Morph
NewParticle system that smoothly morphs between geometric shapes (sphere, cube, torus, spiral). Direction-aware coloring.
Floating Shapes
3D floating geometric shapes with gentle rotation and bounce.
Globe
Interactive 3D globe with connection arcs and glow effects.
Morphing Nav
NewNavigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.