133 lines
3.8 KiB
TypeScript
133 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
|
|
type HeroMotionBackdropProps = {
|
|
compact?: boolean;
|
|
};
|
|
|
|
export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
|
|
const reducedMotion = useReducedMotion();
|
|
|
|
return (
|
|
<div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div className="hero-sheet-base" />
|
|
<motion.div
|
|
initial={false}
|
|
animate={
|
|
reducedMotion
|
|
? { x: 0, y: 0 }
|
|
: {
|
|
x: compact ? [0, 18, -10, 0] : [0, 52, -28, 0],
|
|
y: compact ? [0, -16, 10, 0] : [0, -38, 22, 0],
|
|
scale: compact ? [1, 1.03, 0.99, 1] : [1, 1.12, 0.95, 1],
|
|
}
|
|
}
|
|
transition={{
|
|
duration: compact ? 18 : 20,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="hero-blob hero-blob-left"
|
|
/>
|
|
<motion.div
|
|
initial={false}
|
|
animate={
|
|
reducedMotion
|
|
? { x: 0, y: 0 }
|
|
: {
|
|
x: compact ? [0, -14, 8, 0] : [0, -42, 22, 0],
|
|
y: compact ? [0, 10, -8, 0] : [0, 26, -18, 0],
|
|
scale: compact ? [1, 0.98, 1.04, 1] : [1, 0.92, 1.1, 1],
|
|
}
|
|
}
|
|
transition={{
|
|
duration: compact ? 20 : 22,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="hero-blob hero-blob-right"
|
|
/>
|
|
<motion.div
|
|
initial={false}
|
|
animate={
|
|
reducedMotion
|
|
? { x: 0, y: 0, opacity: compact ? 0.36 : 0.38 }
|
|
: {
|
|
x: compact ? [0, 12, -8, 0] : [0, 32, -16, 0],
|
|
y: compact ? [0, -6, 8, 0] : [0, -20, 18, 0],
|
|
scale: compact ? [1, 1.02, 0.98, 1] : [1, 1.1, 0.96, 1],
|
|
opacity: compact ? [0.36, 0.5, 0.4, 0.36] : [0.38, 0.6, 0.44, 0.38],
|
|
}
|
|
}
|
|
transition={{
|
|
duration: compact ? 16 : 18,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="hero-blob hero-blob-bottom"
|
|
/>
|
|
|
|
<motion.div
|
|
initial={false}
|
|
animate={
|
|
reducedMotion
|
|
? undefined
|
|
: {
|
|
opacity: compact ? [0.18, 0.26, 0.2, 0.18] : [0.22, 0.36, 0.24, 0.22],
|
|
scale: compact ? [1, 1.01, 1, 1] : [1, 1.04, 1, 1],
|
|
}
|
|
}
|
|
transition={{
|
|
duration: compact ? 16 : 18,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="hero-sheet-glow"
|
|
/>
|
|
|
|
<motion.div
|
|
initial={false}
|
|
animate={
|
|
reducedMotion
|
|
? { rotate: 0 }
|
|
: {
|
|
x: compact ? [0, 10, -8, 0] : [0, 18, -14, 0],
|
|
y: compact ? [0, -8, 6, 0] : [0, -18, 10, 0],
|
|
rotate: compact ? [0, 2, -1, 0] : [0, 4, -2, 0],
|
|
opacity: compact ? [0.12, 0.2, 0.14, 0.12] : [0.16, 0.28, 0.18, 0.16],
|
|
}
|
|
}
|
|
transition={{
|
|
duration: compact ? 20 : 22,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="hero-sheet-wave"
|
|
/>
|
|
|
|
<motion.div
|
|
initial={false}
|
|
animate={
|
|
reducedMotion
|
|
? undefined
|
|
: {
|
|
backgroundPosition: compact
|
|
? ["0 0, 0 0", "40px 24px, 0 0", "0 0, 0 0"]
|
|
: ["0 0, 0 0", "84px 52px, 0 0", "0 0, 0 0"],
|
|
}
|
|
}
|
|
transition={{
|
|
duration: compact ? 20 : 20,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "linear",
|
|
}}
|
|
className="hero-sheet-noise"
|
|
/>
|
|
|
|
<div className="hero-sheet-veil" />
|
|
<div className="hero-sheet-fade" />
|
|
</div>
|
|
);
|
|
}
|