mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-17 12:20:04 +00:00
68 lines
2 KiB
TypeScript
68 lines
2 KiB
TypeScript
import { motion } from "motion/react"
|
|
|
|
export function AnimatedGradientBackground({
|
|
topPosition = "40%",
|
|
animateFromBottom = true,
|
|
}: {
|
|
topPosition?: string
|
|
animateFromBottom?: boolean
|
|
}) {
|
|
return (
|
|
<div className="fixed inset-0 z-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-0 left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-0.png')] bg-size-[150%_auto] bg-top bg-no-repeat"
|
|
style={{ top: animateFromBottom ? undefined : topPosition }}
|
|
initial={{ y: "100%" }}
|
|
animate={{
|
|
y: 0,
|
|
opacity: animateFromBottom ? 0 : [1, 0, 1],
|
|
top: animateFromBottom ? "0%" : topPosition,
|
|
}}
|
|
transition={{
|
|
y: { duration: 0.75, ease: "easeOut" },
|
|
opacity: animateFromBottom
|
|
? { duration: 2, ease: "easeOut" }
|
|
: {
|
|
duration: 8,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
},
|
|
top: animateFromBottom
|
|
? { duration: 0.75, ease: "easeOut" }
|
|
: undefined,
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute top-0 left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-1.png')] bg-size-[150%_auto] bg-top bg-no-repeat"
|
|
style={{ top: animateFromBottom ? undefined : topPosition }}
|
|
initial={{ y: "100%" }}
|
|
animate={{
|
|
y: 0,
|
|
opacity: animateFromBottom ? 0 : [0, 1, 0],
|
|
top: animateFromBottom ? "0%" : topPosition,
|
|
}}
|
|
transition={{
|
|
y: { duration: 0.75, ease: "easeOut" },
|
|
opacity: animateFromBottom
|
|
? { duration: 2, ease: "easeOut" }
|
|
: {
|
|
duration: 8,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
ease: "easeInOut",
|
|
},
|
|
top: animateFromBottom
|
|
? { duration: 0.75, ease: "easeOut" }
|
|
: undefined,
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute top-0 left-0 right-0 bottom-0 bg-[url('/bg-rectangle.png')] bg-cover bg-center bg-no-repeat"
|
|
transition={{ duration: 0.75, ease: "easeOut", bounce: 0 }}
|
|
style={{
|
|
mixBlendMode: "soft-light",
|
|
opacity: 0.4,
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|