59 lines
5.0 KiB
TypeScript
59 lines
5.0 KiB
TypeScript
import { cls } from "@/lib/utils";
|
|
|
|
type LightRaysCenterBackgroundProps = {
|
|
position: "fixed" | "absolute";
|
|
};
|
|
|
|
const LightRaysCenterBackground = ({ position }: LightRaysCenterBackgroundProps) => {
|
|
return (
|
|
<div className={cls(position, "inset-0 -z-10 overflow-hidden pointer-events-none select-none")} aria-hidden="true">
|
|
<div className="absolute inset-0 bg-background mask-[radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)] bg-[linear-gradient(to_right,color-mix(in_srgb,var(--color-background-accent)_20%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--color-background-accent)_10%,transparent)_1px,transparent_1px)] bg-size-[10vw_10vw]" />
|
|
|
|
<div className="absolute -top-[400px] left-1/2 -translate-x-1/2 w-[1142px] h-[129vh] overflow-hidden blur-lg mask-[radial-gradient(50%_109%,#000_0%,#000000f6_0%,transparent_96%)]">
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 1, transform: "rotate(-20deg)", animation: "ray-pulse 4s ease-in-out 0s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.6, transform: "rotate(-12deg)", animation: "ray-pulse 3.5s ease-in-out 0.5s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-10px)] w-[20px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.45, transform: "scale(0.9) rotate(-5deg)", animation: "ray-pulse 5s ease-in-out 1.2s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-7.5px)] w-[15px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.625, transform: "rotate(-3deg)", animation: "ray-pulse 3s ease-in-out 0.3s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-20px)] w-[40px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.1, transform: "scale(0.79) rotate(0deg)", animation: "ray-pulse 4.5s ease-in-out 0.8s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-10px)] w-[20px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.525, transform: "rotate(3deg)", animation: "ray-pulse 3.2s ease-in-out 1.5s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-7.5px)] w-[15px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.725, transform: "scale(0.9) rotate(5deg)", animation: "ray-pulse 4.2s ease-in-out 0.2s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 0.6, transform: "rotate(12deg)", animation: "ray-pulse 3.8s ease-in-out 1s infinite both" } as React.CSSProperties}
|
|
/>
|
|
<div
|
|
className="absolute -top-[352px] -bottom-[920px] left-[calc(50%-17.5px)] w-[35px] origin-top overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
|
|
style={{ "--ray-opacity": 1, transform: "rotate(20deg)", animation: "ray-pulse 4s ease-in-out 0.7s infinite both" } as React.CSSProperties}
|
|
/>
|
|
|
|
<div className="absolute left-[calc(50%-599px)] -top-[352px] -bottom-[46px] w-[1198px] opacity-[0.025] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]" />
|
|
<div className="absolute left-[calc(50%-432.5px)] -top-[252px] w-[865px] h-[929px] opacity-10 overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]" />
|
|
<div className="absolute left-[calc(50%-432.5px)] -top-[252px] w-[865px] h-[929px] opacity-10 overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LightRaysCenterBackground;
|