Orbit Animation

npx shadcn@latest add https://motion-x.vercel.app/r/v0/orbit-animation-demo.json

Stack

React

Next.js

TypeScript

Tailwind

Docker

Prisma

Vercel

Node

React

TypeScript

Vercel

Tailwind

Docker

Node

Next.js

Prisma

React

TypeScript

About

Orbit Animation places items on circular rings that rotate around a central element — like a solar system or tech stack visualization. Each ring has its own speed, direction, and set of items. Items stay upright while orbiting via automatic counter-rotation.

Key features:

3D perspective tilt — orbits viewed at an angle for depth
Mouse parallax — orbit plane responds to cursor position
Glowing orbit paths — gradient SVG rings with soft glow
Item glow halos — soft radial glow behind each item
Staggered entry — items animate in from center on mount
Optional connecting beams — dashed lines from center to items
Hover interaction — orbits slow down, items scale up

Installation

Usage

import { OrbitAnimation } from "@/components/motionx/orbit-animation";

Basic usage

<OrbitAnimation
  centerContent={<span className="text-2xl">🚀</span>}
  rings={[
    {
      radius: 100,
      speed: 20,
      items: [
        { content: <span>⚛️</span> },
        { content: <span>▲</span> },
        { content: <span>🔷</span> },
      ],
    },
  ]}
/>

3D perspective with multiple rings

<OrbitAnimation
  perspective
  mouseParallax
  glowColor="250 90% 65%"
  centerContent={<span className="text-3xl">⚡</span>}
  rings={[
    {
      radius: 85,
      speed: 20,
      items: [
        { content: <span>⚛️</span>, size: 48 },
        { content: <span>▲</span>, size: 48 },
      ],
    },
    {
      radius: 160,
      speed: 35,
      reverse: true,
      items: [
        { content: <span>🐳</span>, size: 48 },
        { content: <span>📦</span>, size: 48 },
        { content: <span>☁️</span>, size: 48 },
      ],
    },
  ]}
/>

With connecting beams

<OrbitAnimation
  showBeams
  perspective={false}
  glowColor="170 80% 50%"
  centerContent={<span className="text-3xl">🤖</span>}
  rings={[
    {
      radius: 110,
      speed: 22,
      items: [
        { content: <span>🧠</span>, size: 48 },
        { content: <span>👁️</span>, size: 48 },
        { content: <span>🎵</span>, size: 48 },
      ],
    },
  ]}
/>

Examples

AI Feature Showcase

Flat perspective with connecting beam lines and themed feature pills.

npx shadcn@latest add https://motion-x.vercel.app/r/v0/orbit-animation-demo2.json

AI EngineMultimodal

🧠NLP

👁️Vision

🎵Audio

📐Math

💬Chat

🖼️Image Gen

📝Summarize

🔍Search

🧬Embeddings

🤖Agents

Props

Prop	Type	Default	Description
`className`	`string`	—	Container CSS classes
`centerContent`	`React.ReactNode`	—	Content rendered at the center
`rings`	`OrbitRing[]`	`[]`	Array of orbit ring definitions
`pauseOnHover`	`boolean`	`true`	Slow orbits when hovering over the component
`showBeams`	`boolean`	`false`	Show dashed connecting lines from center
`perspective`	`boolean`	`true`	Enable 3D perspective tilt on the orbit system
`mouseParallax`	`boolean`	`true`	Tilt orbit plane following mouse position
`glowColor`	`string`	`"210 100% 60%"`	HSL values for orbit glow and item halos

OrbitRing

Prop	Type	Default	Description
`radius`	`number`	—	Distance from center in px
`speed`	`number`	—	Seconds per full rotation
`reverse`	`boolean`	`false`	Orbit counter-clockwise
`items`	`OrbitItem[]`	—	Items to place on this ring

OrbitItem

Prop	Type	Default	Description
`content`	`React.ReactNode`	—	Content to render in the orbit
`size`	`number`	`40`	Item container size in px

Tip: Use perspective with mouseParallax for the most immersive 3D feel. Enable showBeams on flat layouts (no perspective) for a neural-network aesthetic. Match glowColor to your brand for cohesive design.