Globe Orbit
Required Dependencies
npm install gsap @gsap/react react-icons
Architecture & Setup
Copy these files into your codebase matching the structure below:
src/
├── css/
│ └── globe-orbit/
│ └── variables.css
├── types/
│ └── globe-orbit.types.ts
├── constants/
│ └── globe-orbit.constants.ts
├── hooks/
│ └── gsap/
│ └── globe-orbit/
│ ├── useGlobeOrbitAnimation.ts
│ ├── generateSpherePoints.ts
│ ├── generateScatterPositions.ts
│ └── calculateOcclusion.ts
└── components/
└── globe-orbit/
├── GlobeOrbit.tsx
└── preview/
├── index.tsx
├── Controls.tsx
└── Presets.tsx
Animation Controls
Globe Orbit Presets
Assemble FormationScatters and forms 3D globe on Apply
3D Orbit Geometry
260 px
1.0x
15°
1000 px
Natural Depth Shadow
75%
135 px