fix: update orbiting circle code (#472)

* fix: update orbiting circle code * feat: updating the oribiting circles --------- Co-authored-by: Arghya Das <arghyadasproject@gmail.com>
magicuidesign · Jan 2, 2025 · f375336 · f375336
1 parent 79622e3
commit f375336
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 62 deletions.
diff --git a/content/docs/components/orbiting-circles.mdx b/content/docs/components/orbiting-circles.mdx
@@ -51,11 +51,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))",
           },
         },
       },
@@ -79,4 +79,7 @@ module.exports = {
 | reverse   | boolean         | If true, the animation plays in reverse          | false   |
 | duration  | number          | The duration of the animation in seconds         | 20      |
 | delay     | number          | The delay before the animation starts in seconds | 10      |
-| radius    | number          | The radius of the orbit in pixels                | 50      |
+| radius    | number          | The radius of the orbit in pixels                | 160     |
+| path      | boolean         | If true, a path is displayed for the orbit       | true    |
+| iconSize  | number          | The size of the icon in pixels                   | 30      |
+| speed     | number          | The speed of the animation                       | 1       |
diff --git a/public/r/styles/default/orbiting-circles.json b/public/r/styles/default/orbiting-circles.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "magicui/orbiting-circles.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\nexport interface OrbitingCirclesProps {\n  className?: string;\n  children?: React.ReactNode;\n  reverse?: boolean;\n  duration?: number;\n  delay?: number;\n  radius?: number;\n  path?: boolean;\n}\n\nexport default function OrbitingCircles({\n  className,\n  children,\n  reverse,\n  duration = 20,\n  delay = 10,\n  radius = 50,\n  path = true,\n}: OrbitingCirclesProps) {\n  return (\n    <>\n      {path && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n        >\n          <circle\n            className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            fill=\"none\"\n          />\n        </svg>\n      )}\n\n      <div\n        style={\n          {\n            \"--duration\": duration,\n            \"--radius\": radius,\n            \"--delay\": -delay,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"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\",\n          { \"[animation-direction:reverse]\": reverse },\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport React from \"react\";\n\nexport interface OrbitingCirclesProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  children?: React.ReactNode;\n  reverse?: boolean;\n  duration?: number;\n  delay?: number;\n  radius?: number;\n  path?: boolean;\n  iconSize?: number;\n  speed?: number;\n}\n\nexport function OrbitingCircles({\n  className,\n  children,\n  reverse,\n  duration = 20,\n  radius = 160,\n  path = true,\n  iconSize = 30,\n  speed = 1,\n  ...props\n}: OrbitingCirclesProps) {\n  const calculatedDuration = duration / speed;\n  return (\n    <>\n      {path && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n        >\n          <circle\n            className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            fill=\"none\"\n          />\n        </svg>\n      )}\n      {React.Children.map(children, (child, index) => {\n        const angle = (360 / React.Children.count(children)) * index;\n        return (\n          <div\n            style={\n              {\n                \"--duration\": calculatedDuration,\n                \"--radius\": radius,\n                \"--angle\": angle,\n                \"--icon-size\": `${iconSize}px`,\n                position: \"absolute\",\n              } as React.CSSProperties\n            }\n            className={cn(\n              `flex size-[var(--icon-size)] transform-gpu animate-orbit items-center justify-center rounded-full`,\n              { \"[animation-direction:reverse]\": reverse },\n              className\n            )}\n            {...props}\n          >\n            {child}\n          </div>\n        );\n      })}\n    </>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }

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,18 @@ export default function OrbitingCirclesDemo() {
         Circles
       </span>
 
-      {/* Inner Circles */}
-      <OrbitingCircles
-        className="size-[30px] border-none bg-transparent"
-        duration={20}
-        delay={20}
-        radius={80}
-      >
+      <OrbitingCircles iconSize={40}>
         <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 />
+        <Icons.whatsapp />
       </OrbitingCircles>
-      <OrbitingCircles
-        className="size-[50px] border-none bg-transparent"
-        radius={190}
-        duration={20}
-        delay={20}
-        reverse
-      >
-        <Icons.gitHub />
+      <OrbitingCircles iconSize={30} radius={100} reverse speed={2}>
+        <Icons.whatsapp />
+        <Icons.notion />
+        <Icons.openai />
+        <Icons.googleDrive />
       </OrbitingCircles>
     </div>
   );
@@ -82,6 +59,7 @@ const Icons = {
       height="100"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
+      className="fill-black dark:fill-white"
     >
       <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
     </svg>

diff --git a/registry/default/magicui/orbiting-circles.tsx b/registry/default/magicui/orbiting-circles.tsx
@@ -1,24 +1,31 @@
 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;
   duration?: number;
   delay?: number;
   radius?: number;
   path?: boolean;
+  iconSize?: number;
+  speed?: number;
 }
 
-export default function OrbitingCircles({
+export function OrbitingCircles({
   className,
   children,
   reverse,
   duration = 20,
-  delay = 10,
-  radius = 50,
+  radius = 160,
   path = true,
+  iconSize = 30,
+  speed = 1,
+  ...props
 }: OrbitingCirclesProps) {
+  const calculatedDuration = duration / speed;
   return (
     <>
       {path && (
@@ -36,23 +43,29 @@ 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": calculatedDuration,
+                "--radius": radius,
+                "--angle": angle,
+                "--icon-size": `${iconSize}px`,
+              } as React.CSSProperties
+            }
+            className={cn(
+              `absolute flex size-[var(--icon-size)] transform-gpu animate-orbit items-center justify-center rounded-full`,
+              { "[animation-direction:reverse]": reverse },
+              className,
+            )}
+            {...props}
+          >
+            {child}
+          </div>
+        );
+      })}
     </>
   );
 }
diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts
@@ -386,11 +386,11 @@ export const ui: Registry = [
               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))",
                 },
               },
             },

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: {