404lab 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cli/core/templates.js +1 -0
- package/package.json +3 -3
- package/templates/AmongUs.tsx +213 -119
- package/templates/BlueGlitch.tsx +190 -100
- package/templates/GeeksforGeeks.tsx +125 -37
- package/templates/Google.tsx +97 -29
- package/templates/MacOs.tsx +116 -212
- package/templates/ModernPage.tsx +73 -11
- package/templates/Particles.tsx +173 -67
- package/templates/Poet.tsx +139 -54
- package/templates/RetroTv.tsx +182 -130
- package/templates/SimplePage.tsx +60 -16
- package/templates/Snow.tsx +113 -179
- package/templates/StoneAge.tsx +91 -23
- package/templates/StrangerThings.tsx +79 -193
- package/templates/Terminal404.tsx +124 -242
- package/templates/Vercel.tsx +127 -0
|
@@ -1,245 +1,127 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import { cn } from "@/components/ui/cn";
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
// import Link from "next/link"; // UNCOMMENT THIS when using in your project
|
|
6
|
+
|
|
7
|
+
const StrangerThings = ({ className }: { className?: string }) => {
|
|
6
8
|
return (
|
|
7
9
|
<div
|
|
8
|
-
className=
|
|
9
|
-
|
|
10
|
+
className={cn(
|
|
11
|
+
"min-h-[500px] flex flex-col items-center justify-center p-6 overflow-hidden transition-colors duration-500 bg-background",
|
|
12
|
+
className
|
|
13
|
+
)}
|
|
14
|
+
style={{ perspective: "1200px" }}
|
|
10
15
|
>
|
|
11
16
|
<style jsx>{`
|
|
12
17
|
@keyframes slideDown {
|
|
13
|
-
0% {
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
100% {
|
|
17
|
-
transform: none;
|
|
18
|
-
}
|
|
18
|
+
0% { transform: translateY(-30%); opacity: 0; }
|
|
19
|
+
100% { transform: none; opacity: 1; }
|
|
19
20
|
}
|
|
20
21
|
@keyframes slideUp {
|
|
21
|
-
0% {
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
100% {
|
|
25
|
-
transform: none;
|
|
26
|
-
}
|
|
22
|
+
0% { transform: translateY(30%); opacity: 0; }
|
|
23
|
+
100% { transform: none; opacity: 1; }
|
|
27
24
|
}
|
|
28
25
|
@keyframes slideRight {
|
|
29
|
-
0% {
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
100% {
|
|
33
|
-
transform: none;
|
|
34
|
-
}
|
|
26
|
+
0% { transform: translateX(-60%); opacity: 0; }
|
|
27
|
+
100% { transform: none; opacity: 1; }
|
|
35
28
|
}
|
|
36
29
|
@keyframes slideLeft {
|
|
37
|
-
0% {
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
100% {
|
|
41
|
-
transform: none;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
@keyframes slideLeftSmall {
|
|
45
|
-
0% {
|
|
46
|
-
transform: translateX(10%);
|
|
47
|
-
}
|
|
48
|
-
100% {
|
|
49
|
-
transform: none;
|
|
50
|
-
}
|
|
30
|
+
0% { transform: translateX(60%); opacity: 0; }
|
|
31
|
+
100% { transform: none; opacity: 1; }
|
|
51
32
|
}
|
|
52
33
|
@keyframes fadeIn {
|
|
53
|
-
0% {
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
100% {
|
|
57
|
-
opacity: 1;
|
|
58
|
-
}
|
|
34
|
+
0% { opacity: 0; }
|
|
35
|
+
100% { opacity: 1; }
|
|
59
36
|
}
|
|
60
37
|
@keyframes slideUpFadeIn {
|
|
61
|
-
0% {
|
|
62
|
-
|
|
63
|
-
opacity: 0;
|
|
64
|
-
}
|
|
65
|
-
100% {
|
|
66
|
-
transform: none;
|
|
67
|
-
opacity: 1;
|
|
68
|
-
}
|
|
38
|
+
0% { transform: translateY(40px); opacity: 0; }
|
|
39
|
+
100% { transform: none; opacity: 1; }
|
|
69
40
|
}
|
|
70
41
|
@keyframes scaleXIn {
|
|
71
|
-
0% {
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
100% {
|
|
75
|
-
transform: none;
|
|
76
|
-
}
|
|
42
|
+
0% { transform: scaleX(0); }
|
|
43
|
+
100% { transform: none; }
|
|
77
44
|
}
|
|
78
45
|
@keyframes zoomFadeIn {
|
|
79
|
-
0% {
|
|
80
|
-
|
|
81
|
-
transform: translateZ(1000px);
|
|
82
|
-
}
|
|
83
|
-
100% {
|
|
84
|
-
opacity: 1;
|
|
85
|
-
transform: none;
|
|
86
|
-
}
|
|
46
|
+
0% { opacity: 0; transform: translateZ(800px) scale(1.2); }
|
|
47
|
+
100% { opacity: 1; transform: translateZ(0) scale(1); }
|
|
87
48
|
}
|
|
88
49
|
@keyframes jitter {
|
|
89
|
-
0% {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
10% {
|
|
94
|
-
transform: translate(2px, 2px);
|
|
95
|
-
opacity: 0.8;
|
|
96
|
-
}
|
|
97
|
-
20% {
|
|
98
|
-
transform: translate(0, 0);
|
|
99
|
-
opacity: 0.47;
|
|
100
|
-
}
|
|
101
|
-
30% {
|
|
102
|
-
transform: translate(0, 2px);
|
|
103
|
-
opacity: 0.3;
|
|
104
|
-
}
|
|
105
|
-
70% {
|
|
106
|
-
transform: translate(-1px, 1px);
|
|
107
|
-
opacity: 0.96;
|
|
108
|
-
}
|
|
109
|
-
80% {
|
|
110
|
-
transform: translate(0, -2px);
|
|
111
|
-
opacity: 0.9;
|
|
112
|
-
}
|
|
50
|
+
0%, 100% { transform: translate(0, 0); opacity: 1; }
|
|
51
|
+
25% { transform: translate(2px, -1px); opacity: 0.8; }
|
|
52
|
+
50% { transform: translate(-1px, 2px); opacity: 0.9; }
|
|
53
|
+
75% { transform: translate(1px, 1px); opacity: 0.7; }
|
|
113
54
|
}
|
|
114
55
|
|
|
115
56
|
.main-svg-container {
|
|
116
|
-
animation: zoomFadeIn
|
|
117
|
-
forwards;
|
|
57
|
+
animation: zoomFadeIn 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
118
58
|
transform-origin: center center;
|
|
119
|
-
|
|
120
|
-
.error-1-e {
|
|
121
|
-
animation: slideRight 3000ms
|
|
122
|
-
cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
|
|
123
|
-
}
|
|
124
|
-
.error-2-r {
|
|
125
|
-
animation: slideDown 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms
|
|
126
|
-
forwards;
|
|
127
|
-
}
|
|
128
|
-
.error-4-o {
|
|
129
|
-
animation: slideLeftSmall 3000ms
|
|
130
|
-
cubic-bezier(0.215, 0.61, 0.355, 1) -300ms forwards;
|
|
131
|
-
}
|
|
132
|
-
.error-5-r {
|
|
133
|
-
animation: slideLeft 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms
|
|
134
|
-
forwards;
|
|
135
|
-
}
|
|
136
|
-
.error-2-0 {
|
|
137
|
-
animation: slideUp 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms
|
|
138
|
-
forwards;
|
|
59
|
+
filter: drop-shadow(0 0 20px rgba(242, 13, 47, 0.2));
|
|
139
60
|
}
|
|
140
61
|
|
|
141
|
-
.error-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
animation: scaleXIn
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
.error-right {
|
|
152
|
-
transform-origin: 250px 3px;
|
|
153
|
-
animation: scaleXIn 4500ms cubic-bezier(0.19, 1, 0.22, 1) 1500ms
|
|
154
|
-
forwards;
|
|
62
|
+
.error-1-e { animation: slideRight 3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
63
|
+
.error-2-r { animation: slideDown 4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
64
|
+
.error-4-o { animation: slideLeft 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
65
|
+
.error-5-r { animation: slideLeft 3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
66
|
+
.error-2-0 { animation: slideUp 4.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
67
|
+
|
|
68
|
+
.error-top, .error-left, .error-right {
|
|
69
|
+
animation: scaleXIn 4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
|
|
70
|
+
transform: scaleX(0);
|
|
155
71
|
}
|
|
72
|
+
.error-top { transform-origin: center; }
|
|
73
|
+
.error-left { transform-origin: left; }
|
|
74
|
+
.error-right { transform-origin: right; }
|
|
156
75
|
|
|
157
76
|
.quote-wrapper {
|
|
158
77
|
display: flex;
|
|
159
78
|
flex-direction: column;
|
|
160
79
|
align-items: center;
|
|
161
|
-
gap:
|
|
80
|
+
gap: 12px;
|
|
162
81
|
color: #f20d2f;
|
|
163
82
|
text-transform: uppercase;
|
|
164
83
|
text-align: center;
|
|
165
|
-
letter-spacing: 0.
|
|
166
|
-
font-family: "Cinzel",
|
|
167
|
-
text-shadow:
|
|
168
|
-
0 0 8px rgba(242, 13, 47, 0.75),
|
|
169
|
-
0 0 18px rgba(242, 13, 47, 0.5);
|
|
84
|
+
letter-spacing: 0.4em;
|
|
85
|
+
font-family: "Cinzel", serif;
|
|
86
|
+
text-shadow: 0 0 12px rgba(242, 13, 47, 0.4);
|
|
170
87
|
opacity: 0;
|
|
171
|
-
animation: slideUpFadeIn
|
|
172
|
-
4750ms forwards;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.quote-top {
|
|
176
|
-
font-size: 0.95rem;
|
|
177
|
-
letter-spacing: 0.3em;
|
|
88
|
+
animation: slideUpFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
|
|
178
89
|
}
|
|
179
90
|
|
|
180
|
-
.quote-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
5550ms forwards;
|
|
91
|
+
.quote-top { font-size: 0.875rem; font-weight: 500; }
|
|
92
|
+
.quote-bottom {
|
|
93
|
+
font-size: 1.5rem;
|
|
94
|
+
font-weight: 700;
|
|
185
95
|
opacity: 0;
|
|
96
|
+
animation: slideUpFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
|
|
186
97
|
}
|
|
187
98
|
|
|
188
99
|
.cta {
|
|
189
|
-
margin-top:
|
|
190
|
-
padding:
|
|
191
|
-
border: 1px solid rgba(242, 13, 47, 0.
|
|
100
|
+
margin-top: 32px;
|
|
101
|
+
padding: 12px 32px;
|
|
102
|
+
border: 1px solid rgba(242, 13, 47, 0.3);
|
|
192
103
|
color: #f20d2f;
|
|
193
104
|
text-transform: uppercase;
|
|
194
|
-
letter-spacing: 0.
|
|
195
|
-
font-size: 0.
|
|
196
|
-
font-
|
|
197
|
-
background:
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
rgba(242, 13, 47, 0.12),
|
|
201
|
-
rgba(242, 13, 47, 0.05)
|
|
202
|
-
),
|
|
203
|
-
rgba(0, 0, 0, 0.35);
|
|
204
|
-
border-radius: 999px;
|
|
205
|
-
box-shadow:
|
|
206
|
-
0 0 10px rgba(242, 13, 47, 0.35),
|
|
207
|
-
inset 0 0 12px rgba(242, 13, 47, 0.15);
|
|
208
|
-
transition:
|
|
209
|
-
transform 180ms ease,
|
|
210
|
-
box-shadow 180ms ease,
|
|
211
|
-
border-color 180ms ease;
|
|
212
|
-
animation: slideUpFadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1)
|
|
213
|
-
6400ms forwards;
|
|
105
|
+
letter-spacing: 0.2em;
|
|
106
|
+
font-size: 0.875rem;
|
|
107
|
+
font-weight: 600;
|
|
108
|
+
background: transparent;
|
|
109
|
+
border-radius: 4px;
|
|
110
|
+
transition: all 0.3s ease;
|
|
214
111
|
opacity: 0;
|
|
112
|
+
animation: fadeIn 1s ease 4s forwards;
|
|
113
|
+
cursor: pointer;
|
|
215
114
|
}
|
|
216
115
|
|
|
217
|
-
.cta:hover
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
0 0 14px rgba(242, 13, 47, 0.45),
|
|
223
|
-
inset 0 0 16px rgba(242, 13, 47, 0.25);
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.cta:active {
|
|
227
|
-
transform: translateY(0) scale(0.99);
|
|
228
|
-
box-shadow:
|
|
229
|
-
0 0 8px rgba(242, 13, 47, 0.35),
|
|
230
|
-
inset 0 0 12px rgba(242, 13, 47, 0.2);
|
|
116
|
+
.cta:hover {
|
|
117
|
+
background: rgba(242, 13, 47, 0.05);
|
|
118
|
+
border-color: #f20d2f;
|
|
119
|
+
box-shadow: 0 0 20px rgba(242, 13, 47, 0.2);
|
|
120
|
+
transform: translateY(-2px);
|
|
231
121
|
}
|
|
232
122
|
|
|
233
|
-
.jitter-link:hover
|
|
234
|
-
|
|
235
|
-
animation: jitter 225ms ease-in-out 2 forwards;
|
|
236
|
-
}
|
|
237
|
-
.jitter-link:hover .top-fill {
|
|
238
|
-
fill: white;
|
|
239
|
-
transition: all 150ms ease-out;
|
|
240
|
-
}
|
|
241
|
-
.jitter-link:active .top-fill {
|
|
242
|
-
fill: #cc0000;
|
|
123
|
+
.jitter-link:hover {
|
|
124
|
+
animation: jitter 0.3s infinite;
|
|
243
125
|
}
|
|
244
126
|
`}</style>
|
|
245
127
|
|
|
@@ -249,7 +131,7 @@ const StrangerThings = () => {
|
|
|
249
131
|
style={{ transform: "translateZ(250px)" }}
|
|
250
132
|
>
|
|
251
133
|
<svg
|
|
252
|
-
|
|
134
|
+
className="w-[90%] sm:w-[500px] md:w-[636px] h-auto"
|
|
253
135
|
viewBox="-100 0 536 190"
|
|
254
136
|
xmlns="http://www.w3.org/2000/svg"
|
|
255
137
|
>
|
|
@@ -429,13 +311,17 @@ const StrangerThings = () => {
|
|
|
429
311
|
</div>
|
|
430
312
|
|
|
431
313
|
<div className="flex justify-center">
|
|
432
|
-
|
|
314
|
+
{/* UNCOMMENT THIS when using in your project */}
|
|
315
|
+
{/* <Link href="/" className="cta" aria-label="Go to right side up">
|
|
316
|
+
Go to right side up
|
|
317
|
+
</Link> */}
|
|
318
|
+
<button className="cta" aria-label="Go to right side up">
|
|
433
319
|
Go to right side up
|
|
434
|
-
</
|
|
320
|
+
</button>
|
|
435
321
|
</div>
|
|
436
322
|
</main>
|
|
437
323
|
</div>
|
|
438
324
|
);
|
|
439
325
|
};
|
|
440
326
|
|
|
441
|
-
export default StrangerThings;
|
|
327
|
+
export default StrangerThings;
|