71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
type HeroAtmosphereProps = {
|
|
compact?: boolean;
|
|
};
|
|
|
|
export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
|
|
<motion.div
|
|
animate={{
|
|
x: [0, 90, -48, 0],
|
|
y: [0, -70, 32, 0],
|
|
scale: [1, 1.12, 0.96, 1],
|
|
}}
|
|
transition={{
|
|
duration: 20,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="absolute left-[-10%] top-[4%] h-[24rem] w-[24rem] rounded-full bg-brand-primary/18 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
|
|
/>
|
|
|
|
<motion.div
|
|
animate={{
|
|
x: [0, -110, 40, 0],
|
|
y: [0, 48, -26, 0],
|
|
scale: [1, 0.92, 1.08, 1],
|
|
}}
|
|
transition={{
|
|
duration: 24,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="absolute right-[-14%] top-[2%] h-[22rem] w-[22rem] rounded-full bg-brand-secondary/14 blur-3xl sm:h-[30rem] sm:w-[30rem] lg:h-[38rem] lg:w-[38rem]"
|
|
/>
|
|
|
|
<motion.div
|
|
animate={{
|
|
x: [0, 42, -24, 0],
|
|
y: [0, -28, 30, 0],
|
|
opacity: [0.2, 0.34, 0.18, 0.2],
|
|
}}
|
|
transition={{
|
|
duration: 18,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="absolute bottom-[-18%] left-[18%] h-[18rem] w-[18rem] rounded-full bg-brand-primary/10 blur-3xl sm:h-[24rem] sm:w-[24rem] lg:h-[30rem] lg:w-[30rem]"
|
|
/>
|
|
|
|
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.18)_30%,rgba(255,255,255,0.04)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.1),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.1),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)_28%,rgba(255,255,255,0)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.12),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.08),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.08),transparent_38%)]" />
|
|
|
|
<motion.div
|
|
animate={{
|
|
x: [0, compact ? 18 : 26, compact ? -12 : -18, 0],
|
|
y: [0, compact ? -14 : -22, compact ? 10 : 16, 0],
|
|
}}
|
|
transition={{
|
|
duration: compact ? 8 : 10,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "linear",
|
|
}}
|
|
className="hero-noise absolute inset-[-8%] opacity-32 mix-blend-soft-light dark:opacity-12"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|