From 8e7e3f6e4204fda5e73a7b043ec66f1a6b24bada Mon Sep 17 00:00:00 2001 From: Dillion Verma Date: Fri, 27 Dec 2024 13:10:11 -0500 Subject: [PATCH 1/2] fix: update orbiting circle code --- .../default/example/orbiting-circles-demo.tsx | 37 ++----------- registry/default/magicui/orbiting-circles.tsx | 53 +++++++++++-------- tailwind.config.cjs | 6 +-- 3 files changed, 39 insertions(+), 57 deletions(-) diff --git a/registry/default/example/orbiting-circles-demo.tsx b/registry/default/example/orbiting-circles-demo.tsx index 59baab44b..30b491c36 100644 --- 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 - {/* Inner Circles */} - + - - - - - {/* Outer Circles (reverse) */} - + - - - + ); diff --git a/registry/default/magicui/orbiting-circles.tsx b/registry/default/magicui/orbiting-circles.tsx index 234f6e0bd..8a4a6f9ca 100644 --- 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 { 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({ /> )} - -
- {children} -
+ {React.Children.map(children, (child, index) => { + const angle = (360 / React.Children.count(children)) * index; + return ( +
+ {child} +
+ ); + })} ); } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 86d8265f7..80ff43b1d 100644 --- 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: { From 4b9a770ea88484414dc49beb778a6bdd580461c5 Mon Sep 17 00:00:00 2001 From: Arghya Das Date: Thu, 2 Jan 2025 23:33:15 +0530 Subject: [PATCH 2/2] feat: updating the oribiting circles --- content/docs/components/orbiting-circles.mdx | 9 ++++++--- public/r/styles/default/orbiting-circles.json | 2 +- registry/default/example/orbiting-circles-demo.tsx | 9 ++++++++- registry/default/magicui/orbiting-circles.tsx | 14 ++++++++------ registry/registry-ui.ts | 4 ++-- 5 files changed, 25 insertions(+), 13 deletions(-) diff --git a/content/docs/components/orbiting-circles.mdx b/content/docs/components/orbiting-circles.mdx index 591afd43e..abcce29e0 100644 --- 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 index 4c3b24304..ba963c2f0 100644 --- 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 \n \n \n )}\n\n \n {children}\n \n \n );\n}\n", + "content": "import { cn } from \"@/lib/utils\";\nimport React from \"react\";\n\nexport interface OrbitingCirclesProps\n extends React.HTMLAttributes {\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 \n \n \n )}\n {React.Children.map(children, (child, index) => {\n const angle = (360 / React.Children.count(children)) * index;\n return (\n \n {child}\n \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 index 30b491c36..c8ef44ef5 100644 --- a/registry/default/example/orbiting-circles-demo.tsx +++ b/registry/default/example/orbiting-circles-demo.tsx @@ -7,13 +7,19 @@ export default function OrbitingCirclesDemo() { Circles - + + + + + + + ); } @@ -53,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" > diff --git a/registry/default/magicui/orbiting-circles.tsx b/registry/default/magicui/orbiting-circles.tsx index 8a4a6f9ca..3365c58b9 100644 --- a/registry/default/magicui/orbiting-circles.tsx +++ b/registry/default/magicui/orbiting-circles.tsx @@ -10,6 +10,8 @@ export interface OrbitingCirclesProps delay?: number; radius?: number; path?: boolean; + iconSize?: number; + speed?: number; } export function OrbitingCircles({ @@ -19,8 +21,11 @@ export function OrbitingCircles({ duration = 20, radius = 160, path = true, + iconSize = 30, + speed = 1, ...props }: OrbitingCirclesProps) { + const calculatedDuration = duration / speed; return ( <> {path && ( @@ -44,17 +49,14 @@ export function OrbitingCircles({