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

​
Usage

<script setup lang="ts">
import { Orbit, ORBIT_DIRECTION } from '@/components/visualization'
</script>

<template>
  <Orbit 
    :direction="ORBIT_DIRECTION.NORMAL" 
    :duration="20" 
    :delay="10" 
    :radius="50" 
    :path="true"
  >
    <div class="w-8 h-8 rounded-full bg-blue-500" />
  </Orbit>
</template>

​
Props

Prop NameTypeDefaultDescription
directionnormal | reversenormalThe direction of the orbit. You can use the constant ORBIT_DIRECTION.
duration?number20The duration of the orbit animation in seconds.
delay?number10Delay in seconds before the animation starts.
radius?number50Radius of the orbit path in pixels.
path?booleanfalseDisplays a circle path for the orbit if true.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us