Circling Elements

1"use client"
2 
3import { Children } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8type CirclingElementsProps = {
9  children: React.ReactNode
10  radius?: number
11  duration?: number // in seconds
12  easing?: string
13  direction?: "normal" | "reverse"
14  className?: string
15  pauseOnHover?: boolean
16}
17 
18const CirclingElements: React.FC<CirclingElementsProps> = ({
19  children,
20  radius = 100,
21  duration = 10,
22  easing = "linear",
23  direction = "normal",
24  className,
25  pauseOnHover = false,
26}) => {
27  return (
28    <div className={cn("relative z-0 group/circling", className)}>
29      {Children.map(children, (child, index) => {
30        const offset = (index * 360) / Children.count(children)
31 
32        const animationProps = {
33          "--circling-duration": duration,
34          "--circling-radius": radius,
35          "--circling-offset": offset,
36          "--circling-direction": direction === "reverse" ? -1 : 1,
37          animation: `circling ${duration}s ${easing} infinite`,
38          animationName: "circling",
39          animationDuration: `${duration}s`,
40          animationTimingFunction: easing,
41          animationIterationCount: "infinite",
42        } as React.CSSProperties
43 
44        return (
45          <motion.div
46            key={index}
47            style={animationProps}
48            className={cn(
49              "transform-gpu animate-circling absolute -translate-x-1/2 -translate-y-1/2",
50              pauseOnHover &&
51                "group-hover/circling:![animation-play-state:paused]"
52            )}
53          >
54            {child}
55          </motion.div>
56        )
57      })}
58    </div>
59  )
60}
61 
62export default CirclingElements