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

Node Count8 Nodes

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

Connector Type

Curve Strength0.30

Circular Layout ThresholdMax 8

Timing Adjustments (GSAP)

Center Card

Connectors

Outer Nodes

Stagger Delay

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/ │ ├── 📄 index.ts │ ├── 📄 generatePath.ts │ ├── 📄 getPositions.ts │ └── 📄 getRadiatingOrder.ts └── 📁 components/ └── 📁 beizer/ ├── 📄 Beizer.tsx ├── 📄 BeizerCenter.tsx ├── 📄 BeizerDesktop.tsx ├── 📄 BeizerLoader.tsx ├── 📄 BeizerMobile.tsx └── 📄 BeizerNode.tsx