An animated compound component that arranges social/brand icons in expanding, rotating circles around a center point.
import {
RadialSocials,
RadialSocialsContent,
RadialCircular,
RadialIcon,
} from "@/components/ui/radial-socials";
import { Zap, Rocket, Flame, Wind } from "lucide-react";
export default function RadialSocialsDemo() {
return (
<div className="w-full h-screen flex items-center justify-center bg-background">
<RadialSocials
animationDelay={200}
expandDuration={600}
className="w-[300px] h-[300px]"
>
<RadialSocialsContent>
<RadialCircular radius={70} duration={20} startAngle={39}>
<RadialIcon icon={<Zap className="w-5 h-5" />} />
<RadialIcon icon={<Rocket className="w-5 h-5" />} />
<RadialIcon icon={<Flame className="w-5 h-5" />} />
<RadialIcon icon={<Wind className="w-5 h-5" />} />
</RadialCircular>
</RadialSocialsContent>
</RadialSocials>
</div>
);
}