fix: update orbiting circle code

magicuidesign · Dec 27, 2024 · 8e7e3f6 · 8e7e3f6
1 parent 3ab3dab
commit 8e7e3f6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 57 deletions.
diff --git a/registry/default/example/orbiting-circles-demo.tsx b/registry/default/example/orbiting-circles-demo.tsx
@@ -1,4 +1,4 @@
-import OrbitingCircles from "@/registry/default/magicui/orbiting-circles";
+import { OrbitingCircles } from "@/registry/default/magicui/orbiting-circles";
 
 export default function OrbitingCirclesDemo() {
   return (
@@ -7,41 +7,12 @@ export default function OrbitingCirclesDemo() {
         Circles
       </span>
 
-      {/* Inner Circles */}
-      <OrbitingCircles
-        className="size-[30px] border-none bg-transparent"
-        duration={20}
-        delay={20}
-        radius={80}
-      >
+      <OrbitingCircles>
         <Icons.whatsapp />
-      </OrbitingCircles>
-      <OrbitingCircles
-        className="size-[30px] border-none bg-transparent"
-        duration={20}
-        delay={10}
-        radius={80}
-      >
         <Icons.notion />
-      </OrbitingCircles>
-
-      {/* Outer Circles (reverse) */}
-      <OrbitingCircles
-        className="size-[50px] border-none bg-transparent"
-        radius={190}
-        duration={20}
-        reverse
-      >
+        <Icons.openai />
         <Icons.googleDrive />
-      </OrbitingCircles>
-      <OrbitingCircles
-        className="size-[50px] border-none bg-transparent"
-        radius={190}
-        duration={20}
-        delay={20}
-        reverse
-      >
-        <Icons.gitHub />
+        <Icons.whatsapp />
       </OrbitingCircles>
     </div>
   );

diff --git a/registry/default/magicui/orbiting-circles.tsx b/registry/default/magicui/orbiting-circles.tsx
@@ -1,6 +1,8 @@
 import { cn } from "@/lib/utils";
+import React from "react";
 
-export interface OrbitingCirclesProps {
+export interface OrbitingCirclesProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   children?: React.ReactNode;
   reverse?: boolean;
@@ -10,14 +12,14 @@ export interface OrbitingCirclesProps {
   path?: boolean;
 }
 
-export default function OrbitingCircles({
+export function OrbitingCircles({
   className,
   children,
   reverse,
   duration = 20,
-  delay = 10,
-  radius = 50,
+  radius = 160,
   path = true,
+  ...props
 }: OrbitingCirclesProps) {
   return (
     <>
@@ -36,23 +38,32 @@ export default function OrbitingCircles({
           />
         </svg>
       )}
-
-      <div
-        style={
-          {
-            "--duration": duration,
-            "--radius": radius,
-            "--delay": -delay,
-          } as React.CSSProperties
-        }
-        className={cn(
-          "absolute flex size-full transform-gpu animate-orbit items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10",
-          { "[animation-direction:reverse]": reverse },
-          className,
-        )}
-      >
-        {children}
-      </div>
+      {React.Children.map(children, (child, index) => {
+        const angle = (360 / React.Children.count(children)) * index;
+        return (
+          <div
+            style={
+              {
+                "--duration": duration,
+                "--radius": radius,
+                "--angle": angle,
+                position: "absolute",
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%, -50%)",
+              } as React.CSSProperties
+            }
+            className={cn(
+              "flex size-[40px] transform-gpu animate-orbit items-center justify-center rounded-full",
+              { "[animation-direction:reverse]": reverse },
+              className,
+            )}
+            {...props}
+          >
+            {child}
+          </div>
+        );
+      })}
     </>
   );
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -153,7 +153,7 @@ module.exports = {
           "100%": {
             transform: "scale(2)",
             opacity: "0",
-          }
+          },
         },
         "shimmer-slide": {
           to: {
@@ -180,11 +180,11 @@ module.exports = {
         orbit: {
           "0%": {
             transform:
-              "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
+              "rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))",
           },
           "100%": {
             transform:
-              "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
+              "rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))",
           },
         },
         shine: {