Circling Elements
Arrange child elements in a circular orbit with continuous rotation animation.
1
2
3
4
"use client";
import CirclingElements from "@/components/vritti/circling-elements";
export function CirclingElementsExample() {
return (
<div className="w-full h-[400px] flex items-center justify-center">
<CirclingElements radius={120} duration={8} pauseOnHover>
<div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
1
</div>
<div className="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">
2
</div>
<div className="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white font-bold">
3
</div>
<div className="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">
4
</div>
</CirclingElements>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/circling-elements"
Dependencies
pnpm add motion