Orbiting icon rings
Two concentric rings of icons orbiting a center point at independent speeds and directions, pure CSS keyframes under the hood. Common for a hub-and-spoke integrations section, swap in the client's own logo set.
Live preview
open in new tab ↗import { OrbitingCircles } from "@/components/magicui/orbiting-circles"
export function OrbitingCirclesDemo() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden">
<OrbitingCircles iconSize={40}>
<IconA />
<IconB />
<IconC />
</OrbitingCircles>
<OrbitingCircles iconSize={30} radius={100} reverse speed={2}>
<IconD />
<IconE />
</OrbitingCircles>
</div>
)
}Block id: magicui-orbiting-circlesreact-tailwind · code-required
More composite blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.