Orbit

A component that animates content in a circular orbit, with customizable duration, delay, and radius. It also offers an optional orbit path display.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/orbit.json"

Orbit.vue

index.ts

Synchronized orbit

Prop Name	Type	Default	Description
`direction`	`normal` \| `reverse`	`normal`	The direction of the orbit. You can use the constant ORBIT_DIRECTION.
`duration`	`?number`	`20`	The duration of the orbit animation in seconds.
`delay`	`?number`	`10`	Delay in seconds before the animation starts.
`radius`	`?number`	`50`	Radius of the orbit path in pixels.
`path`	`?boolean`	`false`	Displays a circle path for the orbit if `true`.

Circular Orbit Animation: The component animates its content in a smooth circular orbit around the center point.
Customizable Animation: The orbit’s duration, delay, and radius are fully adjustable, providing flexibility in animation behavior.
Optional Orbit Path: An optional visual representation of the orbit path can be toggled using the path prop.
Reversibility: The orbit direction can be reverse by setting the direction prop.
Responsive and Efficient: The component handles different container sizes and uses Vue’s reactivity to ensure efficient animation.

On This Page