Orbiting Circles

effects

Dynamic concentric revolving orbital track animations.

#orbit#circles#spatial#animation

Live Interactive Preview

Component Source Code

Select language in the dropdown

OrbitingCircles.tsx

1'use client';
2
3import React from 'react';
4import { Sparkles, Globe, Terminal } from 'lucide-react';
5
6export default function OrbitingCircles() {
7  return (
8    <div className="relative flex h-56 w-56 sm:h-64 sm:w-64 items-center justify-center select-none">
9      <div className="absolute h-48 w-48 rounded-full border border-slate-200 dark:border-slate-800" />
10      <div className="absolute h-32 w-32 rounded-full border border-slate-200 dark:border-slate-800" />
11
12      <div className="relative flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-600 text-white shadow-lg">
13        <Globe className="h-6 w-6 animate-pulse" />
14      </div>
15
16      <div className="absolute h-48 w-48 rounded-full animate-[spin_12s_linear_infinite]">
17        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-cyan-500 text-white shadow-md">
18          <Sparkles className="h-3.5 w-3.5" />
19        </div>
20      </div>
21
22      <div className="absolute h-32 w-32 rounded-full animate-[spin_8s_linear_infinite_reverse]">
23        <div className="absolute -top-3 left-1/2 -translate-x-1/2 flex h-6 w-6 items-center justify-center rounded-full bg-indigo-500 text-white shadow-md">
24          <Terminal className="h-3 w-3" />
25        </div>
26      </div>
27    </div>
28  );
29}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/OrbitingCircles.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import OrbitingCircles from '@/components/effects/OrbitingCircles';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <OrbitingCircles />
7    </main>
8  );
9}