MultiTrickFox commited on
Commit
a18f862
·
verified ·
1 Parent(s): 9f85fe1

just change 1 thing: when hovering over something, you notice how to 2 cursors change, make them "catch" each other in the opposite way while hovering (small catches up to big, while in normal its reverse normally) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1436 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aura
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: aura
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1436 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aura - AI Software for People</title>
7
+
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
11
+
12
+ <style>
13
+ /* FONT IMPORT */
14
+ @import url("https://fonts.cdnfonts.com/css/thegoodmonolith");
15
+
16
+ /* CUSTOM CURSOR */
17
+ /* MODIFIED: Added .menu-trigger-container to ensure custom cursor applies */
18
+ html, a, button, input, textarea, select, label, [role="button"], .menu-trigger-container {
19
+ cursor: none !important;
20
+ }
21
+
22
+ .cursor {
23
+ position: fixed;
24
+ width: 20px;
25
+ height: 20px;
26
+ border-radius: 50%;
27
+ background: rgba(255,255,255,0.2);
28
+ transform: translate(-50%, -50%);
29
+ pointer-events: none;
30
+ mix-blend-mode: difference;
31
+ z-index: 9999;
32
+ transition: transform 0.2s ease, background 0.2s ease;
33
+ }
34
+
35
+ .cursor-follower {
36
+ position: fixed;
37
+ width: 40px;
38
+ height: 40px;
39
+ border-radius: 50%;
40
+ border: 1px solid rgba(255,255,255,0.2);
41
+ transform: translate(-50%, -50%);
42
+ pointer-events: none;
43
+ z-index: 9998;
44
+ transition: transform 0.6s cubic-bezier(0.15, 0.85, 0.3, 1.2),
45
+ width 0.3s ease,
46
+ height 0.3s ease;
47
+ }
48
+
49
+ /* Styles for mouse click effect */
50
+ .cursor.mouse-pressed {
51
+ transform: translate(-50%, -50%) scale(0.5) !important;
52
+ }
53
+ .cursor-follower.mouse-pressed {
54
+ transform: translate(-50%, -50%) scale(0.8) !important;
55
+ }
56
+
57
+ /* SCROLL INDICATOR */
58
+ .scroll-progress {
59
+ position: fixed;
60
+ top: 0;
61
+ left: 0;
62
+ width: 0%;
63
+ height: 3px;
64
+ background: linear-gradient(90deg, #fff, rgba(255,255,255,0.5));
65
+ z-index: 1000;
66
+ transition: width 0.1s ease-out;
67
+ }
68
+
69
+ /* BASE & TYPOGRAPHY */
70
+ * {
71
+ margin: 0;
72
+ padding: 0;
73
+ box-sizing: border-box;
74
+ }
75
+
76
+ html {
77
+ scroll-behavior: smooth;
78
+ }
79
+
80
+ body {
81
+ background: #000;
82
+ color: #f0f0f0;
83
+ font-family: "TheGoodMonolith", monospace;
84
+ overflow-x: hidden;
85
+ }
86
+
87
+ .section {
88
+ padding: 120px 5%;
89
+ position: relative;
90
+ display: flex;
91
+ flex-direction: column;
92
+ align-items: center;
93
+ text-align: center;
94
+ overflow: hidden;
95
+ }
96
+
97
+ h1, h2, h3 {
98
+ letter-spacing: 1px;
99
+ font-weight: normal;
100
+ }
101
+
102
+ h1 {
103
+ font-size: clamp(2.8rem, 6vw, 5rem);
104
+ margin-bottom: 10px;
105
+ text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
106
+ line-height: 1.1;
107
+ }
108
+
109
+ h2 {
110
+ font-size: clamp(2rem, 4vw, 3rem);
111
+ margin-bottom: 60px;
112
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
113
+ padding-bottom: 20px;
114
+ width: 100%;
115
+ max-width: 800px;
116
+ }
117
+
118
+ p {
119
+ font-size: clamp(1rem, 1.5vw, 1.1rem);
120
+ line-height: 1.7;
121
+ max-width: 700px;
122
+ color: #b0b0b0;
123
+ }
124
+
125
+ /* HEADER & NAVIGATION */
126
+ .header {
127
+ position: fixed;
128
+ top: 0;
129
+ left: 0;
130
+ width: 100%;
131
+ padding: 20px 5%;
132
+ display: flex;
133
+ justify-content: space-between;
134
+ align-items: center;
135
+ z-index: 1001;
136
+ background: rgba(0, 0, 0, 0.5);
137
+ backdrop-filter: blur(10px);
138
+ -webkit-backdrop-filter: blur(10px);
139
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
140
+ }
141
+
142
+ .logo {
143
+ font-size: 24px;
144
+ font-weight: bold;
145
+ letter-spacing: 2px;
146
+ z-index: 1001;
147
+ }
148
+
149
+ .menu-trigger-container {
150
+ position: relative;
151
+ width: 60px;
152
+ height: 60px;
153
+ /* MODIFIED: Removed 'cursor: pointer' */
154
+ display: flex;
155
+ justify-content: center;
156
+ align-items: center;
157
+ transform: scale(0.7);
158
+ z-index: 1001;
159
+ }
160
+
161
+ .expanding-circles-menu {
162
+ position: relative;
163
+ width: 60px;
164
+ height: 60px;
165
+ display: flex;
166
+ justify-content: center;
167
+ align-items: center;
168
+ }
169
+
170
+ .expanding-circles-menu .circle {
171
+ position: absolute;
172
+ width: 8px;
173
+ height: 8px;
174
+ background-color: #fff;
175
+ border-radius: 50%;
176
+ opacity: 1;
177
+ }
178
+
179
+ .expanding-circles-menu .circle.extra {
180
+ opacity: 0;
181
+ }
182
+
183
+ .expanding-circles-menu .circle.micro {
184
+ width: 4px;
185
+ height: 4px;
186
+ opacity: 0;
187
+ }
188
+
189
+ .full-screen-nav {
190
+ position: fixed;
191
+ top: 0;
192
+ left: 0;
193
+ width: 100%;
194
+ height: 100%;
195
+ background: rgba(0,0,0,0.95);
196
+ backdrop-filter: blur(15px);
197
+ -webkit-backdrop-filter: blur(15px);
198
+ z-index: 1000;
199
+ display: flex;
200
+ flex-direction: column;
201
+ justify-content: center;
202
+ align-items: center;
203
+ visibility: hidden;
204
+ opacity: 0;
205
+ }
206
+
207
+ .full-screen-nav a {
208
+ color: #f0f0f0;
209
+ text-decoration: none;
210
+ font-size: clamp(2rem, 5vw, 3rem);
211
+ margin: 20px 0;
212
+ opacity: 0;
213
+ transform: translateY(20px);
214
+ transition: color 0.3s, text-shadow 0.3s;
215
+ }
216
+
217
+ .full-screen-nav a:hover {
218
+ color: #fff;
219
+ text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
220
+ }
221
+
222
+ .cta-button {
223
+ background: transparent;
224
+ border: 1px solid #fff;
225
+ color: #fff;
226
+ padding: 12px 24px;
227
+ font-family: inherit;
228
+ font-size: 14px;
229
+ cursor: pointer;
230
+ position: relative;
231
+ overflow: hidden;
232
+ transition: color 0.4s ease-in-out;
233
+ z-index: 1;
234
+ }
235
+
236
+ .cta-button::before {
237
+ content: '';
238
+ position: absolute;
239
+ top: 0;
240
+ left: -100%;
241
+ width: 100%;
242
+ height: 100%;
243
+ background: #fff;
244
+ transition: left 0.4s ease-in-out;
245
+ z-index: -1;
246
+ }
247
+
248
+ .cta-button:hover {
249
+ color: #000;
250
+ }
251
+
252
+ .cta-button:hover::before {
253
+ left: 0;
254
+ }
255
+
256
+ /* HERO SECTION */
257
+ .hero {
258
+ min-height: 100vh;
259
+ display: flex;
260
+ justify-content: center;
261
+ align-items: center;
262
+ perspective: 1000px;
263
+ position: relative;
264
+ overflow: hidden;
265
+ }
266
+
267
+ .particle-bg {
268
+ position: absolute;
269
+ top: 0;
270
+ left: 0;
271
+ width: 100%;
272
+ height: 100%;
273
+ z-index: 0;
274
+ }
275
+
276
+ .hero-content {
277
+ z-index: 10;
278
+ transition: transform 0.1s ease-out;
279
+ width: 100%;
280
+ padding: 0 23%;
281
+ text-align: left;
282
+ }
283
+
284
+ .hero-content .cta-button {
285
+ margin-left: 0;
286
+ margin-right: auto;
287
+ }
288
+
289
+ .hero-canvas-container {
290
+ position: absolute;
291
+ top: 0;
292
+ left: 0;
293
+ width: 100%;
294
+ height: 100%;
295
+ z-index: 1;
296
+ }
297
+
298
+ .hero-canvas {
299
+ width: 100%;
300
+ height: 100%;
301
+ opacity: 0.3;
302
+ }
303
+
304
+ .subheadline {
305
+ font-size: clamp(1.2rem, 2vw, 1.5rem);
306
+ color: #c0c0c0;
307
+ margin-bottom: 40px;
308
+ min-height: 1.5rem;
309
+ text-align: left;
310
+ }
311
+
312
+ #dynamic-subheadline {
313
+ display: inline-block;
314
+ }
315
+
316
+ /* FEATURES SECTION (2x2 GRID) */
317
+ .features-grid {
318
+ display: grid;
319
+ grid-template-columns: 1fr;
320
+ gap: 30px;
321
+ max-width: 1000px;
322
+ width: 100%;
323
+ margin: 0 auto;
324
+ }
325
+
326
+ @media (min-width: 640px) {
327
+ .features-grid {
328
+ grid-template-columns: repeat(2, 1fr);
329
+ }
330
+ }
331
+
332
+ .animation-container {
333
+ position: relative;
334
+ width: 100%;
335
+ aspect-ratio: 1 / 1;
336
+ border: 1px solid rgba(255, 255, 255, 0.1);
337
+ background: rgba(0, 0, 0, 0.5);
338
+ padding: 20px;
339
+ display: flex;
340
+ flex-direction: column;
341
+ align-items: center;
342
+ justify-content: space-between;
343
+ overflow: visible;
344
+ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
345
+ transform-style: preserve-3d;
346
+ }
347
+
348
+ .animation-container:hover {
349
+ border-color: rgba(255, 255, 255, 0.4);
350
+ background: rgba(255, 255, 255, 0.03);
351
+ transform: translateY(-10px) scale(1.02);
352
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
353
+ }
354
+
355
+ .animation-container:hover {
356
+ border-color: rgba(255, 255, 255, 0.4);
357
+ background: rgba(255, 255, 255, 0.03);
358
+ }
359
+
360
+ .animation-title {
361
+ font-size: 16px;
362
+ letter-spacing: 0.5px;
363
+ text-transform: uppercase;
364
+ text-align: center;
365
+ flex-shrink: 0;
366
+ }
367
+
368
+ .animation-description {
369
+ font-size: 14px;
370
+ color: #999;
371
+ flex-shrink: 0;
372
+ padding: 15px 0;
373
+ line-height: 1.6;
374
+ }
375
+
376
+ .circle-container {
377
+ position: relative;
378
+ width: 100%;
379
+ flex-grow: 1;
380
+ display: flex;
381
+ justify-content: center;
382
+ align-items: center;
383
+ min-height: 150px;
384
+ }
385
+
386
+ .circle-container canvas {
387
+ position: absolute;
388
+ top: 50%;
389
+ left: 50%;
390
+ transform: translate(-50%, -50%);
391
+ }
392
+
393
+ /* CORNER DECORATIONS */
394
+ .corner {
395
+ position: absolute;
396
+ width: 16px;
397
+ height: 16px;
398
+ color: white;
399
+ opacity: 0;
400
+ z-index: 10;
401
+ pointer-events: none;
402
+ transition: opacity 0.3s ease;
403
+ }
404
+
405
+ .animation-container:hover .corner {
406
+ opacity: 1;
407
+ }
408
+
409
+ .corner.top-left { top: -8px; left: -8px; transition-delay: 0s; }
410
+ .corner.top-right { top: -8px; right: -8px; transform: rotate(90deg); transition-delay: 0.1s; }
411
+ .corner.bottom-left { bottom: -8px; left: -8px; transform: rotate(-90deg); transition-delay: 0.2s; }
412
+ .corner.bottom-right { bottom: -8px; right: -8px; transform: rotate(180deg); transition-delay: 0.3s; }
413
+
414
+ /* HOW IT WORKS SECTION (1x3 GRID) */
415
+ .how-it-works-steps {
416
+ display: grid;
417
+ grid-template-columns: 1fr;
418
+ width: 100%;
419
+ max-width: 1100px;
420
+ gap: 40px;
421
+ margin-top: 40px;
422
+ }
423
+
424
+ @media (min-width: 768px) {
425
+ .how-it-works-steps {
426
+ grid-template-columns: repeat(3, 1fr);
427
+ }
428
+ }
429
+
430
+ .step {
431
+ padding: 20px;
432
+ }
433
+
434
+ .step-number {
435
+ font-size: 3rem;
436
+ color: rgba(255,255,255,0.3);
437
+ margin-bottom: 20px;
438
+ border-bottom: 1px solid rgba(255,255,255,0.1);
439
+ padding-bottom: 20px;
440
+ }
441
+
442
+ .step h3 {
443
+ font-size: 1.5rem;
444
+ margin-bottom: 15px;
445
+ color: #fff;
446
+ }
447
+
448
+ /* VISUAL SEPARATOR SECTION */
449
+ .visual-separator {
450
+ padding: 40px 0;
451
+ height: 250px;
452
+ width: 100%;
453
+ display: flex;
454
+ justify-content: center;
455
+ align-items: center;
456
+ }
457
+
458
+ #orbits-separator-container {
459
+ position: relative;
460
+ width: 180px;
461
+ height: 180px;
462
+ }
463
+
464
+ .orbit-container {
465
+ position: absolute;
466
+ width: 100%;
467
+ height: 100%;
468
+ border-radius: 50%;
469
+ transform-style: preserve-3d;
470
+ animation: rotate 8s infinite linear;
471
+ }
472
+ .orbit-container .dot {
473
+ position: absolute;
474
+ border-radius: 50%;
475
+ background: #fff;
476
+ }
477
+
478
+ @keyframes rotate {
479
+ to {
480
+ transform: rotateZ(360deg);
481
+ }
482
+ }
483
+
484
+ /* STYLES FOR TESTIMONIALS MARQUEE */
485
+ #testimonials {
486
+ padding-top: 120px;
487
+ padding-bottom: 120px;
488
+ width: 100%;
489
+ }
490
+ .testimonials-marquee {
491
+ width: 100%;
492
+ overflow: hidden;
493
+ -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
494
+ mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
495
+ }
496
+ .testimonials-track {
497
+ display: flex;
498
+ width: fit-content;
499
+ animation: marquee 60s linear infinite;
500
+ }
501
+ @keyframes marquee {
502
+ from { transform: translateX(0%); }
503
+ to { transform: translateX(-50%); }
504
+ }
505
+ .testimonial-card {
506
+ background: rgba(255,255,255,0.03);
507
+ border: 1px solid rgba(255, 255, 255, 0.1);
508
+ padding: 30px;
509
+ text-align: left;
510
+ width: 450px;
511
+ margin: 0 15px;
512
+ flex-shrink: 0;
513
+ transition: border-color 0.3s ease;
514
+ }
515
+ .testimonial-card:hover {
516
+ border-color: rgba(255, 255, 255, 0.8);
517
+ }
518
+ .testimonial-card p {
519
+ font-style: italic;
520
+ color: #ccc;
521
+ margin-bottom: 20px;
522
+ }
523
+ .testimonial-author {
524
+ font-weight: bold;
525
+ color: #fff;
526
+ }
527
+
528
+ /* WAITLIST FORM */
529
+ .waitlist-form-container {
530
+ width: 100%;
531
+ max-width: 500px;
532
+ }
533
+
534
+ #waitlist-form {
535
+ display: flex;
536
+ gap: 10px;
537
+ }
538
+
539
+ #waitlist-form input {
540
+ flex-grow: 1;
541
+ background: transparent;
542
+ border: 1px solid rgba(255,255,255,0.2);
543
+ color: #fff;
544
+ padding: 12px 15px;
545
+ font-family: inherit;
546
+ font-size: 14px;
547
+ position: relative;
548
+ overflow: hidden;
549
+ transition: color 0.4s ease-in-out;
550
+ }
551
+
552
+ #waitlist-form input:focus {
553
+ outline: none;
554
+ border-color: #fff;
555
+ }
556
+
557
+ #waitlist-form input::before {
558
+ content: '';
559
+ position: absolute;
560
+ top: 0;
561
+ left: -100%;
562
+ width: 100%;
563
+ height: 100%;
564
+ background: #fff;
565
+ transition: left 0.4s ease-in-out;
566
+ z-index: -1;
567
+ }
568
+
569
+ /* TOAST MESSAGE */
570
+ #toast-message {
571
+ position: fixed;
572
+ bottom: 30px;
573
+ left: 50%;
574
+ transform: translateX(-50%);
575
+ background: #fff;
576
+ color: #000;
577
+ padding: 15px 30px;
578
+ border-radius: 4px;
579
+ z-index: 2000;
580
+ visibility: hidden;
581
+ opacity: 0;
582
+ transition: opacity 0.4s, visibility 0.4s, bottom 0.4s;
583
+ }
584
+
585
+ #toast-message.show {
586
+ visibility: visible;
587
+ opacity: 1;
588
+ bottom: 50px;
589
+ }
590
+
591
+ /* FOOTER */
592
+ .footer {
593
+ background: #050505;
594
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
595
+ padding: 60px 5% 27px;
596
+ font-size: 14px;
597
+ color: #888;
598
+ }
599
+
600
+ .footer-content {
601
+ display: flex;
602
+ justify-content: space-between;
603
+ max-width: 1200px;
604
+ width: 100%;
605
+ margin: 0 auto;
606
+ gap: 40px;
607
+ flex-wrap: wrap;
608
+ }
609
+
610
+ .footer-column {
611
+ flex: 1;
612
+ min-width: 200px;
613
+ }
614
+
615
+ .footer-column h4 {
616
+ color: #fff;
617
+ margin-bottom: 20px;
618
+ font-size: 16px;
619
+ }
620
+
621
+ .footer-column a {
622
+ display: block;
623
+ color: #888;
624
+ text-decoration: none;
625
+ margin-bottom: 10px;
626
+ transition: color 0.3s;
627
+ }
628
+
629
+ .footer-column a:hover {
630
+ color: #fff;
631
+ }
632
+
633
+ .footer-bottom {
634
+ display: flex;
635
+ justify-content: center;
636
+ margin-top: 40px;
637
+ padding-top: 20px;
638
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
639
+ }
640
+
641
+ /* SCROLL ANIMATIONS */
642
+ .fade-in-up {
643
+ opacity: 0;
644
+ transform: translateY(30px);
645
+ }
646
+
647
+ </style>
648
+ </head>
649
+ <body>
650
+
651
+ <header class="header">
652
+ <div class="logo">AURA</div>
653
+ <div class="menu-trigger-container">
654
+ <div class="expanding-circles-menu">
655
+ <div class="circle"></div><div class="circle"></div><div class="circle"></div>
656
+ <div class="circle"></div><div class="circle"></div><div class="circle"></div>
657
+ <div class="circle extra"></div><div class="circle extra"></div><div class="circle extra"></div>
658
+ <div class="circle extra"></div><div class="circle extra"></div><div class="circle extra"></div>
659
+ <div class="circle micro"></div><div class="circle micro"></div><div class="circle micro"></div>
660
+ <div class="circle micro"></div><div class="circle micro"></div><div class="circle micro"></div>
661
+ <div class="circle micro"></div><div class="circle micro"></div><div class="circle micro"></div>
662
+ <div class="circle micro"></div><div class="circle micro"></div><div class="circle micro"></div>
663
+ </div>
664
+ </div>
665
+ </header>
666
+
667
+ <nav class="full-screen-nav">
668
+ <a href="#features">Features</a>
669
+ <a href="#how-it-works">Process</a>
670
+ <a href="#testimonials">Testimonials</a>
671
+ <a href="#about">About</a>
672
+ </nav>
673
+
674
+ <div class="cursor"></div>
675
+ <div class="cursor-follower"></div>
676
+ <div class="scroll-progress"></div>
677
+
678
+ <main>
679
+ <section class="hero">
680
+ <div class="particle-bg" id="particle-bg"></div>
681
+ <div class="hero-canvas-container">
682
+ <canvas id="hero-canvas" class="hero-canvas"></canvas>
683
+ </div>
684
+ <div class="hero-content">
685
+ <h1>AURA</h1>
686
+ <p class="subheadline"><span id="dynamic-subheadline">AI Software, Reimagined for People.</span></p>
687
+ <button class="cta-button">Explore Aura</button>
688
+ </div>
689
+ </section>
690
+
691
+ <section id="features" class="section">
692
+ <h2 class="fade-in-up">Core Capabilities</h2>
693
+ <div class="features-grid">
694
+ <div class="animation-container fade-in-up">
695
+ <div class="animation-title">Understand</div>
696
+ <div id="anim-understand" class="circle-container"></div>
697
+ <p class="animation-description">Aura comprehends context and intent, providing nuanced and relevant assistance.</p>
698
+ </div>
699
+
700
+ <div class="animation-container fade-in-up">
701
+ <div class="animation-title">Connect</div>
702
+ <div id="anim-connect" class="circle-container"></div>
703
+ <p class="animation-description">Seamlessly link disparate data points and ideas to uncover novel relationships.</p>
704
+ </div>
705
+
706
+ <div class="animation-container fade-in-up">
707
+ <div class="animation-title">Harmonize</div>
708
+ <div id="anim-harmonize" class="circle-container"></div>
709
+ <p class="animation-description">Balance automated processes with human creativity for a fluid, synergistic workflow.</p>
710
+ </div>
711
+
712
+ <div class="animation-container fade-in-up">
713
+ <div class="animation-title">Improve</div>
714
+ <div id="anim-improve" class="circle-container"></div>
715
+ <p class="animation-description">Continuously learn from your interactions to become a smarter, more personalized partner.</p>
716
+ </div>
717
+ </div>
718
+ </section>
719
+
720
+ <section id="how-it-works" class="section">
721
+ <h2 class="fade-in-up">Simple by Design</h2>
722
+ <div class="how-it-works-steps">
723
+ <div class="step fade-in-up">
724
+ <div class="step-number">01</div>
725
+ <h3>Connect</h3>
726
+ <p>Integrate Aura with your existing tools and data sources with a single click.</p>
727
+ </div>
728
+ <div class="step fade-in-up">
729
+ <div class="step-number">02</div>
730
+ <h3>Create</h3>
731
+ <p>Use natural language to command, create, and analyze. Let your ideas flow freely.</p>
732
+ </div>
733
+ <div class="step fade-in-up">
734
+ <div class="step-number">03</div>
735
+ <h3>Collaborate</h3>
736
+ <p>Aura acts as your creative partner, offering suggestions and automating tasks.</p>
737
+ </div>
738
+ </div>
739
+ </section>
740
+
741
+ <section id="testimonials" class="section">
742
+ <h2 class="fade-in-up">From the Community</h2>
743
+ <div class="testimonials-marquee">
744
+ <div class="testimonials-track">
745
+ <div class="testimonial-card">
746
+ <p>"Before Aura, my research was siloed. Now, it's a living web of connections. I asked it to 'find a link between 19th-century architecture and modern UI principles,' and it surfaced three academic papers I'd never have found. It's not an assistant; it's a discovery engine."</p>
747
+ <div class="testimonial-author">- Dr. Aris Thorne, Digital Humanist</div>
748
+ </div>
749
+ <div class="testimonial-card">
750
+ <p>"I used to spend 10 hours a week compiling reports. With Flow Weave, I just say, 'Draft the Q2 performance summary, focus on user growth, and use a confident but cautious tone.' It's done in 30 seconds. That's a day of my life back, every single week."</p>
751
+ <div class="testimonial-author">- Lena Petrova, COO</div>
752
+ </div>
753
+ <div class="testimonial-card">
754
+ <p>"The magic of Aura is that it disappears. It's so integrated into how I think that I don't feel like I'm 'using' a tool. My ideas just... flow better. It removed the creative friction I didn't even know I had."</p>
755
+ <div class="testimonial-author">- Sam Chen, Novelist & Screenwriter</div>
756
+ </div>
757
+ <div class="testimonial-card">
758
+ <p>"Before Aura, my research was siloed. Now, it's a living web of connections. I asked it to 'find a link between 19th-century architecture and modern UI principles,' and it surfaced three academic papers I'd never have found. It's not an assistant; it's a discovery engine."</p>
759
+ <div class="testimonial-author">- Dr. Aris Thorne, Digital Humanist</div>
760
+ </div>
761
+ <div class="testimonial-card">
762
+ <p>"I used to spend 10 hours a week compiling reports. With Flow Weave, I just say, 'Draft the Q2 performance summary, focus on user growth, and use a confident but cautious tone.' It's done in 30 seconds. That's a day of my life back, every single week."</p>
763
+ <div class="testimonial-author">- Lena Petrova, COO</div>
764
+ </div>
765
+ <div class="testimonial-card">
766
+ <p>"The magic of Aura is that it disappears. It's so integrated into how I think that I don't feel like I'm 'using' a tool. My ideas just... flow better. It removed the creative friction I didn't even know I had."</p>
767
+ <div class="testimonial-author">- Sam Chen, Novelist & Screenwriter</div>
768
+ </div>
769
+ </div>
770
+ </div>
771
+ </section>
772
+
773
+ <section class="visual-separator fade-in-up">
774
+ <div id="orbits-separator-container"></div>
775
+ </section>
776
+
777
+ <section id="about" class="section" style="padding-top: 60px; padding-bottom: 0;">
778
+ <h2 class="fade-in-up">Human-Centric AI</h2>
779
+ <p class="fade-in-up">Aura is built on the belief that technology should augment human capability, not replace it. Our mission is to democratize access to powerful AI tools, making them intuitive, accessible, and a seamless extension of your own mind. We focus on privacy, transparency, and ethical design to ensure that you are always in control.</p>
780
+ </section>
781
+
782
+ <section id="waitlist" class="section" style="padding-top: 180px; padding-bottom: 180px;">
783
+ <h3 class="fade-in-up" style="font-size: 1.8rem; margin-bottom: 30px; color: #fff;">Be the First to Experience Aura</h3>
784
+ <div class="waitlist-form-container fade-in-up">
785
+ <form id="waitlist-form">
786
+ <input type="email" name="email" placeholder="Enter your email address" required>
787
+ <button type="submit" class="cta-button">Submit</button>
788
+ </form>
789
+ </div>
790
+ </section>
791
+
792
+ </main>
793
+
794
+ <footer class="footer">
795
+ <div class="footer-content">
796
+ <div class="footer-column">
797
+ <h4>AURA</h4>
798
+ <p>AI Software, Reimagined for People.</p>
799
+ </div>
800
+ <div class="footer-column">
801
+ <h4>Product</h4>
802
+ <a href="#features">Features</a>
803
+ <a href="#">Pricing</a>
804
+ <a href="#">Integrations</a>
805
+ <a href="#">Changelog</a>
806
+ </div>
807
+ <div class="footer-column">
808
+ <h4>Company</h4>
809
+ <a href="#about">About Us</a>
810
+ <a href="#">Careers</a>
811
+ <a href="#">Contact</a>
812
+ <a href="#">Blog</a>
813
+ </div>
814
+ <div class="footer-column">
815
+ <h4>Connect</h4>
816
+ <a href="#">X / Twitter</a>
817
+ <a href="#">LinkedIn</a>
818
+ <a href="#">Discord</a>
819
+ </div>
820
+ </div>
821
+ <div class="footer-bottom">
822
+ <p>&copy; 2025 Aura Technologies. All rights reserved.</p>
823
+ </div>
824
+ </footer>
825
+
826
+ <div id="toast-message"></div>
827
+
828
+ <script>
829
+ document.addEventListener("DOMContentLoaded", function() {
830
+
831
+ function setupDynamicSubheadline() {
832
+ const subheadlineEl = document.getElementById('dynamic-subheadline');
833
+ if (!subheadlineEl) return;
834
+
835
+ const subheadlines = [
836
+ "AI Software, Reimagined for People.",
837
+ // "Your Thoughts, Amplified.",
838
+ // "Creativity's New Partner.",
839
+ // "Flow State, On Demand."
840
+ ];
841
+ let subIndex = 0;
842
+
843
+ // Set the initial text from the array
844
+ if (subheadlines.length > 0) {
845
+ subheadlineEl.textContent = subheadlines[0];
846
+ }
847
+
848
+ function changeSubheadline() {
849
+ gsap.to(subheadlineEl, {
850
+ opacity: 0,
851
+ y: -10,
852
+ duration: 0.5,
853
+ ease: 'power2.in',
854
+ onComplete: () => {
855
+ subIndex = (subIndex + 1) % subheadlines.length;
856
+ subheadlineEl.textContent = subheadlines[subIndex];
857
+ gsap.fromTo(subheadlineEl,
858
+ { opacity: 0, y: 10 },
859
+ { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out'}
860
+ );
861
+ }
862
+ });
863
+ }
864
+
865
+ // MODIFICATION: Only start the animation if there's more than one headline
866
+ if (subheadlines.length > 1) {
867
+ setInterval(changeSubheadline, 6000);
868
+ }
869
+ }
870
+
871
+ function setupBreathingSeparator() {
872
+ const separator = document.getElementById('orbits-separator-container');
873
+ if (!separator) return;
874
+
875
+ gsap.to(separator, {
876
+ scale: 1.15,
877
+ duration: 4,
878
+ repeat: -1,
879
+ yoyo: true,
880
+ ease: "sine.inOut"
881
+ });
882
+ }
883
+
884
+ setupDynamicSubheadline();
885
+ setupBreathingSeparator();
886
+
887
+ const cursor = document.querySelector('.cursor');
888
+ const cursorFollower = document.querySelector('.cursor-follower');
889
+
890
+ window.addEventListener('mousedown', () => {
891
+ cursor.classList.add('mouse-pressed');
892
+ cursorFollower.classList.add('mouse-pressed');
893
+ });
894
+ window.addEventListener('mouseup', () => {
895
+ cursor.classList.remove('mouse-pressed');
896
+ cursorFollower.classList.remove('mouse-pressed');
897
+ });
898
+
899
+ let mouseX = 0, mouseY = 0;
900
+ let followerX = 0, followerY = 0;
901
+ let speed = 0.1;
902
+ let isMoving = false;
903
+ let lastMouseX = 0;
904
+ let lastMouseY = 0;
905
+ let isHovering = false;
906
+
907
+ function animateCursor() {
908
+ const dx = mouseX - followerX;
909
+ const dy = mouseY - followerY;
910
+ const distance = Math.sqrt(dx * dx + dy * dy);
911
+ const movedX = Math.abs(mouseX - lastMouseX);
912
+ const movedY = Math.abs(mouseY - lastMouseY);
913
+ isMoving = movedX > 1 || movedY > 1;
914
+ lastMouseX = mouseX;
915
+ lastMouseY = mouseY;
916
+ const dynamicSpeed = Math.min(0.3, speed + distance * 0.005);
917
+ followerX += dx * dynamicSpeed;
918
+ followerY += dy * dynamicSpeed;
919
+ cursor.style.left = mouseX + 'px';
920
+ cursor.style.top = mouseY + 'px';
921
+ cursorFollower.style.left = followerX + 'px';
922
+ cursorFollower.style.top = followerY + 'px';
923
+
924
+ let followerSize;
925
+ if (isHovering) {
926
+ followerSize = 20;
927
+ if (isMoving) {
928
+ followerSize = 15;
929
+ }
930
+ } else {
931
+ followerSize = 40;
932
+ if (isMoving) {
933
+ followerSize = 30;
934
+ if (distance > 50) {
935
+ followerSize = 25;
936
+ }
937
+ }
938
+ }
939
+ cursorFollower.style.width = followerSize + 'px';
940
+ cursorFollower.style.height = followerSize + 'px';
941
+
942
+ requestAnimationFrame(animateCursor);
943
+ }
944
+
945
+ document.addEventListener('mousemove', (e) => {
946
+ mouseX = e.clientX;
947
+ mouseY = e.clientY;
948
+ });
949
+
950
+ document.querySelectorAll('a, button, .animation-container').forEach(el => {
951
+ el.addEventListener('mouseenter', () => {
952
+ isHovering = true;
953
+ cursor.style.transform = 'translate(-50%, -50%) scale(2)';
954
+ cursor.style.background = 'rgba(255,255,255,0.05)';
955
+ cursorFollower.style.borderColor = 'rgba(255,255,255,0.3)';
956
+ });
957
+ el.addEventListener('mouseleave', () => {
958
+ isHovering = false;
959
+ cursor.style.transform = 'translate(-50%, -50%) scale(1)';
960
+ cursor.style.background = 'rgba(255,255,255,0.3)';
961
+ cursorFollower.style.borderColor = 'rgba(255,255,255,0.2)';
962
+ });
963
+ });
964
+
965
+ animateCursor();
966
+
967
+ window.addEventListener('scroll', () => {
968
+ const scrollTop = document.documentElement.scrollTop;
969
+ const scrollHeight = document.documentElement.scrollHeight;
970
+ const clientHeight = document.documentElement.clientHeight;
971
+ const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
972
+ document.querySelector('.scroll-progress').style.width = scrollPercent + '%';
973
+ });
974
+
975
+ gsap.registerPlugin(ScrollTrigger, CustomEase);
976
+
977
+ if (!CustomEase.get("power1.inOut")) {
978
+ CustomEase.create("power1.inOut", "0.42, 0, 0.58, 1");
979
+ }
980
+
981
+ const menuTrigger = document.querySelector('.menu-trigger-container');
982
+ const menuIcon = document.querySelector('.expanding-circles-menu');
983
+ const nav = document.querySelector('.full-screen-nav');
984
+ const navLinks = nav.querySelectorAll('a');
985
+ let isMenuActive = false;
986
+
987
+ const navTimeline = gsap.timeline({ paused: true });
988
+ navTimeline.to(nav, { autoAlpha: 1, duration: 0.4, ease: 'power2.inOut' })
989
+ .to(navLinks, {
990
+ opacity: 1,
991
+ y: 0,
992
+ duration: 0.4,
993
+ stagger: 0.05,
994
+ ease: 'power2.out'
995
+ }, "-=0.2");
996
+
997
+ const circles = menuIcon.querySelectorAll(".circle:not(.extra):not(.micro)");
998
+ const extraCircles = menuIcon.querySelectorAll(".circle.extra");
999
+ const microCircles = menuIcon.querySelectorAll(".circle.micro");
1000
+
1001
+ function initMenu() {
1002
+ const centerX = 30;
1003
+ const centerY = 30;
1004
+ const radius = 15;
1005
+ circles.forEach((circle, i) => {
1006
+ const angle = (i * 60 * Math.PI) / 180;
1007
+ gsap.set(circle, {
1008
+ left: centerX + radius * Math.cos(angle),
1009
+ top: centerY + radius * Math.sin(angle),
1010
+ xPercent: -50,
1011
+ yPercent: -50
1012
+ });
1013
+ });
1014
+ gsap.set(extraCircles, { opacity: 0, scale: 0 });
1015
+ gsap.set(microCircles, { opacity: 0, scale: 0 });
1016
+ gsap.set(menuIcon, { rotation: 0 });
1017
+ }
1018
+
1019
+ function activateMenu() {
1020
+ const centerX = 30, centerY = 30, radius = 15;
1021
+ const tl = gsap.timeline();
1022
+ tl.to(menuIcon, { rotation: 360, duration: 1.2, ease: "power1.inOut" });
1023
+ extraCircles.forEach((circle, index) => {
1024
+ const angle = ((index * 60 + 30) * Math.PI) / 180;
1025
+ tl.to(circle, {
1026
+ left: centerX + radius * Math.cos(angle),
1027
+ top: centerY + radius * Math.sin(angle),
1028
+ xPercent: -50, yPercent: -50,
1029
+ opacity: 1, scale: 1,
1030
+ duration: 0.1, ease: "power1.out"
1031
+ }, 0.5);
1032
+ });
1033
+ microCircles.forEach((circle, index) => {
1034
+ const angle = (index * 30 * Math.PI) / 180;
1035
+ tl.to(circle, {
1036
+ left: centerX + radius * Math.cos(angle),
1037
+ top: centerY + radius * Math.sin(angle),
1038
+ xPercent: -50, yPercent: -50,
1039
+ opacity: 0.8, scale: 1,
1040
+ duration: 0.05, ease: "power1.out"
1041
+ }, 0.55);
1042
+ });
1043
+ tl.to([circles, extraCircles], { scale: 0.8, duration: 0.1, ease: "power1.inOut" }, 0.55);
1044
+ }
1045
+
1046
+ function deactivateMenu() {
1047
+ const tl = gsap.timeline();
1048
+ tl.to(menuIcon, { rotation: 0, duration: 1.2, ease: "power1.inOut" });
1049
+ tl.to(microCircles, { opacity: 0, scale: 0, duration: 0.2, ease: "power1.in" }, 0.3);
1050
+ tl.to([circles, extraCircles], { scale: 1, duration: 0.2, ease: "power1.out" }, 0.4);
1051
+ tl.to(extraCircles, { opacity: 0, scale: 0, duration: 0.2, ease: "power1.in", onComplete: initMenu }, 0.5);
1052
+ }
1053
+
1054
+ function toggleMenu() {
1055
+ isMenuActive = !isMenuActive;
1056
+ if (isMenuActive) {
1057
+ navTimeline.play();
1058
+ activateMenu();
1059
+ } else {
1060
+ navTimeline.reverse();
1061
+ deactivateMenu();
1062
+ }
1063
+ }
1064
+
1065
+ initMenu();
1066
+ menuTrigger.addEventListener('click', toggleMenu);
1067
+ navLinks.forEach(link => link.addEventListener('click', toggleMenu));
1068
+
1069
+ const heroContent = document.querySelector('.hero-content');
1070
+ document.querySelector('.hero').addEventListener('mousemove', (e) => {
1071
+ const { clientX, clientY } = e;
1072
+ const x = (clientX / window.innerWidth - 0.5) * 40;
1073
+ const y = (clientY / window.innerHeight - 0.5) * 40;
1074
+ gsap.to(heroContent, {
1075
+ transform: `translate(${x}px, ${y}px) rotateY(${-x/2}deg) rotateX(${y/2}deg)`,
1076
+ duration: 0.5,
1077
+ ease: 'power1.out'
1078
+ });
1079
+ });
1080
+
1081
+ const fadeUpElements = document.querySelectorAll('.fade-in-up');
1082
+ fadeUpElements.forEach(el => {
1083
+ gsap.fromTo(el, { opacity: 0, y: 30 }, {
1084
+ opacity: 1,
1085
+ y: 0,
1086
+ duration: 0.8,
1087
+ ease: 'power2.out',
1088
+ scrollTrigger: {
1089
+ trigger: el,
1090
+ start: 'top 85%',
1091
+ toggleActions: 'play none none none'
1092
+ }
1093
+ });
1094
+ });
1095
+
1096
+ const waitlistForm = document.getElementById('waitlist-form');
1097
+ const toastMessage = document.getElementById('toast-message');
1098
+ waitlistForm.addEventListener('submit', function(e) {
1099
+ e.preventDefault();
1100
+ toastMessage.textContent = 'Thank you! You have been added to the waitlist.';
1101
+ toastMessage.classList.add('show');
1102
+ setTimeout(() => {
1103
+ toastMessage.classList.remove('show');
1104
+ }, 3000);
1105
+ waitlistForm.reset();
1106
+ });
1107
+
1108
+ const MONOCHROME_FILL = (opacity) => `rgba(255, 255, 255, ${Math.max(0, Math.min(1, opacity))})`;
1109
+ function createCanvasInContainer(containerId, width = 180, height = 180) {
1110
+ const container = document.getElementById(containerId);
1111
+ if (!container) return null;
1112
+ container.innerHTML = "";
1113
+ const canvas = document.createElement("canvas");
1114
+ canvas.width = width;
1115
+ canvas.height = height;
1116
+ container.appendChild(canvas);
1117
+ return canvas.getContext("2d");
1118
+ }
1119
+
1120
+ function setupParticleBackground() {
1121
+ const container = document.getElementById('particle-bg');
1122
+ if (!container) return;
1123
+ const canvas = document.createElement('canvas');
1124
+ canvas.width = window.innerWidth;
1125
+ canvas.height = window.innerHeight;
1126
+ container.appendChild(canvas);
1127
+ const ctx = canvas.getContext('2d');
1128
+ const particles = [];
1129
+ const particleCount = Math.floor(window.innerWidth / 10);
1130
+ for (let i = 0; i < particleCount; i++) {
1131
+ particles.push({
1132
+ x: Math.random() * canvas.width,
1133
+ y: Math.random() * canvas.height,
1134
+ size: Math.random() * 3 + 1,
1135
+ speedX: Math.random() * 1 - 0.5,
1136
+ speedY: Math.random() * 1 - 0.5,
1137
+ color: `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.1})`
1138
+ });
1139
+ }
1140
+ function animate() {
1141
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
1142
+ particles.forEach(p => {
1143
+ p.x += p.speedX;
1144
+ p.y += p.speedY;
1145
+ if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
1146
+ if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
1147
+ ctx.beginPath();
1148
+ ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
1149
+ ctx.fillStyle = p.color;
1150
+ ctx.fill();
1151
+ particles.forEach(p2 => {
1152
+ const dx = p.x - p2.x;
1153
+ const dy = p.y - p2.y;
1154
+ const distance = Math.sqrt(dx * dx + dy * dy);
1155
+ if (distance < 100) {
1156
+ ctx.beginPath();
1157
+ ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance/100})`;
1158
+ ctx.lineWidth = 0.5;
1159
+ ctx.moveTo(p.x, p.y);
1160
+ ctx.lineTo(p2.x, p2.y);
1161
+ ctx.stroke();
1162
+ }
1163
+ });
1164
+ });
1165
+ requestAnimationFrame(animate);
1166
+ }
1167
+ animate();
1168
+ window.addEventListener('resize', () => {
1169
+ canvas.width = window.innerWidth;
1170
+ canvas.height = window.innerHeight;
1171
+ });
1172
+ }
1173
+
1174
+ function setupHeroCanvas() {
1175
+ const canvas = document.getElementById('hero-canvas');
1176
+ if (!canvas) return;
1177
+ const ctx = canvas.getContext('2d');
1178
+ let particles = [];
1179
+ function resizeCanvas() {
1180
+ canvas.width = window.innerWidth;
1181
+ canvas.height = window.innerHeight;
1182
+ initParticles();
1183
+ }
1184
+ function initParticles() {
1185
+ particles = [];
1186
+ const particleCount = window.innerWidth < 768 ? 100 : 250;
1187
+ const centerX = canvas.width / 2;
1188
+ const centerY = canvas.height / 2;
1189
+ const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);
1190
+ for (let i = 0; i < particleCount; i++) {
1191
+ const distance = Math.random() * maxRadius;
1192
+ const angle = Math.random() * Math.PI * 2;
1193
+ particles.push({
1194
+ size: 1 + Math.random() * 1.5,
1195
+ speed: 0.1 + Math.random() * 0.3,
1196
+ angle: angle,
1197
+ distance: distance
1198
+ });
1199
+ }
1200
+ }
1201
+ function animate() {
1202
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
1203
+ const centerX = canvas.width / 2;
1204
+ const centerY = canvas.height / 2;
1205
+ particles.forEach(p => {
1206
+ p.distance -= p.speed;
1207
+ if (p.distance <= 0) {
1208
+ p.distance = Math.sqrt(centerX * centerX + centerY * centerY);
1209
+ }
1210
+ const x = centerX + Math.cos(p.angle) * p.distance;
1211
+ const y = centerY + Math.sin(p.angle) * p.distance;
1212
+ p.angle += 0.001;
1213
+ ctx.beginPath();
1214
+ ctx.arc(x, y, p.size, 0, Math.PI * 2);
1215
+ ctx.fillStyle = MONOCHROME_FILL(1 - p.distance / (canvas.width / 2));
1216
+ ctx.fill();
1217
+ });
1218
+ requestAnimationFrame(animate);
1219
+ }
1220
+ window.addEventListener('resize', resizeCanvas);
1221
+ resizeCanvas();
1222
+ animate();
1223
+ }
1224
+
1225
+ function setupPulsatingCirclesAnimation() {
1226
+ const ctx = createCanvasInContainer("anim-understand");
1227
+ if (!ctx) return;
1228
+ const centerX = 90, centerY = 90;
1229
+ let time = 0; let lastTime = 0;
1230
+ const rings = [];
1231
+ for (let r = 0; r < 4; r++) {
1232
+ const radius = 15 + r * 15;
1233
+ const count = 6 + r * 3;
1234
+ for (let i = 0; i < count; i++) {
1235
+ rings.push({
1236
+ radius,
1237
+ count,
1238
+ index: i,
1239
+ ringIndex: r,
1240
+ sz: 3 + r * 0.3,
1241
+ opacity: (90 - r * 10) / 100,
1242
+ delay: r * 0.2 + i * 0.1
1243
+ });
1244
+ }
1245
+ }
1246
+ function animate(timestamp) {
1247
+ if (!lastTime) lastTime = timestamp;
1248
+ time += (timestamp - lastTime) * 0.001;
1249
+ lastTime = timestamp;
1250
+ ctx.clearRect(0, 0, 180, 180);
1251
+ const pulseTime = (time % 3) / 3;
1252
+ let opacity = 0, scale = 0.2;
1253
+ if(pulseTime < 0.4) {
1254
+ opacity = pulseTime / 0.4;
1255
+ scale = 0.2 + (pulseTime/0.4) * 0.8;
1256
+ } else if (pulseTime < 0.6) {
1257
+ opacity = 1;
1258
+ scale = 1;
1259
+ } else {
1260
+ opacity = 1 - ((pulseTime-0.6)/0.4);
1261
+ scale = 1 - ((pulseTime-0.6)/0.4) * 0.8;
1262
+ }
1263
+ ctx.beginPath();
1264
+ ctx.arc(centerX, centerY, 4 * scale, 0, Math.PI * 2);
1265
+ ctx.fillStyle = MONOCHROME_FILL(opacity);
1266
+ ctx.fill();
1267
+ rings.forEach(dot => {
1268
+ const angle = (dot.index / dot.count) * 2 * Math.PI;
1269
+ const x = centerX + Math.cos(angle) * dot.radius;
1270
+ const y = centerY + Math.sin(angle) * dot.radius;
1271
+ const localTime = ((time + dot.delay) % 3) / 3;
1272
+ let localOpacity = 0, localScale = 0.2;
1273
+ if(localTime < 0.4) {
1274
+ localOpacity = localTime / 0.4;
1275
+ localScale = 0.2 + (localTime/0.4) * 0.8;
1276
+ } else if (localTime < 0.6) {
1277
+ localOpacity = 1;
1278
+ localScale = 1;
1279
+ } else {
1280
+ localOpacity = 1 - ((localTime-0.6)/0.4);
1281
+ localScale = 1 - ((localTime-0.6)/0.4) * 0.8;
1282
+ }
1283
+ ctx.beginPath();
1284
+ ctx.arc(x, y, dot.sz * localScale, 0, Math.PI * 2);
1285
+ ctx.fillStyle = MONOCHROME_FILL(localOpacity * dot.opacity);
1286
+ ctx.fill();
1287
+ });
1288
+ requestAnimationFrame(animate);
1289
+ }
1290
+ requestAnimationFrame(animate);
1291
+ }
1292
+
1293
+ function setupConnectAnimation() {
1294
+ const ctx = createCanvasInContainer("anim-connect");
1295
+ if (!ctx) return;
1296
+ const centerX = 90, centerY = 90;
1297
+ let time = 0; let lastTime = 0;
1298
+ const dotCount = 20, rowCount = 5, spacing = 15;
1299
+ function animate(timestamp) {
1300
+ if (!lastTime) lastTime = timestamp;
1301
+ time += (timestamp - lastTime) * 0.001;
1302
+ lastTime = timestamp;
1303
+ ctx.clearRect(0, 0, 180, 180);
1304
+ for (let row = 0; row < rowCount; row++) {
1305
+ const y = centerY - ((rowCount - 1) / 2) * spacing + row * spacing;
1306
+ for (let i = 0; i < dotCount; i++) {
1307
+ const baseX = centerX - ((dotCount - 1) / 2) * 8 + i * 8;
1308
+ const amplitude = 4 + row * 2;
1309
+ const frequency = 1 + row * 0.2;
1310
+ const phaseOffset = row * 0.5;
1311
+ const offset = Math.sin(time * frequency + i * 0.2 + phaseOffset) * amplitude;
1312
+ const finalY = y + offset;
1313
+ ctx.beginPath();
1314
+ ctx.arc(baseX, finalY, 2, 0, Math.PI * 2);
1315
+ ctx.fillStyle = MONOCHROME_FILL(0.9);
1316
+ ctx.fill();
1317
+ }
1318
+ }
1319
+ requestAnimationFrame(animate);
1320
+ }
1321
+ requestAnimationFrame(animate);
1322
+ }
1323
+
1324
+ function setupHarmonizeAnimation() {
1325
+ const ctx = createCanvasInContainer("anim-harmonize");
1326
+ if (!ctx) return;
1327
+ const centerX = 90, centerY = 90;
1328
+ let time = 0; let lastTime = 0;
1329
+ const pendulumCount = 15, baseFrequency = 0.5, pendulumLength = 70, maxAngle = Math.PI / 12;
1330
+ function animate(timestamp) {
1331
+ if (!lastTime) lastTime = timestamp;
1332
+ time += (timestamp - lastTime) * 0.001;
1333
+ lastTime = timestamp;
1334
+ ctx.clearRect(0, 0, 180, 180);
1335
+ const angle = Math.sin(time * baseFrequency * Math.PI) * maxAngle;
1336
+ for (let i = 0; i < pendulumCount; i++) {
1337
+ const pendulumX = centerX - pendulumCount * 4 + i * 8;
1338
+ const pendulumY = centerY - pendulumLength + 20;
1339
+ const bobX = pendulumX + Math.sin(angle) * pendulumLength;
1340
+ const bobY = pendulumY + Math.cos(angle) * pendulumLength;
1341
+ ctx.beginPath(); ctx.moveTo(pendulumX, pendulumY); ctx.lineTo(bobX, bobY); ctx.strokeStyle = MONOCHROME_FILL(0.4); ctx.lineWidth = 1; ctx.stroke();
1342
+ ctx.beginPath(); ctx.arc(bobX, bobY, 3, 0, Math.PI * 2); ctx.fillStyle = MONOCHROME_FILL(0.9); ctx.fill();
1343
+ }
1344
+ requestAnimationFrame(animate);
1345
+ }
1346
+ requestAnimationFrame(animate);
1347
+ }
1348
+
1349
+ function setupImproveAnimation() {
1350
+ const ctx = createCanvasInContainer("anim-improve");
1351
+ if (!ctx) return;
1352
+ const centerX = 90, centerY = 90;
1353
+ let time = 0; let lastTime = 0;
1354
+ const gridSize = 5, spacing = 25;
1355
+ function animate(timestamp) {
1356
+ if (!lastTime) lastTime = timestamp;
1357
+ time += (timestamp - lastTime) * 0.001;
1358
+ lastTime = timestamp;
1359
+ ctx.clearRect(0, 0, 180, 180);
1360
+ const breathingFactor = Math.sin(time * 0.5) * 0.2 + 1.0;
1361
+ for (let row = 0; row < gridSize; row++) {
1362
+ for (let col = 0; col < gridSize; col++) {
1363
+ if (row === Math.floor(gridSize / 2) && col === Math.floor(gridSize / 2)) continue;
1364
+ const baseX = (col - (gridSize - 1) / 2) * spacing;
1365
+ const baseY = (row - (gridSize - 1) / 2) * spacing;
1366
+ const distance = Math.sqrt(baseX * baseX + baseY * baseY);
1367
+ const maxDistance = (spacing * Math.sqrt(2) * (gridSize - 1)) / 2;
1368
+ const normalizedDistance = distance / maxDistance;
1369
+ const breathingX = baseX * breathingFactor;
1370
+ const breathingY = baseY * breathingFactor;
1371
+ const waveX = centerX + breathingX;
1372
+ const waveY = centerY + breathingY;
1373
+ const baseSize = 1.5 + (1 - normalizedDistance) * 1.5;
1374
+ const pulseFactor = Math.sin(time * 2 + normalizedDistance * 5) * 0.6 + 1;
1375
+ const size = baseSize * pulseFactor;
1376
+ const opacity = 0.5 + Math.sin(time * 1.5 + distance * 0.1) * 0.2 + normalizedDistance * 0.3;
1377
+ ctx.beginPath();
1378
+ ctx.arc(waveX, waveY, size, 0, Math.PI * 2);
1379
+ ctx.fillStyle = MONOCHROME_FILL(opacity);
1380
+ ctx.fill();
1381
+ }
1382
+ }
1383
+ ctx.beginPath(); ctx.arc(centerX, centerY, 3, 0, Math.PI * 2); ctx.fillStyle = MONOCHROME_FILL(0.9); ctx.fill();
1384
+ requestAnimationFrame(animate);
1385
+ }
1386
+ requestAnimationFrame(animate);
1387
+ }
1388
+
1389
+ function setupRotatingOrbitsSeparator() {
1390
+ const container = document.getElementById('orbits-separator-container');
1391
+ if(!container) return;
1392
+ container.innerHTML = "";
1393
+ const centerDot = document.createElement("div");
1394
+ centerDot.className = "dot";
1395
+ centerDot.style.position = "absolute";
1396
+ centerDot.style.width = "8px";
1397
+ centerDot.style.height = "8px";
1398
+ centerDot.style.left = "calc(50% - 4px)";
1399
+ centerDot.style.top = "calc(50% - 4px)";
1400
+ centerDot.style.background = "#fff";
1401
+ centerDot.style.borderRadius = "50%";
1402
+ container.appendChild(centerDot);
1403
+ for (let r = 0; r < 3; r++) {
1404
+ const orbitContainer = document.createElement("div");
1405
+ orbitContainer.className = "orbit-container";
1406
+ orbitContainer.style.animationDuration = `${8 + r * 4}s`;
1407
+ orbitContainer.style.animationDirection = r % 2 ? "reverse" : "normal";
1408
+ const radius = 20 + r * 20, count = 6 + r * 3;
1409
+ for (let i = 0; i < count; i++) {
1410
+ const dot = document.createElement("div");
1411
+ dot.className = "dot";
1412
+ const angle = (i / count) * 2 * Math.PI;
1413
+ const x = Math.cos(angle) * radius, y = Math.sin(angle) * radius;
1414
+ const sz = 4 - r * 0.5;
1415
+ dot.style.width = dot.style.height = `${sz}px`;
1416
+ dot.style.left = `calc(50% + ${x}px - ${sz / 2}px)`;
1417
+ dot.style.top = `calc(50% + ${y}px - ${sz / 2}px)`;
1418
+ dot.style.background = `rgba(255,255,255,${(90 - r * 15) / 100})`;
1419
+ orbitContainer.appendChild(dot);
1420
+ }
1421
+ container.appendChild(orbitContainer);
1422
+ }
1423
+ }
1424
+
1425
+ setupParticleBackground();
1426
+ setupHeroCanvas();
1427
+ setupPulsatingCirclesAnimation();
1428
+ setupConnectAnimation();
1429
+ setupHarmonizeAnimation();
1430
+ setupImproveAnimation();
1431
+ setupRotatingOrbitsSeparator();
1432
+ });
1433
+ </script>
1434
+
1435
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MultiTrickFox/aura" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1436
+ </html>