21 lines
1.2 KiB
TypeScript
21 lines
1.2 KiB
TypeScript
import { cls } from "@/lib/utils";
|
|
|
|
type AuroraBackgroundProps = {
|
|
position: "fixed" | "absolute";
|
|
};
|
|
|
|
const AuroraBackground = ({ position }: AuroraBackgroundProps) => {
|
|
return (
|
|
<div className={cls(position, "inset-0 -z-10 w-full h-full overflow-hidden bg-background pointer-events-none", position === "absolute" && "mask-[linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]")}>
|
|
<div className="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-[120%] w-[9vw] h-[110vh] bg-background-accent/15 -rotate-[52.5deg] rounded-[100%]" />
|
|
<div className="absolute top-[-20vh] right-[2.5vw] w-[12.5vw] h-screen bg-background-accent/15 -rotate-60 rounded-[100%]" />
|
|
<div className="absolute top-[-20vh] left-[2vw] w-[15vw] h-[150vh] bg-background-accent/20 -rotate-45 rounded-[100%]" />
|
|
<div className="absolute top-[-30vh] left-0 w-[10vw] h-[70vh] bg-background-accent/15 -rotate-45 rounded-[100%]" />
|
|
<div className="absolute bottom-[-40vh] left-0 w-[120vw] h-[50vh] bg-background-accent/10 -rotate-20 rounded-[100%]" />
|
|
<div className="absolute inset-0 backdrop-blur-3xl"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AuroraBackground;
|