gamma logo

1

Radial Intro

PreviousNext

A rotating radial orbit animation demo showcasing spinning profile images.

Installation

pnpm dlx shadcn@latest add @gammaui/radial-intro

Usage

import { RadialIntro } from "@/components/ui/radial-intro"
 
const ITEMS = [
  {
    id: 1,
    name: "Framer University",
    src: "https://pbs.twimg.com/profile_images/1602734731728142336/9Bppcs67_400x400.jpg",
  },
  {
    id: 2,
    name: "arhamkhnz",
    src: "https://pbs.twimg.com/profile_images/1897311929028255744/otxpL-ke_400x400.jpg",
  },
  {
    id: 3,
    name: "Skyleen",
    src: "https://pbs.twimg.com/profile_images/1948770261848756224/oPwqXMD6_400x400.jpg",
  },
  {
    id: 4,
    name: "Shadcn",
    src: "https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg",
  },
]
 
export default function Example() {
  return <RadialIntro orbitItems={ITEMS} stageSize={320} imageSize={60} />
}

This will display rotating orbiting images with smooth animations powered by Motion.

Props

PropTypeDefaultDescription
orbitItemsOrbitItem[]—The list of images (with id, name, src) to place in orbit.
stageSizenumber320The width/height of the orbit container.
imageSizenumber60Image size for each orbiting item.

Orbit Item Shape

type OrbitItem = {
  id: number
  name: string
  src: string
}

Example Variants

Larger Stage

<Component orbitItems={ITEMS} stageSize={480} imageSize={80} />

Smaller Images

<Component orbitItems={ITEMS} imageSize={40} />

Custom Data

<Component
  orbitItems={[
    { id: 1, name: "Mars", src: "/planets/mars.png" },
    { id: 2, name: "Venus", src: "/planets/venus.png" },
    { id: 3, name: "Jupiter", src: "/planets/jupiter.png" },
  ]}
/>

Features

  • Beautiful Orbit Animation using Motion’s spring physics
  • Auto Counter-Rotation keeps images upright during orbit
  • Fully Responsive with customizable sizes
  • Optimized Rendering using LayoutGroup and motion
  • Supports Any Number of Items

Tips

  • Use square images for best rotation symmetry.
  • Increase stageSize for more orbit spacing.
  • You can place the Radial Intro in hero sections or intros for profiles.
  • Adjust animation speed by modifying the spinConfig inside the component.