1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
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>
)
}
|