Cloud Orbit

Component 72

About

Here is Cloud Orbit component

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

Code

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

Usage.tsx

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.21st.dev/assets/localized/2539ecca2bdb415852eb0c47c1ba6a5ef94be4259c35666a805984f085943d81.webp",
      },
      {
        name: "Drizzle ORM Logo",
        url: "https://cdn.21st.dev/assets/localized/e7cf040adbc1212f1017490d08b80f69c848dc2334d3062dc4b51985ec361eb4.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 118,
    size: 85,
    startAt: 0.25,
    images: [
      {
        name: "Motion Logo",
        url: "https://cdn.21st.dev/assets/localized/c4aee940e1a210d859575d4e5e42c301aa3609ae996bdedab34bfab550a8ca14.webp",
      },
      {
        name: "Deepseek Logo",
        url: "https://cdn.21st.dev/assets/localized/2539ecca2bdb415852eb0c47c1ba6a5ef94be4259c35666a805984f085943d81.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 130,
    size: 73,
    startAt: 0.4375,
    images: [
      {
        name: "Tailwind Logo",
        url: "https://cdn.21st.dev/assets/localized/9147d88e200c683eaf2bfea4417eecfc328d2204261b1d51fac12be37c7f4ca1.webp",
      },
      {
        name: "Motion Logo",
        url: "https://cdn.21st.dev/assets/localized/c4aee940e1a210d859575d4e5e42c301aa3609ae996bdedab34bfab550a8ca14.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 120,
    size: 49,
    startAt: 0.61,
    images: [
      {
        name: "Edge Logo",
        url: "https://cdn.21st.dev/assets/localized/06e54875bb714f37ce0135710f3d0a2c780ba981969dd3b5b0ecae433a7dddfe.webp",
      },
      {
        name: "Tailwind Logo",
        url: "https://cdn.21st.dev/assets/localized/9147d88e200c683eaf2bfea4417eecfc328d2204261b1d51fac12be37c7f4ca1.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 136,
    size: 40,
    startAt: 0.65625,
    images: [
      {
        name: "Linear Logo",
        url: "https://cdn.21st.dev/assets/localized/81395014949b7b57af7235a7a4bf44e4c00db711027a0cefb81d049c7c24c033.webp",
      },
      {
        name: "Edge Logo",
        url: "https://cdn.21st.dev/assets/localized/06e54875bb714f37ce0135710f3d0a2c780ba981969dd3b5b0ecae433a7dddfe.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 111,
    size: 87,
    startAt: 0.75,
    images: [
      {
        name: "React Logo",
        url: "https://cdn.21st.dev/assets/localized/2b8a6521acdd4f37751da7b0dd22fabf3ad64034068b43fb767c6a56c85213ae.webp",
      },
      {
        name: "Linear Logo",
        url: "https://cdn.21st.dev/assets/localized/81395014949b7b57af7235a7a4bf44e4c00db711027a0cefb81d049c7c24c033.webp",
      },
    ],
  },
  {
    speed: 20,
    radius: 124,
    size: 73,
    startAt: 0.9375,
    images: [
      {
        name: "Drizzle ORM Logo",
        url: "https://cdn.21st.dev/assets/localized/e7cf040adbc1212f1017490d08b80f69c848dc2334d3062dc4b51985ec361eb4.webp",
      },
      {
        name: "React Logo",
        url: "https://cdn.21st.dev/assets/localized/2b8a6521acdd4f37751da7b0dd22fabf3ad64034068b43fb767c6a56c85213ae.webp",
      },
    ],
  },
];

const settings = {
  duration: 3,
  size: 160,
};

export default function CloudOrbitDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <CloudOrbit
      duration={s.duration}
      size={s.size}
      images={[
        {
          name: "Charlie Avatar",
          url: "https://cdn.21st.dev/assets/localized/d634259953a8a9edd0cdcd25c6d3e28679f061cc5769ca06fe38602faacbae33.webp",
        },
        {
          name: "Tommy Avatar",
          url: "https://cdn.21st.dev/assets/localized/67aae2f3c5ebb8b3824d229f51ed26d816b1133dddb09af1fe312e60fb484eda.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>
  );
}