Cloud Orbit

This component creates a dynamic and interactive experience, where each icon orbits in a fluid motion. Fully customizable, it's ideal for showcasing your tech stack or the tools your product uses.

import {
  CloudOrbit,
  OrbitingImage,
} from "@/components/ui/cloud-orbit"

const orbitingImagesData = [
  {
    speed: 20,
    radius: 119,
    size: 53,
    startAt: 0.15625,
    images: [
      {
        name: "Deepseek Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/deepseek-logo.webp",
      },
      {
        name: "Drizzle ORM Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/drizzle-orm-logo.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 118,
    size: 85,
    startAt: 0.25,
    images: [
      {
        name: "Motion Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/motion-logo.webp",
      },
      {
        name: "Deepseek Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/deepseek-logo.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 130,
    size: 73,
    startAt: 0.4375,
    images: [
      {
        name: "Tailwind Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/tailwindcss-logo.webp",
      },
      {
        name: "Motion Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/motion-logo.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 120,
    size: 49,
    startAt: 0.61,
    images: [
      {
        name: "Edge Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/edge-logo.webp",
      },
      {
        name: "Tailwind Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/tailwindcss-logo.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 136,
    size: 40,
    startAt: 0.65625,
    images: [
      {
        name: "Linear Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/linear-logo.webp",
      },
      {
        name: "Edge Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/edge-logo.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 111,
    size: 87,
    startAt: 0.75,
    images: [
      {
        name: "React Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/react-logo.webp",
      },
      {
        name: "Linear Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/linear-logo.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 124,
    size: 73,
    startAt: 0.9375,
    images: [
      {
        name: "Drizzle ORM Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/drizzle-orm-logo.webp",
      },
      {
        name: "React Logo",
        url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/react-logo.webp",
      },
    ],
  },
]

export function CloudOrbitDemo() {
  return (
    <CloudOrbit
      duration={3}
      size={160}
      images={[
        {
          name: "Charlie Avatar",
          url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/avatar-1.webp",
        },
        {
          name: "Tommy Avatar",
          url: "https://cdn.badtz-ui.com/images/components/cloud-orbit/avatar-2.webp",
        },
      ]}
    >
      {orbitingImagesData.map((orbit, index) => (
        <OrbitingImage
          key={index}
          speed={orbit.speed}
          radius={orbit.radius}
          size={orbit.size}
          startAt={orbit.startAt}
          images={orbit.images}
          duration={3}
        />
      ))}
    </CloudOrbit>
  )
}

Installation


pnpm dlx shadcn@latest add https://badtz-ui.com/r/cloud-orbit.json

Usage


import { CloudOrbit, OrbitingImage } from "@/registry/components/cloud-orbit";


const orbitingImagesData = [
  {
    speed: 20,
    radius: 119,
    size: 53,
    startAt: 0.15625,
    images: [
      {
        name: "Deepseek Logo",
        url: "/images/components/cloud-orbit/deepseek-logo.webp",
      },
      {
        name: "Drizzle ORM Logo",
        url: "/images/components/cloud-orbit/drizzle-orm-logo.webp",
      },
    ],
  },
  ...
];


<CloudOrbit
  duration={3}
  size={160}
  images={[
    {
      name: "Charlie Avatar",
      url: "/images/components/cloud-orbit/avatar-1.webp",
    },
    {
      name: "Tommy Avatar",
      url: "/images/components/cloud-orbit/avatar-2.webp",
    },
  ]}
  className=""
>
  {orbitingImagesData.map((orbit, index) => (
    <OrbitingImage
      key={index}
      speed={orbit.speed}
      radius={orbit.radius}
      size={orbit.size}
      startAt={orbit.startAt}
      images={orbit.images}
    />
  ))}
</CloudOrbit>

Placing the icons at the correct angle can be a bit tricky. For easier setup, use the positions from the demo and adjust them visually. If you need help, just reach out!

Props

cloud-orbit props.

Prop	Type	Default
`duration?`	`number`	`3`
`children?`	`React.ReactNode`	-
`size?`	`number`	`160`
`className?`	`string`	-
`images?`	`Array<Object>`	`[]`
`props?`	`Record<string, any>`	-

orbiting-image props.

Prop	Type	Default
`speed?`	`number`	`20`
`radius?`	`number`	`100`
`startAt?`	`number`	`0`
`size?`	`number`	`80`
`className?`	`string`	-
`images?`	`Array<Object>`	`[]`
`duration?`	`number`	`3`
`props?`	`Record<string, any>`	-

Disclaimer

We are not affiliated with any of the brands whose logos are used in this component. These logos are displayed for demonstration purposes only.

Border Beam

Cursor Cards

Ship Beautiful React apps that convert!

Get BadtzUI Pro and access prebuilt templates & blocks for ReactJS.

Build faster while converting more users to customers.

On This Page