50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T2eed,'use client'; import React, { useState, useEffect, createContext, useContext } from 'react'; import { cn } from '@/lib/utils'; interface RadialSocialsContextType { animatedIcons: Set; rotationStarted: boolean; animationDelay: number; expandDuration: number; calculatePosition: ( radius: number, angle: number, ) => { x: number; y: number }; } interface RadialIconData { icon: React.ReactNode; className?: string; } interface RadialSocialsProps { children: React.ReactNode; className?: string; animationDelay?: number; expandDuration?: number; } interface RadialSocialsContentProps { children: React.ReactNode; className?: string; containerClassName?: string; } interface RadialCircularProps { children: React.ReactNode; radius: number; duration?: number; className?: string; circleLineClassName?: string; startAngle?: number; } interface RadialIconProps extends RadialIconData { className?: string; angle?: number; } interface InternalRadialCircularProps extends RadialCircularProps { circleIndex?: number; globalIconStartIndex?: number; } interface InternalRadialIconProps extends RadialIconProps { radius?: number; iconIndex?: number; circleIndex?: number; totalIcons?: number; globalIconIndex?: number; duration?: number; } interface RadialSocialsContentInternalProps extends RadialSocialsContentProps { setTotalIcons?: (count: number) => void; } const RadialSocialsContext = createContext( null, ); const useRadialSocials = () => { const context = useContext(RadialSocialsContext); if (!context) { throw new Error( 'RadialSocials components must be used within RadialSocials', ); } return context; }; const RadialIcon = React.forwardRef( ( { icon, className, radius = 80, iconIndex = 0, circleIndex = 0, totalIcons = 1, globalIconIndex = 0, duration = 20, angle, ...props }, ref, ) => { const { animatedIcons, expandDuration, calculatePosition, rotationStarted, } = useRadialSocials(); const iconAngle = angle !== undefined ? angle : (360 / totalIcons) * iconIndex; const position = calculatePosition(radius, iconAngle); const isAnimated = animatedIcons.has(globalIconIndex.toString()); return (

{icon}

); }, ); const RadialCircular = React.forwardRef< HTMLDivElement, InternalRadialCircularProps >( ( { children, radius, duration = 20, className, circleLineClassName, circleIndex = 0, globalIconStartIndex = 0, startAngle = 0, ...props }, ref, ) => { const { rotationStarted } = useRadialSocials(); const icons = React.Children.toArray(children).filter( (child): child is React.ReactElement => React.isValidElement(child) && child.type === RadialIcon, ); return (

{React.Children.map(children, (child, iconIndex) => { if ( React.isValidElement(child) && child.type === RadialIcon ) { return React.cloneElement(child, { radius, iconIndex, circleIndex, totalIcons: icons.length, globalIconIndex: globalIconStartIndex + iconIndex, duration, key: `${circleIndex}-${iconIndex}`, }); } return child; })}

); }, ); const RadialSocials = React.forwardRef( ( { children, className, animationDelay = 150, expandDuration = 800, ...props }, ref, ) => { const [animatedIcons, setAnimatedIcons] = useState>(new Set()); const [rotationStarted, setRotationStarted] = useState(false); const [totalIcons, setTotalIcons] = useState(0); const calculatePosition = (radius: number, angle: number) => { const radian = (angle * Math.PI) / 180; return { x: Math.cos(radian) * radius, y: Math.sin(radian) * radius, }; }; useEffect(() => { if (totalIcons === 0) return; // Schedule all state updates asynchronously to avoid cascading renders const timeouts: NodeJS.Timeout[] = []; // Reset icons asynchronously const resetTimeout = setTimeout(() => { setAnimatedIcons(new Set()); }, 0); timeouts.push(resetTimeout); // Animate icons one by one Array.from({ length: totalIcons }, (_, index) => index).forEach( (index) => { const timeout = setTimeout(() => { setAnimatedIcons((prev) => new Set([...prev, index.toString()])); }, index * animationDelay); timeouts.push(timeout); }, ); // Start rotation after all animations complete const totalAnimationTime = totalIcons * animationDelay + expandDuration; const rotationTimeout = setTimeout(() => { setRotationStarted(true); }, totalAnimationTime); timeouts.push(rotationTimeout); return () => { timeouts.forEach((timeout) => clearTimeout(timeout)); }; }, [totalIcons, animationDelay, expandDuration]); const contextValue: RadialSocialsContextType = { animatedIcons, rotationStarted, animationDelay, expandDuration, calculatePosition, }; return (

{React.Children.map(children, (child) => { if ( React.isValidElement(child) ) { return React.cloneElement(child, { setTotalIcons }); } return child; })}

); }, ); const RadialSocialsContent = React.forwardRef< HTMLDivElement, RadialSocialsContentInternalProps >( ( { children, className, containerClassName, setTotalIcons, ...props }, ref, ) => { const circles = React.Children.toArray(children).filter( (child): child is React.ReactElement => React.isValidElement(child) && child.type === RadialCircular, ); useEffect(() => { let totalIconCount = 0; circles.forEach((circle) => { const icons = React.Children.toArray(circle.props.children).filter( (child): child is React.ReactElement => React.isValidElement(child) && child.type === RadialIcon, ); totalIconCount += icons.length; }); if (setTotalIcons) { setTotalIcons(totalIconCount); } }, [children, setTotalIcons, circles]); useEffect(() => { const styleId = 'radial-socials-keyframes'; let styleElement = document.getElementById(styleId) as HTMLStyleElement; if (!styleElement) { styleElement = document.createElement('style'); styleElement.id = styleId; document.head.appendChild(styleElement); } const keyframes = circles .map( (_, index) => ` @keyframes rotate-${index} { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes counter-rotate-${index} { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } `, ) .join('\n'); styleElement.textContent = keyframes; return () => { if (styleElement && styleElement.parentNode) { styleElement.parentNode.removeChild(styleElement); } }; }, [circles, circles.length]); const circlesWithIconCount = circles.reduce< Array<{ circle: React.ReactElement; startIndex: number; iconCount: number; }> >((acc, circle) => { const icons = React.Children.toArray(circle.props.children).filter( (child): child is React.ReactElement => React.isValidElement(child) && child.type === RadialIcon, ); const startIndex = acc.length > 0 ? acc[acc.length - 1].startIndex + acc[acc.length - 1].iconCount : 0; acc.push({ circle: circle as React.ReactElement, startIndex, iconCount: icons.length, }); return acc; }, []); return (

{circlesWithIconCount.map(({ circle, startIndex }, circleIndex) => { return React.cloneElement(circle, { circleIndex, globalIconStartIndex: startIndex, key: circleIndex, }); })}

); }, ); RadialSocials.displayName = 'RadialSocials'; RadialSocialsContent.displayName = 'RadialSocialsContent'; RadialCircular.displayName = 'RadialCircular'; RadialIcon.displayName = 'RadialIcon'; export { RadialSocials, RadialSocialsContent, RadialCircular, RadialIcon, type RadialSocialsProps, type RadialSocialsContentProps, type RadialCircularProps, type RadialIconProps, type RadialIconData, }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/radial-socials.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/radial-socials","itemId":"@scrollxui/radial-socials"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/radial-socials.tsx","content":"$53","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L54"]}]

Radial Socials

Installation

Files

components

lib

Styles