Orbiting Circles

A collection of circles which move in orbit along a circular path.

Circle

Edit on GitHub

Copy code

Show code

<script setup lang='ts'>
import Nitro from '@/components/icons/Nitro.vue'
import Nuxt from '@/components/icons/Nuxt.vue'
import ViteIcon from '@/components/icons/ViteIcon.vue'
import Vitest from '@/components/icons/Vitest.vue'
import Vue from '@/components/icons/Vue.vue'
import OrbitingCircles from '@/components/orbitingCircles/OrbitingCircles.vue'
</script>

<template>
  <div class="relative flex h-[500px] w-[300px] md:w-[600px] flex-col items-center justify-center overflow-hidden">
    <span
      class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-black"
    >
      Circle
    </span>

    <OrbitingCircles class="size-[30px] border-none bg-transparent" :duration="20" :delay="10" :radius="70">
      <Nuxt />
    </OrbitingCircles>

    <OrbitingCircles class="size-[30px] border-none bg-transparent" :duration="20" :delay="10" :radius="100" reverse>
      <Nitro />
    </OrbitingCircles>

    <OrbitingCircles class="size-[50px]" :radius="190" :duration="20" reverse>
      <ViteIcon />
    </OrbitingCircles>

    <OrbitingCircles class="size-[50px]" :radius="145" :duration="20">
      <Vitest />
    </OrbitingCircles>

    <OrbitingCircles class="size-[30px] border-none bg-transparent" :duration="40" :delay="10" :radius="45" reverse>
      <Vue />
    </OrbitingCircles>
  </div>
</template>

Installation

Copy and paste the following code into your project:

OrbitingCircles.vue

<script setup lang='ts'>
import { cn } from '@/lib/utils'

interface OrbitingCirclesProps {
  class?: string
  reverse?: boolean
  duration?: number
  delay?: number
  radius?: number
  path?: boolean
};

const props = withDefaults(defineProps<OrbitingCirclesProps>(), {
  duration: 20,
  delay: 10,
  radius: 50,
  path: true,
})

const className = cn(
  'absolute flex size-full animate-reverse transform-gpu animate-orbit items-center justify-center rounded-full border bg-none [animation-delay:calc(var(--delay)*1000ms)]',
  props.class,
  { '[animate-direction:reverse]': props.reverse },
)
</script>

<template>
  <div v-if="props.path">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="pointer-events-none absolute inset-0 size-full">
      <circle class="stroke-black/10 stroke-1 dark:stroke-white/10" cx="50%" cy="50%" :r="radius" fill="none" />
    </svg>
  </div>

  <div
    :style="{
      '--duration': props.duration,
      '--radius': props.radius,
      '--delay': -props.delay,
    }"
    :class="className"
  >
    <slot />
  </div>
</template>

Add the following animations to your tailwind.config.js file:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        orbit: "orbit calc(var(--duration)*1s) linear infinite",
      },
      keyframes: {
        orbit: {
          "0%": {
            transform:
              "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
          },
          "100%": {
            transform:
              "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
          },
        },
      },
    },
  },
};

Props

Prop	Type	Description	Default
class	string	The class for the component	""
reverse	boolean	If true, the animation plays in reverse	false
duration	number	The duration of the animation in seconds	20
delay	number	The delay before the animation starts in seconds	10
radius	number	The radius of the orbit in pixels	50