Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update orbiting circle code #472

Merged
merged 2 commits into from
Jan 2, 2025
+56 −62
Merged

fix: update orbiting circle code #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e7e3f6
fix: update orbiting circle code
dillionverma Dec 27, 2024
4b9a770
feat: updating the oribiting circles
itsarghyadas Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions content/docs/components/orbiting-circles.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))",
},
},
},
Expand All @@ -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 |
2 changes: 1 addition & 1 deletion public/r/styles/default/orbiting-circles.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": ""
}
Expand Down
42 changes: 10 additions & 32 deletions registry/default/example/orbiting-circles-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>
);
Expand Down Expand Up @@ -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>
Expand Down
55 changes: 34 additions & 21 deletions registry/default/magicui/orbiting-circles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 && (
Expand All @@ -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>
);
})}
</>
);
}
4 changes: 2 additions & 2 deletions registry/registry-ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))",
},
},
},
Expand Down
6 changes: 3 additions & 3 deletions tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ module.exports = {
"100%": {
transform: "scale(2)",
opacity: "0",
}
},
},
"shimmer-slide": {
to: {
Expand All @@ -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: {
Expand Down
Loading