5-Layer 3D Orbiting Rings

1'use client';
2
3import React from 'react';
4import { Globe } from 'lucide-react';
5import { FaReact, FaPython, FaDocker, FaAws } from 'react-icons/fa6';
6import { SiTypescript, SiTailwindcss, SiNextdotjs, SiGraphql, SiRust } from 'react-icons/si';
7
8export default function MultiLayerOrbit() {
9  return (
10    <div className="relative flex h-72 w-full max-w-[340px] sm:h-80 sm:max-w-[360px] items-center justify-center select-none overflow-visible p-4 mx-auto">
11      {/* Central Core */}
12      <div className="relative z-20 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-2xl bg-gradient-to-tr from-blue-600 via-indigo-600 to-violet-600 text-white shadow-xl shadow-indigo-500/25 ring-2 ring-white/20">
13        <Globe className="h-5 w-5 sm:h-6 sm:w-6 animate-pulse" />
14      </div>
15
16      {/* Layer 1 - Outer Ring (250px / 290px) */}
17      <div className="absolute h-[250px] w-[250px] sm:h-[290px] sm:w-[290px] rounded-full border border-cyan-400/35 animate-[spin_24s_linear_infinite]">
18        <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-lg shadow-cyan-500/30 ring-2 ring-white/40">
19          <FaReact className="h-3.5 w-3.5" />
20        </div>
21        <div className="absolute -bottom-3.5 left-1/2 -translate-x-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-slate-900 dark:bg-slate-950 border border-slate-700 text-cyan-400 shadow-lg ring-2 ring-cyan-500/40">
22          <SiNextdotjs className="h-3.5 w-3.5" />
23        </div>
24      </div>
25
26      {/* Layer 2 - Indigo Ring (200px / 230px) */}
27      <div className="absolute h-[200px] w-[200px] sm:h-[230px] sm:w-[230px] rounded-full border border-indigo-400/35 animate-[spin_18s_linear_infinite_reverse]">
28        <div className="absolute top-1/2 -left-3.5 -translate-y-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-indigo-500 text-white shadow-lg shadow-indigo-500/30 ring-2 ring-white/40">
29          <SiTypescript className="h-3.5 w-3.5" />
30        </div>
31        <div className="absolute top-1/2 -right-3.5 -translate-y-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-cyan-600 text-white shadow-lg shadow-cyan-600/30 ring-2 ring-white/40">
32          <SiTailwindcss className="h-3.5 w-3.5" />
33        </div>
34      </div>
35
36      {/* Layer 3 - Emerald Ring (150px / 170px) */}
37      <div className="absolute h-[150px] w-[150px] sm:h-[170px] sm:w-[170px] rounded-full border border-emerald-400/35 animate-[spin_14s_linear_infinite]">
38        <div className="absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 ring-2 ring-white/40">
39          <FaPython className="h-3 w-3" />
40        </div>
41        <div className="absolute bottom-2 left-2 flex h-6 w-6 items-center justify-center rounded-full bg-sky-500 text-white shadow-lg shadow-sky-500/30 ring-2 ring-white/40">
42          <FaDocker className="h-3 w-3" />
43        </div>
44      </div>
45
46      {/* Layer 4 - Amber Ring (105px / 120px) */}
47      <div className="absolute h-[105px] w-[105px] sm:h-[120px] sm:w-[120px] rounded-full border border-amber-400/35 animate-[spin_10s_linear_infinite_reverse]">
48        <div className="absolute top-1 left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-amber-500 text-white shadow-md ring-1 ring-white/50">
49          <FaAws className="h-2.5 w-2.5" />
50        </div>
51        <div className="absolute bottom-1 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-orange-600 text-white shadow-md ring-1 ring-white/50">
52          <SiRust className="h-2.5 w-2.5" />
53        </div>
54      </div>
55
56      {/* Layer 5 - Pink Ring (65px / 75px) */}
57      <div className="absolute h-[65px] w-[65px] sm:h-[75px] sm:w-[75px] rounded-full border border-pink-400/40 animate-[spin_7s_linear_infinite]">
58        <div className="absolute -top-2.5 left-1/2 -translate-x-1/2 flex h-5 w-5 items-center justify-center rounded-full bg-pink-500 text-white shadow-md ring-1 ring-white/50">
59          <SiGraphql className="h-2.5 w-2.5" />
60        </div>
61      </div>
62    </div>
63  );
64}