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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
.container {
position: absolute;
z-index: -6;
overflow: hidden;
inset: 0;
transition: perspective 3000ms ease 0s;
}
.lines {
--right: #f8cde8;
--left: #b9ddff;
position: absolute;
width: 200vw;
margin-left: -50%;
transform: translateY(0);
background-image: linear-gradient(
to right,
var(--left) 45%,
rgba(0, 0, 0, 0) 50%,
var(--right) 55%
);
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 2px,
rgba(0, 0, 0, 0) 1px
),
linear-gradient(to bottom, rgba(0, 0, 0, 1) 2px, rgba(0, 0, 0, 0) 1px);
mask-size: 60px 60px;
overflow: hidden;
mask-repeat: repeat repeat;
display: flex;
align-items: center;
justify-content: center;
inset: -100% 0px;
background-position-y: 100%;
mask-position: 50% 0px;
animation: go-up 60s linear infinite;
}
@media (min-width: 1024px) {
.lines {
animation-duration: 30s;
mask-size: 80px 80px;
}
}
:global(.dark) .lines {
--right: #4c2638;
--left: #223b67;
}
@keyframes go-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(50% + 28px));
}
}
.pulse::before {
content: "";
position: absolute;
inset: 0px;
animation: pulse-frames ease-out 8s infinite;
animation-delay: 0s;
background: rgba(0, 0, 0, 0)
linear-gradient(
to top,
rgba(0, 0, 0, 0) 45%,
var(--pulse-color) 50%,
rgba(0, 0, 0, 0) 90%
)
no-repeat;
z-index: 211;
animation-delay: var(--delay);
}
@keyframes pulse-frames {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(200%);
}
100% {
transform: translateY(200%);
}
}
@media (prefers-reduced-motion) {
.lines {
animation: none;
}
.pulse::before {
animation: none;
}
}
@media (prefers-reduced-motion) {
.lines {
animation: none;
}
.pulse::before {
animation: none;
}
}
|