56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
interface AnimatedGradientBorderProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const gradientStyle: React.CSSProperties = {
|
|
background: `conic-gradient(
|
|
from 0deg,
|
|
rgba(99, 102, 241, 0.3),
|
|
rgba(139, 92, 246, 0.8),
|
|
rgba(236, 72, 153, 0.6),
|
|
rgba(34, 211, 238, 0.8),
|
|
rgba(99, 102, 241, 0.3)
|
|
)`,
|
|
filter: 'blur(40px)',
|
|
};
|
|
|
|
const glowStyle: React.CSSProperties = {
|
|
background: `conic-gradient(
|
|
from 0deg,
|
|
rgba(99, 102, 241, 0.1),
|
|
rgba(139, 92, 246, 0.4),
|
|
rgba(236, 72, 153, 0.3),
|
|
rgba(34, 211, 238, 0.4),
|
|
rgba(99, 102, 241, 0.1)
|
|
)`,
|
|
filter: 'blur(15px)',
|
|
};
|
|
|
|
export const AnimatedGradientBorder = ({
|
|
children,
|
|
className = '',
|
|
}: AnimatedGradientBorderProps) => {
|
|
return (
|
|
<div className={`relative p-10 rounded-xl isolate ${className}`}>
|
|
<div
|
|
className="absolute -inset-16 pointer-events-none"
|
|
style={{
|
|
maskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
|
|
}}
|
|
>
|
|
<div
|
|
className="absolute inset-[-52%] opacity-60 -z-10 animate-[gradient-rotate_4s_linear_infinite]"
|
|
style={glowStyle}
|
|
/>
|
|
<div
|
|
className="absolute inset-[-50%] z-0 animate-[gradient-rotate_4s_linear_infinite]"
|
|
style={gradientStyle}
|
|
/>
|
|
</div>
|
|
<div className="relative z-10 bg-[#0a0612] rounded-[10px]">{children}</div>
|
|
</div>
|
|
);
|
|
};
|