@hustle-together/api-dev-tools 1.9.0 → 2.0.0
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/README.md +15 -0
- package/demo/hustle-together/blog/gemini-vs-claude-widgets.html +957 -0
- package/demo/hustle-together/blog/interview-driven-api-development.html +1132 -0
- package/demo/hustle-together/blog/tdd-for-ai.html +982 -0
- package/demo/hustle-together/index.html +1279 -0
- package/demo/workflow-demo.html +740 -45
- package/package.json +1 -1
package/demo/workflow-demo.html
CHANGED
|
@@ -25,6 +25,8 @@
|
|
|
25
25
|
--dark-grey: #444;
|
|
26
26
|
--black: #0a0a0a;
|
|
27
27
|
--glow: rgba(255, 255, 255, 0.3);
|
|
28
|
+
--accent-red: #BA0C2F;
|
|
29
|
+
--accent-red-glow: rgba(186, 12, 47, 0.4);
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
body {
|
|
@@ -35,6 +37,439 @@
|
|
|
35
37
|
overflow-x: hidden;
|
|
36
38
|
}
|
|
37
39
|
|
|
40
|
+
/* ============================================
|
|
41
|
+
ANIMATED BACKGROUND
|
|
42
|
+
============================================ */
|
|
43
|
+
.background-pattern {
|
|
44
|
+
position: fixed;
|
|
45
|
+
top: 0;
|
|
46
|
+
left: 0;
|
|
47
|
+
width: 100%;
|
|
48
|
+
height: 100%;
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
z-index: -1;
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.grid-svg {
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 100%;
|
|
57
|
+
opacity: 0.15;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.grid-line {
|
|
61
|
+
stroke: var(--grey);
|
|
62
|
+
stroke-width: 0.5;
|
|
63
|
+
fill: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Floating particles */
|
|
67
|
+
.particles {
|
|
68
|
+
position: fixed;
|
|
69
|
+
top: 0;
|
|
70
|
+
left: 0;
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100%;
|
|
73
|
+
pointer-events: none;
|
|
74
|
+
z-index: -1;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.particle {
|
|
78
|
+
position: absolute;
|
|
79
|
+
width: 4px;
|
|
80
|
+
height: 4px;
|
|
81
|
+
background: var(--grey);
|
|
82
|
+
opacity: 0.3;
|
|
83
|
+
border-radius: 50%;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.particle.square {
|
|
87
|
+
border-radius: 0;
|
|
88
|
+
border: 1px solid var(--grey);
|
|
89
|
+
background: transparent;
|
|
90
|
+
width: 8px;
|
|
91
|
+
height: 8px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.particle.plus {
|
|
95
|
+
border-radius: 0;
|
|
96
|
+
background: transparent;
|
|
97
|
+
width: 12px;
|
|
98
|
+
height: 12px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.particle.plus::before,
|
|
102
|
+
.particle.plus::after {
|
|
103
|
+
content: '';
|
|
104
|
+
position: absolute;
|
|
105
|
+
background: var(--grey);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.particle.plus::before {
|
|
109
|
+
width: 12px;
|
|
110
|
+
height: 1px;
|
|
111
|
+
top: 5.5px;
|
|
112
|
+
left: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.particle.plus::after {
|
|
116
|
+
width: 1px;
|
|
117
|
+
height: 12px;
|
|
118
|
+
left: 5.5px;
|
|
119
|
+
top: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* X shape particle */
|
|
123
|
+
.particle.x-shape {
|
|
124
|
+
border-radius: 0;
|
|
125
|
+
background: transparent;
|
|
126
|
+
width: 14px;
|
|
127
|
+
height: 14px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.particle.x-shape::before,
|
|
131
|
+
.particle.x-shape::after {
|
|
132
|
+
content: '';
|
|
133
|
+
position: absolute;
|
|
134
|
+
background: var(--grey);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.particle.x-shape::before {
|
|
138
|
+
width: 14px;
|
|
139
|
+
height: 1px;
|
|
140
|
+
top: 6.5px;
|
|
141
|
+
left: 0;
|
|
142
|
+
transform: rotate(45deg);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.particle.x-shape::after {
|
|
146
|
+
width: 14px;
|
|
147
|
+
height: 1px;
|
|
148
|
+
top: 6.5px;
|
|
149
|
+
left: 0;
|
|
150
|
+
transform: rotate(-45deg);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Line/dash particle */
|
|
154
|
+
.particle.line {
|
|
155
|
+
border-radius: 0;
|
|
156
|
+
width: 20px;
|
|
157
|
+
height: 1px;
|
|
158
|
+
background: var(--grey);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.particle.line-v {
|
|
162
|
+
border-radius: 0;
|
|
163
|
+
width: 1px;
|
|
164
|
+
height: 20px;
|
|
165
|
+
background: var(--grey);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Circle outline particle */
|
|
169
|
+
.particle.circle-outline {
|
|
170
|
+
width: 16px;
|
|
171
|
+
height: 16px;
|
|
172
|
+
border-radius: 50%;
|
|
173
|
+
background: transparent;
|
|
174
|
+
border: 1px solid var(--grey);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* Triangle particle */
|
|
178
|
+
.particle.triangle {
|
|
179
|
+
width: 0;
|
|
180
|
+
height: 0;
|
|
181
|
+
background: transparent;
|
|
182
|
+
border-left: 6px solid transparent;
|
|
183
|
+
border-right: 6px solid transparent;
|
|
184
|
+
border-bottom: 10px solid var(--grey);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Cursor glow effect */
|
|
188
|
+
.cursor-glow {
|
|
189
|
+
position: fixed;
|
|
190
|
+
width: 300px;
|
|
191
|
+
height: 300px;
|
|
192
|
+
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
|
|
193
|
+
pointer-events: none;
|
|
194
|
+
z-index: 0;
|
|
195
|
+
transform: translate(-50%, -50%);
|
|
196
|
+
transition: opacity 0.3s;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Scanlines overlay */
|
|
200
|
+
.scanlines {
|
|
201
|
+
position: fixed;
|
|
202
|
+
top: 0;
|
|
203
|
+
left: 0;
|
|
204
|
+
width: 100%;
|
|
205
|
+
height: 100%;
|
|
206
|
+
pointer-events: none;
|
|
207
|
+
z-index: 9999;
|
|
208
|
+
background: repeating-linear-gradient(
|
|
209
|
+
0deg,
|
|
210
|
+
transparent,
|
|
211
|
+
transparent 2px,
|
|
212
|
+
rgba(0, 0, 0, 0.1) 2px,
|
|
213
|
+
rgba(0, 0, 0, 0.1) 4px
|
|
214
|
+
);
|
|
215
|
+
opacity: 0.3;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* Animated corner decorations */
|
|
219
|
+
.corner-decoration {
|
|
220
|
+
position: fixed;
|
|
221
|
+
width: 60px;
|
|
222
|
+
height: 60px;
|
|
223
|
+
border: 1px dashed var(--dark-grey);
|
|
224
|
+
opacity: 0.4;
|
|
225
|
+
z-index: 1;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.corner-decoration.top-left {
|
|
229
|
+
top: 20px;
|
|
230
|
+
left: 20px;
|
|
231
|
+
border-right: none;
|
|
232
|
+
border-bottom: none;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.corner-decoration.top-right {
|
|
236
|
+
top: 20px;
|
|
237
|
+
right: 80px;
|
|
238
|
+
border-left: none;
|
|
239
|
+
border-bottom: none;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.corner-decoration.bottom-left {
|
|
243
|
+
bottom: 20px;
|
|
244
|
+
left: 20px;
|
|
245
|
+
border-right: none;
|
|
246
|
+
border-top: none;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.corner-decoration.bottom-right {
|
|
250
|
+
bottom: 20px;
|
|
251
|
+
right: 20px;
|
|
252
|
+
border-left: none;
|
|
253
|
+
border-top: none;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Visual flow lines between sections */
|
|
257
|
+
.flow-connector-line {
|
|
258
|
+
position: absolute;
|
|
259
|
+
width: 2px;
|
|
260
|
+
background: linear-gradient(to bottom, transparent, var(--dark-grey), transparent);
|
|
261
|
+
left: 50%;
|
|
262
|
+
bottom: -60px;
|
|
263
|
+
height: 60px;
|
|
264
|
+
opacity: 0.3;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* Status badge animations */
|
|
268
|
+
.status-badge {
|
|
269
|
+
display: inline-flex;
|
|
270
|
+
align-items: center;
|
|
271
|
+
gap: 8px;
|
|
272
|
+
padding: 6px 14px;
|
|
273
|
+
border: 1px dashed var(--grey);
|
|
274
|
+
font-size: 0.75rem;
|
|
275
|
+
text-transform: uppercase;
|
|
276
|
+
letter-spacing: 2px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.status-badge .pulse {
|
|
280
|
+
width: 8px;
|
|
281
|
+
height: 8px;
|
|
282
|
+
border-radius: 50%;
|
|
283
|
+
background: var(--grey);
|
|
284
|
+
animation: pulse 2s infinite;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.status-badge.active .pulse {
|
|
288
|
+
background: var(--accent-red);
|
|
289
|
+
box-shadow: 0 0 10px var(--accent-red);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
@keyframes pulse {
|
|
293
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
294
|
+
50% { transform: scale(1.2); opacity: 0.5; }
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* Visual data flow diagram */
|
|
298
|
+
.data-flow {
|
|
299
|
+
display: flex;
|
|
300
|
+
align-items: center;
|
|
301
|
+
justify-content: center;
|
|
302
|
+
gap: 20px;
|
|
303
|
+
margin: 30px 0;
|
|
304
|
+
flex-wrap: wrap;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.data-node {
|
|
308
|
+
border: 1px dashed var(--grey);
|
|
309
|
+
padding: 15px 25px;
|
|
310
|
+
text-align: center;
|
|
311
|
+
position: relative;
|
|
312
|
+
min-width: 120px;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.data-node-icon {
|
|
316
|
+
font-size: 1.5rem;
|
|
317
|
+
margin-bottom: 8px;
|
|
318
|
+
display: block;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.data-node-label {
|
|
322
|
+
font-size: 0.75rem;
|
|
323
|
+
text-transform: uppercase;
|
|
324
|
+
letter-spacing: 1px;
|
|
325
|
+
color: var(--grey);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.data-arrow {
|
|
329
|
+
color: var(--grey);
|
|
330
|
+
font-size: 1.5rem;
|
|
331
|
+
animation: arrowPulse 1.5s infinite;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@keyframes arrowPulse {
|
|
335
|
+
0%, 100% { opacity: 0.3; transform: translateX(0); }
|
|
336
|
+
50% { opacity: 1; transform: translateX(5px); }
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* Visual checkmarks for completed items */
|
|
340
|
+
.visual-check {
|
|
341
|
+
display: inline-flex;
|
|
342
|
+
align-items: center;
|
|
343
|
+
justify-content: center;
|
|
344
|
+
width: 24px;
|
|
345
|
+
height: 24px;
|
|
346
|
+
border: 2px solid var(--grey);
|
|
347
|
+
margin-right: 12px;
|
|
348
|
+
font-size: 0.8rem;
|
|
349
|
+
transition: all 0.3s;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.visual-check.checked {
|
|
353
|
+
border-color: var(--accent-red);
|
|
354
|
+
background: rgba(186, 12, 47, 0.2);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.visual-check.checked::after {
|
|
358
|
+
content: '✓';
|
|
359
|
+
color: var(--accent-red);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
/* Animated underline effect */
|
|
363
|
+
.highlight-underline {
|
|
364
|
+
position: relative;
|
|
365
|
+
display: inline-block;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.highlight-underline::after {
|
|
369
|
+
content: '';
|
|
370
|
+
position: absolute;
|
|
371
|
+
bottom: -4px;
|
|
372
|
+
left: 0;
|
|
373
|
+
width: 0;
|
|
374
|
+
height: 2px;
|
|
375
|
+
background: var(--accent-red);
|
|
376
|
+
transition: width 0.3s ease;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.highlight-underline:hover::after {
|
|
380
|
+
width: 100%;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
/* Visual timeline indicator */
|
|
384
|
+
.timeline-indicator {
|
|
385
|
+
position: absolute;
|
|
386
|
+
left: -40px;
|
|
387
|
+
top: 0;
|
|
388
|
+
bottom: 0;
|
|
389
|
+
width: 2px;
|
|
390
|
+
background: var(--dark-grey);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.timeline-indicator::before {
|
|
394
|
+
content: '';
|
|
395
|
+
position: absolute;
|
|
396
|
+
top: 50%;
|
|
397
|
+
left: -4px;
|
|
398
|
+
width: 10px;
|
|
399
|
+
height: 10px;
|
|
400
|
+
border: 2px solid var(--grey);
|
|
401
|
+
border-radius: 50%;
|
|
402
|
+
background: var(--black);
|
|
403
|
+
transform: translateY(-50%);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.timeline-indicator.active::before {
|
|
407
|
+
border-color: var(--accent-red);
|
|
408
|
+
box-shadow: 0 0 10px var(--accent-red-glow);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* Animated typing indicator */
|
|
412
|
+
.typing-indicator {
|
|
413
|
+
display: inline-flex;
|
|
414
|
+
gap: 4px;
|
|
415
|
+
padding: 10px 15px;
|
|
416
|
+
background: rgba(255,255,255,0.03);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.typing-indicator span {
|
|
420
|
+
width: 6px;
|
|
421
|
+
height: 6px;
|
|
422
|
+
background: var(--grey);
|
|
423
|
+
border-radius: 50%;
|
|
424
|
+
animation: typing 1.4s infinite both;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
|
428
|
+
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
|
429
|
+
|
|
430
|
+
@keyframes typing {
|
|
431
|
+
0%, 100% { transform: translateY(0); opacity: 0.3; }
|
|
432
|
+
50% { transform: translateY(-8px); opacity: 1; }
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/* Phase connection arrows */
|
|
436
|
+
.phase-arrow {
|
|
437
|
+
display: none;
|
|
438
|
+
position: absolute;
|
|
439
|
+
right: -22px;
|
|
440
|
+
top: 50%;
|
|
441
|
+
transform: translateY(-50%);
|
|
442
|
+
color: var(--dark-grey);
|
|
443
|
+
font-size: 1rem;
|
|
444
|
+
z-index: 2;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.phase-box:not(:nth-child(5n)) .phase-arrow {
|
|
448
|
+
display: block;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
/* Glowing border effect for active elements */
|
|
452
|
+
.glow-border {
|
|
453
|
+
position: relative;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.glow-border::before {
|
|
457
|
+
content: '';
|
|
458
|
+
position: absolute;
|
|
459
|
+
top: -2px;
|
|
460
|
+
left: -2px;
|
|
461
|
+
right: -2px;
|
|
462
|
+
bottom: -2px;
|
|
463
|
+
background: linear-gradient(45deg, transparent, var(--white), transparent);
|
|
464
|
+
opacity: 0;
|
|
465
|
+
transition: opacity 0.3s;
|
|
466
|
+
z-index: -1;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.glow-border:hover::before {
|
|
470
|
+
opacity: 0.1;
|
|
471
|
+
}
|
|
472
|
+
|
|
38
473
|
/* Navigation */
|
|
39
474
|
.nav {
|
|
40
475
|
position: fixed;
|
|
@@ -56,9 +491,10 @@
|
|
|
56
491
|
}
|
|
57
492
|
|
|
58
493
|
.nav-btn:hover {
|
|
59
|
-
background: var(--
|
|
60
|
-
color:
|
|
61
|
-
|
|
494
|
+
background: var(--accent-red);
|
|
495
|
+
color: #fff;
|
|
496
|
+
border-color: var(--accent-red);
|
|
497
|
+
box-shadow: 0 0 15px var(--accent-red-glow);
|
|
62
498
|
}
|
|
63
499
|
|
|
64
500
|
/* Progress indicator */
|
|
@@ -67,7 +503,7 @@
|
|
|
67
503
|
top: 0;
|
|
68
504
|
left: 0;
|
|
69
505
|
height: 3px;
|
|
70
|
-
background: var(--
|
|
506
|
+
background: var(--accent-red);
|
|
71
507
|
width: 0%;
|
|
72
508
|
z-index: 1001;
|
|
73
509
|
}
|
|
@@ -90,6 +526,10 @@
|
|
|
90
526
|
position: relative;
|
|
91
527
|
max-width: 1000px;
|
|
92
528
|
width: 100%;
|
|
529
|
+
/* Blurred glass backdrop so boxes don't interfere with background animation */
|
|
530
|
+
background: rgba(10, 10, 10, 0.85);
|
|
531
|
+
backdrop-filter: blur(12px);
|
|
532
|
+
-webkit-backdrop-filter: blur(12px);
|
|
93
533
|
}
|
|
94
534
|
|
|
95
535
|
.ascii-border::before {
|
|
@@ -312,8 +752,8 @@
|
|
|
312
752
|
}
|
|
313
753
|
|
|
314
754
|
.gap-item:hover {
|
|
315
|
-
border-color: var(--
|
|
316
|
-
box-shadow: 0 0 25px
|
|
755
|
+
border-color: var(--accent-red);
|
|
756
|
+
box-shadow: 0 0 25px var(--accent-red-glow);
|
|
317
757
|
}
|
|
318
758
|
|
|
319
759
|
.gap-item::before {
|
|
@@ -322,7 +762,7 @@
|
|
|
322
762
|
left: -35px;
|
|
323
763
|
top: 50%;
|
|
324
764
|
transform: translateY(-50%);
|
|
325
|
-
color: var(--
|
|
765
|
+
color: var(--accent-red);
|
|
326
766
|
font-size: 1.2rem;
|
|
327
767
|
}
|
|
328
768
|
|
|
@@ -381,8 +821,8 @@
|
|
|
381
821
|
}
|
|
382
822
|
|
|
383
823
|
.solution-card:hover {
|
|
384
|
-
border-color: var(--
|
|
385
|
-
box-shadow: 0 0 25px
|
|
824
|
+
border-color: var(--accent-red);
|
|
825
|
+
box-shadow: 0 0 25px var(--accent-red-glow);
|
|
386
826
|
}
|
|
387
827
|
|
|
388
828
|
.solution-icon {
|
|
@@ -422,8 +862,9 @@
|
|
|
422
862
|
}
|
|
423
863
|
|
|
424
864
|
.flow-box:hover {
|
|
425
|
-
background: rgba(
|
|
426
|
-
box-shadow: 0 0 20px var(--glow);
|
|
865
|
+
background: rgba(186, 12, 47, 0.1);
|
|
866
|
+
box-shadow: 0 0 20px var(--accent-red-glow);
|
|
867
|
+
border-color: var(--accent-red);
|
|
427
868
|
}
|
|
428
869
|
|
|
429
870
|
.flow-arrow {
|
|
@@ -461,8 +902,8 @@
|
|
|
461
902
|
}
|
|
462
903
|
|
|
463
904
|
.hook-file:hover {
|
|
464
|
-
border-left-color: var(--
|
|
465
|
-
background: rgba(
|
|
905
|
+
border-left-color: var(--accent-red);
|
|
906
|
+
background: rgba(186, 12, 47, 0.1);
|
|
466
907
|
padding-left: 25px;
|
|
467
908
|
}
|
|
468
909
|
|
|
@@ -494,7 +935,8 @@
|
|
|
494
935
|
}
|
|
495
936
|
|
|
496
937
|
.result-blocked {
|
|
497
|
-
border-color: var(--
|
|
938
|
+
border-color: var(--accent-red);
|
|
939
|
+
color: var(--accent-red);
|
|
498
940
|
}
|
|
499
941
|
|
|
500
942
|
.result-allowed:hover, .result-blocked:hover {
|
|
@@ -523,14 +965,14 @@
|
|
|
523
965
|
}
|
|
524
966
|
|
|
525
967
|
.phase-box:hover {
|
|
526
|
-
border-color: var(--
|
|
527
|
-
box-shadow: 0 0 25px
|
|
968
|
+
border-color: var(--accent-red);
|
|
969
|
+
box-shadow: 0 0 25px var(--accent-red-glow);
|
|
528
970
|
transform: scale(1.02);
|
|
529
971
|
}
|
|
530
972
|
|
|
531
973
|
.phase-box.active {
|
|
532
|
-
border-color: var(--
|
|
533
|
-
background: rgba(
|
|
974
|
+
border-color: var(--accent-red);
|
|
975
|
+
background: rgba(186, 12, 47, 0.1);
|
|
534
976
|
}
|
|
535
977
|
|
|
536
978
|
.phase-number {
|
|
@@ -585,7 +1027,8 @@
|
|
|
585
1027
|
}
|
|
586
1028
|
|
|
587
1029
|
.walkthrough-step.active {
|
|
588
|
-
border-color: var(--
|
|
1030
|
+
border-color: var(--accent-red);
|
|
1031
|
+
box-shadow: 0 0 20px var(--accent-red-glow);
|
|
589
1032
|
}
|
|
590
1033
|
|
|
591
1034
|
.walkthrough-header {
|
|
@@ -692,10 +1135,10 @@
|
|
|
692
1135
|
}
|
|
693
1136
|
|
|
694
1137
|
.terminal-blocked {
|
|
695
|
-
color: var(--
|
|
696
|
-
border-left: 3px solid var(--
|
|
1138
|
+
color: var(--accent-red);
|
|
1139
|
+
border-left: 3px solid var(--accent-red);
|
|
697
1140
|
padding-left: 15px;
|
|
698
|
-
background: rgba(
|
|
1141
|
+
background: rgba(186, 12, 47, 0.1);
|
|
699
1142
|
}
|
|
700
1143
|
|
|
701
1144
|
.terminal-allowed {
|
|
@@ -746,10 +1189,11 @@
|
|
|
746
1189
|
}
|
|
747
1190
|
|
|
748
1191
|
.json-line.highlight {
|
|
749
|
-
background: rgba(
|
|
1192
|
+
background: rgba(186, 12, 47, 0.15);
|
|
750
1193
|
margin: 0 -25px;
|
|
751
1194
|
padding-left: 25px;
|
|
752
1195
|
padding-right: 25px;
|
|
1196
|
+
border-left: 2px solid var(--accent-red);
|
|
753
1197
|
}
|
|
754
1198
|
|
|
755
1199
|
.json-comment {
|
|
@@ -854,9 +1298,10 @@
|
|
|
854
1298
|
}
|
|
855
1299
|
|
|
856
1300
|
.credit-link:hover {
|
|
857
|
-
background: var(--
|
|
858
|
-
color:
|
|
859
|
-
|
|
1301
|
+
background: var(--accent-red);
|
|
1302
|
+
color: #fff;
|
|
1303
|
+
border-color: var(--accent-red);
|
|
1304
|
+
box-shadow: 0 0 25px var(--accent-red-glow);
|
|
860
1305
|
}
|
|
861
1306
|
|
|
862
1307
|
.made-with {
|
|
@@ -892,8 +1337,9 @@
|
|
|
892
1337
|
|
|
893
1338
|
.section-dot:hover,
|
|
894
1339
|
.section-dot.active {
|
|
895
|
-
background: var(--
|
|
896
|
-
|
|
1340
|
+
background: var(--accent-red);
|
|
1341
|
+
border-color: var(--accent-red);
|
|
1342
|
+
box-shadow: 0 0 12px var(--accent-red-glow);
|
|
897
1343
|
}
|
|
898
1344
|
|
|
899
1345
|
/* ============================================
|
|
@@ -938,6 +1384,37 @@
|
|
|
938
1384
|
</head>
|
|
939
1385
|
<body>
|
|
940
1386
|
|
|
1387
|
+
<!-- Animated Background Grid -->
|
|
1388
|
+
<div class="background-pattern">
|
|
1389
|
+
<svg class="grid-svg" id="gridSvg">
|
|
1390
|
+
<defs>
|
|
1391
|
+
<pattern id="smallGrid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
1392
|
+
<path d="M 40 0 L 0 0 0 40" class="grid-line" stroke-dasharray="2,4"/>
|
|
1393
|
+
</pattern>
|
|
1394
|
+
<pattern id="grid" width="200" height="200" patternUnits="userSpaceOnUse">
|
|
1395
|
+
<rect width="200" height="200" fill="url(#smallGrid)"/>
|
|
1396
|
+
<path d="M 200 0 L 0 0 0 200" class="grid-line" stroke-width="1"/>
|
|
1397
|
+
</pattern>
|
|
1398
|
+
</defs>
|
|
1399
|
+
<rect id="gridRect" width="100%" height="100%" fill="url(#grid)"/>
|
|
1400
|
+
</svg>
|
|
1401
|
+
</div>
|
|
1402
|
+
|
|
1403
|
+
<!-- Floating Particles -->
|
|
1404
|
+
<div class="particles" id="particles"></div>
|
|
1405
|
+
|
|
1406
|
+
<!-- Cursor Glow Effect -->
|
|
1407
|
+
<div class="cursor-glow" id="cursorGlow"></div>
|
|
1408
|
+
|
|
1409
|
+
<!-- Scanlines Overlay -->
|
|
1410
|
+
<div class="scanlines"></div>
|
|
1411
|
+
|
|
1412
|
+
<!-- Corner Decorations -->
|
|
1413
|
+
<div class="corner-decoration top-left"></div>
|
|
1414
|
+
<div class="corner-decoration top-right"></div>
|
|
1415
|
+
<div class="corner-decoration bottom-left"></div>
|
|
1416
|
+
<div class="corner-decoration bottom-right"></div>
|
|
1417
|
+
|
|
941
1418
|
<!-- Progress Bar -->
|
|
942
1419
|
<div class="progress-bar" id="progressBar"></div>
|
|
943
1420
|
|
|
@@ -972,6 +1449,34 @@
|
|
|
972
1449
|
</p>
|
|
973
1450
|
</div>
|
|
974
1451
|
|
|
1452
|
+
<!-- Visual Quick Overview -->
|
|
1453
|
+
<div class="data-flow" style="margin-top: 40px; opacity: 0;" id="introFlow">
|
|
1454
|
+
<div class="data-node glow-border">
|
|
1455
|
+
<span class="data-node-icon">[R]</span>
|
|
1456
|
+
<span class="data-node-label">Research</span>
|
|
1457
|
+
</div>
|
|
1458
|
+
<span class="data-arrow">→</span>
|
|
1459
|
+
<div class="data-node glow-border">
|
|
1460
|
+
<span class="data-node-icon">[?]</span>
|
|
1461
|
+
<span class="data-node-label">Interview</span>
|
|
1462
|
+
</div>
|
|
1463
|
+
<span class="data-arrow">→</span>
|
|
1464
|
+
<div class="data-node glow-border">
|
|
1465
|
+
<span class="data-node-icon">[T]</span>
|
|
1466
|
+
<span class="data-node-label">Test</span>
|
|
1467
|
+
</div>
|
|
1468
|
+
<span class="data-arrow">→</span>
|
|
1469
|
+
<div class="data-node glow-border">
|
|
1470
|
+
<span class="data-node-icon">[C]</span>
|
|
1471
|
+
<span class="data-node-label">Code</span>
|
|
1472
|
+
</div>
|
|
1473
|
+
<span class="data-arrow">→</span>
|
|
1474
|
+
<div class="data-node glow-border">
|
|
1475
|
+
<span class="data-node-icon">[D]</span>
|
|
1476
|
+
<span class="data-node-label">Docs</span>
|
|
1477
|
+
</div>
|
|
1478
|
+
</div>
|
|
1479
|
+
|
|
975
1480
|
<div class="scroll-hint">[ SCROLL TO BEGIN ]</div>
|
|
976
1481
|
</div>
|
|
977
1482
|
</section>
|
|
@@ -1180,31 +1685,35 @@
|
|
|
1180
1685
|
</div>
|
|
1181
1686
|
|
|
1182
1687
|
<div class="phase-grid">
|
|
1183
|
-
<div class="phase-box" data-phase="1">
|
|
1688
|
+
<div class="phase-box glow-border" data-phase="1">
|
|
1184
1689
|
<div class="phase-status"></div>
|
|
1185
1690
|
<div class="phase-number">01</div>
|
|
1186
1691
|
<div class="phase-name">Scope</div>
|
|
1187
1692
|
<div class="phase-desc">Define what we're building</div>
|
|
1693
|
+
<span class="phase-arrow">→</span>
|
|
1188
1694
|
</div>
|
|
1189
|
-
<div class="phase-box" data-phase="2">
|
|
1695
|
+
<div class="phase-box glow-border" data-phase="2">
|
|
1190
1696
|
<div class="phase-status"></div>
|
|
1191
1697
|
<div class="phase-number">02</div>
|
|
1192
1698
|
<div class="phase-name">Research</div>
|
|
1193
1699
|
<div class="phase-desc">Find live documentation</div>
|
|
1700
|
+
<span class="phase-arrow">→</span>
|
|
1194
1701
|
</div>
|
|
1195
|
-
<div class="phase-box" data-phase="3">
|
|
1702
|
+
<div class="phase-box glow-border" data-phase="3">
|
|
1196
1703
|
<div class="phase-status"></div>
|
|
1197
1704
|
<div class="phase-number">03</div>
|
|
1198
1705
|
<div class="phase-name">Interview</div>
|
|
1199
1706
|
<div class="phase-desc">Ask user questions</div>
|
|
1707
|
+
<span class="phase-arrow">→</span>
|
|
1200
1708
|
</div>
|
|
1201
|
-
<div class="phase-box" data-phase="4">
|
|
1709
|
+
<div class="phase-box glow-border" data-phase="4">
|
|
1202
1710
|
<div class="phase-status"></div>
|
|
1203
1711
|
<div class="phase-number">04</div>
|
|
1204
1712
|
<div class="phase-name">Deep Research</div>
|
|
1205
1713
|
<div class="phase-desc">Based on interview answers</div>
|
|
1714
|
+
<span class="phase-arrow">→</span>
|
|
1206
1715
|
</div>
|
|
1207
|
-
<div class="phase-box" data-phase="5">
|
|
1716
|
+
<div class="phase-box glow-border" data-phase="5">
|
|
1208
1717
|
<div class="phase-status"></div>
|
|
1209
1718
|
<div class="phase-number">05</div>
|
|
1210
1719
|
<div class="phase-name">Schema</div>
|
|
@@ -1213,31 +1722,35 @@
|
|
|
1213
1722
|
|
|
1214
1723
|
<div class="phase-connector">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
|
|
1215
1724
|
|
|
1216
|
-
<div class="phase-box" data-phase="6">
|
|
1725
|
+
<div class="phase-box glow-border" data-phase="6">
|
|
1217
1726
|
<div class="phase-status"></div>
|
|
1218
1727
|
<div class="phase-number">06</div>
|
|
1219
1728
|
<div class="phase-name">Environment</div>
|
|
1220
1729
|
<div class="phase-desc">Check API keys exist</div>
|
|
1730
|
+
<span class="phase-arrow">→</span>
|
|
1221
1731
|
</div>
|
|
1222
|
-
<div class="phase-box" data-phase="7">
|
|
1732
|
+
<div class="phase-box glow-border" data-phase="7">
|
|
1223
1733
|
<div class="phase-status"></div>
|
|
1224
1734
|
<div class="phase-number">07</div>
|
|
1225
1735
|
<div class="phase-name">TDD Red</div>
|
|
1226
1736
|
<div class="phase-desc">Write failing tests</div>
|
|
1737
|
+
<span class="phase-arrow">→</span>
|
|
1227
1738
|
</div>
|
|
1228
|
-
<div class="phase-box" data-phase="8">
|
|
1739
|
+
<div class="phase-box glow-border" data-phase="8">
|
|
1229
1740
|
<div class="phase-status"></div>
|
|
1230
1741
|
<div class="phase-number">08</div>
|
|
1231
1742
|
<div class="phase-name">TDD Green</div>
|
|
1232
1743
|
<div class="phase-desc">Make tests pass</div>
|
|
1744
|
+
<span class="phase-arrow">→</span>
|
|
1233
1745
|
</div>
|
|
1234
|
-
<div class="phase-box" data-phase="9">
|
|
1746
|
+
<div class="phase-box glow-border" data-phase="9">
|
|
1235
1747
|
<div class="phase-status"></div>
|
|
1236
1748
|
<div class="phase-number">09</div>
|
|
1237
1749
|
<div class="phase-name">Refactor</div>
|
|
1238
1750
|
<div class="phase-desc">Clean up the code</div>
|
|
1751
|
+
<span class="phase-arrow">→</span>
|
|
1239
1752
|
</div>
|
|
1240
|
-
<div class="phase-box" data-phase="10">
|
|
1753
|
+
<div class="phase-box glow-border" data-phase="10">
|
|
1241
1754
|
<div class="phase-status"></div>
|
|
1242
1755
|
<div class="phase-number">10</div>
|
|
1243
1756
|
<div class="phase-name">Documentation</div>
|
|
@@ -1414,6 +1927,10 @@
|
|
|
1414
1927
|
<div class="terminal-dot"></div>
|
|
1415
1928
|
<div class="terminal-dot"></div>
|
|
1416
1929
|
<div class="terminal-title">claude-code session: /api-create brandfetch</div>
|
|
1930
|
+
<div class="status-badge active" style="margin-left: auto;">
|
|
1931
|
+
<span class="pulse"></span>
|
|
1932
|
+
<span>Live</span>
|
|
1933
|
+
</div>
|
|
1417
1934
|
</div>
|
|
1418
1935
|
|
|
1419
1936
|
<div class="terminal-comment" data-step="0">// Step 1: Research phase starts automatically</div>
|
|
@@ -1488,6 +2005,15 @@
|
|
|
1488
2005
|
• API Key Handling: server_only<br>
|
|
1489
2006
|
ALLOWED: Writing schema file...</span>
|
|
1490
2007
|
</div>
|
|
2008
|
+
|
|
2009
|
+
<div class="terminal-line" data-step="16" style="margin-top: 15px;">
|
|
2010
|
+
<span class="terminal-prompt">claude></span>
|
|
2011
|
+
<div class="typing-indicator">
|
|
2012
|
+
<span></span>
|
|
2013
|
+
<span></span>
|
|
2014
|
+
<span></span>
|
|
2015
|
+
</div>
|
|
2016
|
+
</div>
|
|
1491
2017
|
</div>
|
|
1492
2018
|
</div>
|
|
1493
2019
|
</section>
|
|
@@ -1616,13 +2142,28 @@
|
|
|
1616
2142
|
|
|
1617
2143
|
<div class="explanation" style="text-align: left;">
|
|
1618
2144
|
<div class="explanation-title">What You Get</div>
|
|
1619
|
-
<
|
|
1620
|
-
<
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
<
|
|
1625
|
-
|
|
2145
|
+
<div style="display: flex; flex-direction: column; gap: 12px;">
|
|
2146
|
+
<div style="display: flex; align-items: center;">
|
|
2147
|
+
<span class="visual-check checked"></span>
|
|
2148
|
+
<span><strong>Structured workflow</strong> - No more skipped steps or assumptions</span>
|
|
2149
|
+
</div>
|
|
2150
|
+
<div style="display: flex; align-items: center;">
|
|
2151
|
+
<span class="visual-check checked"></span>
|
|
2152
|
+
<span><strong>Real enforcement</strong> - Hooks that actually block bad behavior</span>
|
|
2153
|
+
</div>
|
|
2154
|
+
<div style="display: flex; align-items: center;">
|
|
2155
|
+
<span class="visual-check checked"></span>
|
|
2156
|
+
<span><strong>Audit trail</strong> - Every action logged to state file</span>
|
|
2157
|
+
</div>
|
|
2158
|
+
<div style="display: flex; align-items: center;">
|
|
2159
|
+
<span class="visual-check checked"></span>
|
|
2160
|
+
<span><strong>Gap detection</strong> - Catches mismatches between requirements and code</span>
|
|
2161
|
+
</div>
|
|
2162
|
+
<div style="display: flex; align-items: center;">
|
|
2163
|
+
<span class="visual-check checked"></span>
|
|
2164
|
+
<span><strong>TDD built-in</strong> - Tests written before implementation</span>
|
|
2165
|
+
</div>
|
|
2166
|
+
</div>
|
|
1626
2167
|
</div>
|
|
1627
2168
|
|
|
1628
2169
|
<div class="credit-links">
|
|
@@ -1696,6 +2237,9 @@
|
|
|
1696
2237
|
.to('#packageName', { opacity: 1, duration: 0.5 }, '-=0.3')
|
|
1697
2238
|
.to('#versionText', { opacity: 1, duration: 0.3 })
|
|
1698
2239
|
.to('.intro-text', { opacity: 1, duration: 0.6 }, '-=0.2')
|
|
2240
|
+
.to('#introFlow', { opacity: 1, duration: 0.6 })
|
|
2241
|
+
.to('#introFlow .data-node', { opacity: 1, y: 0, stagger: 0.15, duration: 0.4 }, '-=0.3')
|
|
2242
|
+
.to('#introFlow .data-arrow', { opacity: 1, stagger: 0.1, duration: 0.2 }, '-=0.5')
|
|
1699
2243
|
.to('.scroll-hint', { opacity: 1, duration: 0.4 });
|
|
1700
2244
|
|
|
1701
2245
|
// ============================================
|
|
@@ -1968,6 +2512,157 @@
|
|
|
1968
2512
|
});
|
|
1969
2513
|
});
|
|
1970
2514
|
});
|
|
2515
|
+
|
|
2516
|
+
// ============================================
|
|
2517
|
+
// ANIMATED BACKGROUND - FLOATING PARTICLES (ENHANCED)
|
|
2518
|
+
// ============================================
|
|
2519
|
+
const particleContainer = document.getElementById('particles');
|
|
2520
|
+
// More particle types: circles, squares, X's, plus signs, lines, triangles
|
|
2521
|
+
const particleTypes = ['', 'square', 'plus', 'x-shape', 'line', 'line-v', 'circle-outline', 'triangle'];
|
|
2522
|
+
const particleCount = 50; // More particles
|
|
2523
|
+
|
|
2524
|
+
// Create particles
|
|
2525
|
+
for (let i = 0; i < particleCount; i++) {
|
|
2526
|
+
const particle = document.createElement('div');
|
|
2527
|
+
const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
|
|
2528
|
+
particle.className = `particle ${type}`;
|
|
2529
|
+
particle.style.left = `${Math.random() * 100}%`;
|
|
2530
|
+
particle.style.top = `${Math.random() * 100}%`;
|
|
2531
|
+
particleContainer.appendChild(particle);
|
|
2532
|
+
|
|
2533
|
+
// FASTER, MORE VISIBLE MOVEMENT
|
|
2534
|
+
const speed = 4 + Math.random() * 8; // Much faster: 4-12 seconds
|
|
2535
|
+
const distance = 150 + Math.random() * 250; // Larger movement range
|
|
2536
|
+
|
|
2537
|
+
// Animate each particle with GSAP - MORE MOTION
|
|
2538
|
+
gsap.to(particle, {
|
|
2539
|
+
x: `${(Math.random() - 0.5) * distance}`,
|
|
2540
|
+
y: `${(Math.random() - 0.5) * distance}`,
|
|
2541
|
+
rotation: (Math.random() - 0.5) * 720, // More rotation
|
|
2542
|
+
duration: speed,
|
|
2543
|
+
repeat: -1,
|
|
2544
|
+
yoyo: true,
|
|
2545
|
+
ease: 'sine.inOut',
|
|
2546
|
+
delay: Math.random() * 2
|
|
2547
|
+
});
|
|
2548
|
+
|
|
2549
|
+
// Fade in/out animation - more visible
|
|
2550
|
+
gsap.to(particle, {
|
|
2551
|
+
opacity: 0.15 + Math.random() * 0.4, // Higher opacity
|
|
2552
|
+
duration: 2 + Math.random() * 3,
|
|
2553
|
+
repeat: -1,
|
|
2554
|
+
yoyo: true,
|
|
2555
|
+
ease: 'sine.inOut',
|
|
2556
|
+
delay: Math.random() * 2
|
|
2557
|
+
});
|
|
2558
|
+
}
|
|
2559
|
+
|
|
2560
|
+
// Add some CONSTANTLY MOVING particles that drift across the screen
|
|
2561
|
+
for (let i = 0; i < 10; i++) {
|
|
2562
|
+
const drifter = document.createElement('div');
|
|
2563
|
+
const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
|
|
2564
|
+
drifter.className = `particle ${type}`;
|
|
2565
|
+
drifter.style.left = `-20px`;
|
|
2566
|
+
drifter.style.top = `${Math.random() * 100}%`;
|
|
2567
|
+
drifter.style.opacity = '0.3';
|
|
2568
|
+
particleContainer.appendChild(drifter);
|
|
2569
|
+
|
|
2570
|
+
// Drift across the screen continuously
|
|
2571
|
+
gsap.to(drifter, {
|
|
2572
|
+
x: window.innerWidth + 40,
|
|
2573
|
+
y: (Math.random() - 0.5) * 200,
|
|
2574
|
+
rotation: Math.random() * 360,
|
|
2575
|
+
duration: 15 + Math.random() * 15,
|
|
2576
|
+
repeat: -1,
|
|
2577
|
+
ease: 'none',
|
|
2578
|
+
delay: i * 3
|
|
2579
|
+
});
|
|
2580
|
+
}
|
|
2581
|
+
|
|
2582
|
+
// ============================================
|
|
2583
|
+
// ANIMATED BACKGROUND - GRID MOTION (FASTER)
|
|
2584
|
+
// ============================================
|
|
2585
|
+
const gridRect = document.getElementById('gridRect');
|
|
2586
|
+
let gridOffset = { x: 0, y: 0 };
|
|
2587
|
+
|
|
2588
|
+
// Faster, more noticeable grid drift
|
|
2589
|
+
gsap.to(gridOffset, {
|
|
2590
|
+
x: 40,
|
|
2591
|
+
y: 40,
|
|
2592
|
+
duration: 10, // Faster: was 30
|
|
2593
|
+
repeat: -1,
|
|
2594
|
+
yoyo: true, // Added yoyo for back-and-forth
|
|
2595
|
+
ease: 'sine.inOut',
|
|
2596
|
+
onUpdate: () => {
|
|
2597
|
+
gridRect.setAttribute('transform', `translate(${gridOffset.x}, ${gridOffset.y})`);
|
|
2598
|
+
}
|
|
2599
|
+
});
|
|
2600
|
+
|
|
2601
|
+
// Add subtle grid pulsing
|
|
2602
|
+
gsap.to('.grid-svg', {
|
|
2603
|
+
opacity: 0.2,
|
|
2604
|
+
duration: 4,
|
|
2605
|
+
repeat: -1,
|
|
2606
|
+
yoyo: true,
|
|
2607
|
+
ease: 'sine.inOut'
|
|
2608
|
+
});
|
|
2609
|
+
|
|
2610
|
+
// ============================================
|
|
2611
|
+
// CURSOR GLOW EFFECT
|
|
2612
|
+
// ============================================
|
|
2613
|
+
const cursorGlow = document.getElementById('cursorGlow');
|
|
2614
|
+
let mouseX = 0, mouseY = 0;
|
|
2615
|
+
let glowX = 0, glowY = 0;
|
|
2616
|
+
|
|
2617
|
+
document.addEventListener('mousemove', (e) => {
|
|
2618
|
+
mouseX = e.clientX;
|
|
2619
|
+
mouseY = e.clientY;
|
|
2620
|
+
});
|
|
2621
|
+
|
|
2622
|
+
// Smooth cursor follow
|
|
2623
|
+
function updateCursorGlow() {
|
|
2624
|
+
const dx = mouseX - glowX;
|
|
2625
|
+
const dy = mouseY - glowY;
|
|
2626
|
+
glowX += dx * 0.08;
|
|
2627
|
+
glowY += dy * 0.08;
|
|
2628
|
+
cursorGlow.style.left = `${glowX}px`;
|
|
2629
|
+
cursorGlow.style.top = `${glowY}px`;
|
|
2630
|
+
requestAnimationFrame(updateCursorGlow);
|
|
2631
|
+
}
|
|
2632
|
+
updateCursorGlow();
|
|
2633
|
+
|
|
2634
|
+
// ============================================
|
|
2635
|
+
// CORNER DECORATIONS ANIMATION
|
|
2636
|
+
// ============================================
|
|
2637
|
+
gsap.to('.corner-decoration', {
|
|
2638
|
+
opacity: 0.2,
|
|
2639
|
+
duration: 2,
|
|
2640
|
+
repeat: -1,
|
|
2641
|
+
yoyo: true,
|
|
2642
|
+
ease: 'sine.inOut',
|
|
2643
|
+
stagger: 0.5
|
|
2644
|
+
});
|
|
2645
|
+
|
|
2646
|
+
// ============================================
|
|
2647
|
+
// SECTION TRANSITION EFFECTS
|
|
2648
|
+
// ============================================
|
|
2649
|
+
sections.forEach(sectionId => {
|
|
2650
|
+
ScrollTrigger.create({
|
|
2651
|
+
trigger: `#${sectionId}`,
|
|
2652
|
+
start: 'top center',
|
|
2653
|
+
end: 'bottom center',
|
|
2654
|
+
onEnter: () => {
|
|
2655
|
+
// Pulse the grid when entering a new section
|
|
2656
|
+
gsap.to('.grid-svg', {
|
|
2657
|
+
opacity: 0.25,
|
|
2658
|
+
duration: 0.3,
|
|
2659
|
+
yoyo: true,
|
|
2660
|
+
repeat: 1,
|
|
2661
|
+
ease: 'power2.out'
|
|
2662
|
+
});
|
|
2663
|
+
}
|
|
2664
|
+
});
|
|
2665
|
+
});
|
|
1971
2666
|
</script>
|
|
1972
2667
|
|
|
1973
2668
|
</body>
|