Orbit Rotation

Component 140

About

An animated component that rotates customizable tech/brand icons in concentric dotted orbits around a center icon.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Orbit Rotation to your project and fits it to your theme.

Code

How Orbit Rotation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import {
  FaApple,
  FaAws,
  FaDocker,
  FaGithub,
  FaGoogle,
  FaInstagram,
  FaLinkedin,
  FaNodeJs,
  FaReact,
  FaTwitter,
} from "react-icons/fa"
import {
  SiFacebook,
  SiNextdotjs,
  SiRedux,
  SiTypescript,
  SiVercel,
} from "react-icons/si"

import { OrbitRotation } from "@/components/ui/orbit-rotation"

export function OrbitRotationDemo() {
  const techIcons = [
    { Icon: FaReact, name: "React" },
    { Icon: FaAws, name: "AWS" },
    { Icon: FaDocker, name: "Docker" },
    { Icon: FaNodeJs, name: "Node.js" },
    { Icon: SiNextdotjs, name: "Next.js" },
    { Icon: SiVercel, name: "Vercel" },
    { Icon: SiRedux, name: "Redux" },
    { Icon: SiTypescript, name: "TypeScript" },
    { Icon: FaGithub, name: "GitHub" },
    { Icon: FaTwitter, name: "Twitter" },
    { Icon: FaLinkedin, name: "LinkedIn" },
    { Icon: FaInstagram, name: "Instagram" },
    { Icon: FaGoogle, name: "Google" },
    { Icon: FaApple, name: "Apple" },
    { Icon: SiFacebook, name: "Facebook" },
  ]

  const centerIcon = {
    Icon: SiNextdotjs,
    name: "Next.js",
  }

  return (
    <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border p-8">
      <div className="flex h-full items-center justify-center">
        <OrbitRotation
          icons={techIcons}
          orbitCount={3}
          orbitGap={6}
          centerIcon={centerIcon}
          size="md"
        />
      </div>
    </div>
  )
}

export default OrbitRotationDemo