57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { memo } from 'react';
|
|
import { cls } from '@/lib/utils';
|
|
import { Sparkles } from './Sparkles';
|
|
|
|
interface SparklesGradientBackgroundProps {
|
|
className?: string;
|
|
gradientColor?: string;
|
|
accentColor?: string;
|
|
blurAmount?: string;
|
|
}
|
|
|
|
const SparklesGradientBackground = ({
|
|
className = "",
|
|
gradientColor = "var(--color-background-accent)",
|
|
accentColor = "var(--color-background-accent)",
|
|
blurAmount = "6vw",
|
|
}: SparklesGradientBackgroundProps) => {
|
|
return (
|
|
<div
|
|
className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
|
|
style={{
|
|
mask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
|
|
WebkitMask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
className="absolute left-1/2 -translate-x-1/2 w-[65vw] h-[88vh] -top-[59vh] overflow-visible z-0"
|
|
>
|
|
<div
|
|
className="absolute inset-0 rounded-[100%] overflow-hidden"
|
|
style={{
|
|
background: `radial-gradient(50% 50% at 50% 50%, ${gradientColor}, color-mix(in srgb, ${gradientColor} 25%, transparent) 41%, color-mix(in srgb, ${gradientColor} 20%, transparent))`,
|
|
filter: `blur(${blurAmount})`,
|
|
WebkitFilter: `blur(${blurAmount})`,
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[33vw] h-[53vh] rounded-[100%] overflow-hidden"
|
|
style={{
|
|
background: `color-mix(in srgb, ${accentColor} 30%, transparent)`,
|
|
filter: `blur(${blurAmount})`,
|
|
WebkitFilter: `blur(${blurAmount})`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<Sparkles />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SparklesGradientBackground.displayName = 'SparklesGradientBackground';
|
|
|
|
export default memo(SparklesGradientBackground);
|