"use client"; import { motion } from "framer-motion"; import { Box, MessageSquare, Palette, Zap, Database, Cloud, Puzzle, Sparkles, } from "lucide-react"; import { cn } from "@/lib/utils"; interface OrbitIcon { Icon: typeof Box; radius: number; duration: number; startAngle: number; reverse?: boolean; color: string; } const ICONS: OrbitIcon[] = [ { Icon: Box, radius: 70, duration: 14, startAngle: 20, color: "text-white" }, { Icon: MessageSquare, radius: 70, duration: 14, startAngle: 200, color: "text-white" }, { Icon: Palette, radius: 110, duration: 20, startAngle: 90, reverse: true, color: "text-white" }, { Icon: Database, radius: 110, duration: 20, startAngle: 270, reverse: true, color: "text-white" }, { Icon: Zap, radius: 150, duration: 26, startAngle: 0, color: "text-white" }, { Icon: Cloud, radius: 150, duration: 26, startAngle: 145, color: "text-white" }, { Icon: Puzzle, radius: 150, duration: 26, startAngle: 250, color: "text-white" }, ]; function OrbitItem({ item }: { item: OrbitIcon }) { const { Icon, radius, duration, startAngle, reverse, color } = item; return (

); } export function OrbitingLogos({ className }: { className?: string }) { return (

{[70, 110, 150].map((r) => (

))} {ICONS.map((item, i) => ( ))}

); } export default function Demo() { return (

); }

Orbiting Logos