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 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/22 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/18 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/14 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.58),rgba(255,255,255,0.32)_32%,rgba(255,255,255,0.08)_68%,rgba(255,255,255,0.02)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.16),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.18),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.18),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(10,14,22,0.3),rgba(10,14,22,0.42)_34%,rgba(10,14,22,0.7)_100%),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.2),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.12),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-55 mix-blend-soft-light dark:opacity-22"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|