Spaces:
Running
Running
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- README.md +7 -5
- index.html +1436 -19
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
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 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>© 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>
|