ORBIT UI

Interactive Bezier Constellation

A premium topology visualizer that maps connections between a central system and surrounding outer nodes dynamically using bezier and curved connector lines.

Loading Network...

Constellation Presets

Customize Topology

8 Nodes
Determines visual density. > 8 shifts to multi-ring strategy.
0.30
Max 8

Timing Adjustments (GSAP)

Required Dependencies
npm install gsap @gsap/react react-icons
Architecture & Setup
Copy these files into your codebase matching the structure below: šŸ“ src/ ā”œā”€ā”€ šŸ“ css/ │ └── šŸ“ beizer/ │ └── šŸ“„ variables.css ā”œā”€ā”€ šŸ“ types/ │ └── šŸ“„ beizer.types.ts ā”œā”€ā”€ šŸ“ constants/ │ └── šŸ“„ beizer.constants.ts ā”œā”€ā”€ šŸ“ hooks/ │ └── šŸ“ gsap/ │ └── šŸ“ beizer/ │ ā”œā”€ā”€ šŸ“„ index.ts │ ā”œā”€ā”€ šŸ“„ animateBeizer.ts │ ā”œā”€ā”€ šŸ“„ animateBeizerFadeScale.ts │ ā”œā”€ā”€ šŸ“„ animateBeizerSvgPath.ts │ └── šŸ“„ useBeizerAnimation.ts ā”œā”€ā”€ šŸ“ services/ │ └── šŸ“ ui.utilities/ │ └── šŸ“„ beizer.ts └── šŸ“ components/ └── šŸ“ beizer/ ā”œā”€ā”€ šŸ“„ Beizer.tsx ā”œā”€ā”€ šŸ“„ BeizerCenter.tsx ā”œā”€ā”€ šŸ“„ BeizerDesktop.tsx ā”œā”€ā”€ šŸ“„ BeizerLoader.tsx ā”œā”€ā”€ šŸ“„ BeizerMobile.tsx └── šŸ“„ BeizerNode.tsx