BadtzUIBeta
Docs
Cloud Orbit

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.

Charlie Avatar
Deepseek Logo
Motion Logo
Tailwind Logo
Edge Logo
Linear Logo
React Logo
Drizzle ORM Logo

Installation

pnpm dlx shadcn@latest add to-setup

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>

Note
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.

PropTypeDescriptionDefault
durationnumberDuration of the animation cycle in seconds.3
childrenReact.ReactNodeChild elements to be rendered inside the component.-
sizenumberSize of the main orbit container in pixels.160
classNamestringAdditional custom classes for styling.-
imagesArray<Object>Array of image objects, each containing a url and name.[]
propsRecord<string, any>Additional HTML attributes for the component’s wrapper div.-

orbiting-image props.

PropTypeDescriptionDefault
speednumberSpeed of the orbiting motion (lower is slower).20
radiusnumberRadius of the orbit path in pixels.100
startAtnumberDelay before animation starts, in seconds.0
sizenumberSize of each orbiting image in pixels.80
classNamestringAdditional custom classes for styling.-
imagesArray<Object>Array of image objects, each containing a url and name.[]
durationnumberDuration of the animation cycle for each orbiting image.3
propsRecord<string, any>Additional HTML attributes for the component’s wrapper div.-

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.

Credits

  • This component is inspired by Icloud

  • The avatar images are from

    Spline.One

  • For SVGs, I recommend using SVGL

    • Border BeamDock