āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/adityakishore0/scrollx-ui/components/social-orbit ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<Step>Install the following dependencies:</Step>
<Step>Copy and paste the following code into your project.</Step>
<p> <code>social-orbit.tsx</code> </p> <ComponentSource name="social-orbit" /><Step>Add util file</Step>
<p> <code>lib/utils.ts</code> </p>import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { SocialOrbit } from "@/components/ui/social-orbit";
<SocialOrbit
rippleCount={3}
text="SCROLLX*UI*COMPONENTS*"
rippleDuration={2}
textOrbitIndex={1}
textDuration={20}
orbitDuration={30}
iconDelay={200}
iconDuration={800}
>
<div className="flex items-center justify-center w-16 h-16 rounded-full">
<svg
data-testid="geist-icon"
height="32"
stroke-linejoin="round"
viewBox="0 0 16 16"
width="32"
>
<path
d="M8 0C8.26264 0 8.5144 0.104413 8.7002 0.290039L10.4639 2.05273H12.9551C13.0853 2.05258 13.2146 2.07819 13.335 2.12793C13.4554 2.17773 13.5651 2.25063 13.6572 2.34277C13.7494 2.43492 13.8223 2.54461 13.8721 2.66504C13.9218 2.7854 13.9474 2.91468 13.9473 3.04492V5.53711L15.71 7.2998C15.8956 7.4856 16 7.73736 16 8C16 8.26264 15.8956 8.5144 15.71 8.7002L13.9473 10.4639V12.9551C13.9474 13.0853 13.9218 13.2146 13.8721 13.335C13.8223 13.4554 13.7494 13.5651 13.6572 13.6572C13.5651 13.7494 13.4554 13.8223 13.335 13.8721C13.2146 13.9218 13.0853 13.9474 12.9551 13.9473H10.4639L8.7002 15.71C8.5144 15.8956 8.26264 16 8 16C7.73736 16 7.4856 15.8956 7.2998 15.71L5.53613 13.9473H3.04492C2.49748 13.9473 2.05273 13.5037 2.05273 12.9551V10.4639L0.290039 8.7002C0.104413 8.5144 0 8.26264 0 8C0 7.73736 0.104413 7.4856 0.290039 7.2998L2.05273 5.53613V3.04492C2.05258 2.91468 2.07819 2.7854 2.12793 2.66504C2.17773 2.54461 2.25063 2.43492 2.34277 2.34277C2.43492 2.25063 2.54461 2.17773 2.66504 2.12793C2.7854 2.07819 2.91468 2.05258 3.04492 2.05273H5.53711L7.2998 0.290039C7.4856 0.104413 7.73736 0 8 0ZM6.9375 8.5332L5.875 7.4707L4.81445 8.53125L6.40723 10.124C6.70012 10.4169 7.17488 10.4169 7.46777 10.124L11.1855 6.40625L10.125 5.3457L6.9375 8.5332Z"
fill="currentColor"
></path>
</svg>
</div>
</SocialOrbit>
<Step>Text</Step>
<ComponentPreview name="socialorbittext-demo" className="" description="" />orbits your socials in smooth motion where icons spin, ripple, and glow with purpose.
<PropsTable rows={[ { prop: "icons", type: "SocialIcon[]", default: "[]", description: "Array of icons to display in the orbit. Each icon can have optional orbitIndex and position.", }, { prop: "text", type: "string", default: '""', description: "Text to display around a central orbit. Letters are evenly spaced and rotate.", }, { prop: "textClassName", type: "string", default: '""', description: "Tailwind classes applied to each letter of the text.", }, { prop: "textOrbitIndex", type: "number", default: 2, description: "Index of the ripple box used as radius for the text orbit.", }, { prop: "children", type: "ReactNode", default: "-", description: "Optional content displayed at the center of the orbit.", }, { prop: "rippleCount", type: "number", default: 5, description: "Number of concentric ripple circles in the orbit.", }, { prop: "rippleDuration", type: "number", default: 2, description: "Duration (seconds) of ripple animation.", }, { prop: "textDuration", type: "number", default: 20, description: "Duration (seconds) for the text to rotate one full circle.", }, { prop: "iconDelay", type: "number", default: 150, description: "Delay (ms) between consecutive icon entrance animations.", }, { prop: "iconDuration", type: "number", default: 800, description: "Duration (ms) for each icon's entrance animation.", }, { prop: "orbitDuration", type: "number", default: 30, description: "Duration (seconds) for icons in an orbit to complete a full rotation.", }, { prop: "size", type: "number", default: 500, description: "Width and height of the entire orbit container in pixels.", }, { prop: "className", type: "string", default: '""', description: "Additional Tailwind classes applied to the orbit container.", }, ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā