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/vite-icon.vue";
import Vitest from "@/components/icons/vitest.vue";
import Vue from "@/components/icons/vue.vue";
import OrbitingCircles from "@/components/orbiting-circles/orbiting-circles.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:

orbiting-circles.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