Hugging Face's logo

Spaces:
exptech
/
g1-moves
Running

App Files Community
1
exptech commited on
Commit
49132ae
·
verified ·
1 Parent(s): 81434ab

Brighter tropical cloud waves with more motion

Browse files
Files changed (1) hide show
  1. style.css +88 -64
style.css CHANGED
@@ -59,57 +59,68 @@ body {
59
  content: '';
60
  position: absolute;
61
  border-radius: 50%;
62
- filter: blur(120px);
63
  will-change: transform;
64
  }
65
 
66
  .tropical-clouds::before {
67
- width: 600px;
68
- height: 600px;
69
- background: radial-gradient(circle, #FF6B6B 0%, transparent 70%);
70
- top: -10%;
71
- left: -5%;
72
- opacity: 0.18;
73
- animation: cloud-drift-1 45s ease-in-out infinite;
74
  }
75
 
76
  .tropical-clouds::after {
77
- width: 500px;
78
- height: 500px;
79
- background: radial-gradient(circle, #4ECDC4 0%, transparent 70%);
80
- top: 20%;
81
- right: -8%;
82
- opacity: 0.15;
83
- animation: cloud-drift-2 38s ease-in-out infinite;
84
  }
85
 
86
  .cloud-blob-1,
87
- .cloud-blob-2 {
 
88
  position: absolute;
89
  border-radius: 50%;
90
- filter: blur(120px);
91
  will-change: transform;
92
  pointer-events: none;
93
  }
94
 
95
  .cloud-blob-1 {
96
- width: 550px;
97
- height: 550px;
98
- background: radial-gradient(circle, #FFE66D 0%, transparent 70%);
99
- bottom: 10%;
100
- left: 30%;
101
- opacity: 0.14;
102
- animation: cloud-drift-3 52s ease-in-out infinite;
103
  }
104
 
105
  .cloud-blob-2 {
106
- width: 480px;
107
- height: 480px;
108
- background: radial-gradient(circle, #A78BFA 0%, transparent 70%);
109
- top: 50%;
110
- right: 15%;
111
- opacity: 0.12;
112
- animation: cloud-drift-4 42s ease-in-out infinite;
 
 
 
 
 
 
 
 
 
 
113
  }
114
 
115
  /* Fade clouds below the hero */
@@ -121,42 +132,55 @@ body {
121
  background: linear-gradient(
122
  to bottom,
123
  transparent 0%,
124
- transparent 30%,
125
- rgba(7, 7, 11, 0.5) 60%,
126
- rgba(7, 7, 11, 0.75) 100%
127
  );
128
  }
129
 
130
- @keyframes cloud-drift-1 {
131
- 0% { transform: translate(0, 0) scale(1); }
132
- 25% { transform: translate(80px, 40px) scale(1.1); }
133
- 50% { transform: translate(30px, 80px) scale(0.95); }
134
- 75% { transform: translate(-50px, 30px) scale(1.05); }
135
- 100% { transform: translate(0, 0) scale(1); }
136
- }
137
-
138
- @keyframes cloud-drift-2 {
139
- 0% { transform: translate(0, 0) scale(1); }
140
- 25% { transform: translate(-60px, 50px) scale(1.08); }
141
- 50% { transform: translate(-30px, -40px) scale(0.92); }
142
- 75% { transform: translate(40px, 20px) scale(1.12); }
143
- 100% { transform: translate(0, 0) scale(1); }
144
- }
145
-
146
- @keyframes cloud-drift-3 {
147
- 0% { transform: translate(0, 0) scale(1); }
148
- 25% { transform: translate(50px, -60px) scale(1.15); }
149
- 50% { transform: translate(-40px, -20px) scale(0.9); }
150
- 75% { transform: translate(20px, 50px) scale(1.05); }
151
- 100% { transform: translate(0, 0) scale(1); }
152
- }
153
-
154
- @keyframes cloud-drift-4 {
155
- 0% { transform: translate(0, 0) scale(1); }
156
- 25% { transform: translate(-70px, -30px) scale(1.1); }
157
- 50% { transform: translate(50px, 40px) scale(0.95); }
158
- 75% { transform: translate(-20px, -50px) scale(1.08); }
159
- 100% { transform: translate(0, 0) scale(1); }
 
 
 
 
 
 
 
 
 
 
 
 
 
160
  }
161
 
162
  ::selection {
 
59
  content: '';
60
  position: absolute;
61
  border-radius: 50%;
62
+ filter: blur(90px);
63
  will-change: transform;
64
  }
65
 
66
  .tropical-clouds::before {
67
+ width: 800px;
68
+ height: 700px;
69
+ background: radial-gradient(ellipse, #0ea5e9 0%, #06b6d4 30%, transparent 70%);
70
+ top: -15%;
71
+ left: -10%;
72
+ opacity: 0.35;
73
+ animation: cloud-wave-1 20s ease-in-out infinite;
74
  }
75
 
76
  .tropical-clouds::after {
77
+ width: 700px;
78
+ height: 600px;
79
+ background: radial-gradient(ellipse, #22d3ee 0%, #67e8f9 25%, transparent 70%);
80
+ top: 10%;
81
+ right: -12%;
82
+ opacity: 0.3;
83
+ animation: cloud-wave-2 16s ease-in-out infinite;
84
  }
85
 
86
  .cloud-blob-1,
87
+ .cloud-blob-2,
88
+ .cloud-blob-3 {
89
  position: absolute;
90
  border-radius: 50%;
91
+ filter: blur(90px);
92
  will-change: transform;
93
  pointer-events: none;
94
  }
95
 
96
  .cloud-blob-1 {
97
+ width: 750px;
98
+ height: 650px;
99
+ background: radial-gradient(ellipse, #38bdf8 0%, #7dd3fc 30%, transparent 70%);
100
+ bottom: 5%;
101
+ left: 20%;
102
+ opacity: 0.28;
103
+ animation: cloud-wave-3 24s ease-in-out infinite;
104
  }
105
 
106
  .cloud-blob-2 {
107
+ width: 600px;
108
+ height: 550px;
109
+ background: radial-gradient(ellipse, #a78bfa 0%, #c4b5fd 25%, transparent 70%);
110
+ top: 40%;
111
+ right: 5%;
112
+ opacity: 0.22;
113
+ animation: cloud-wave-4 18s ease-in-out infinite;
114
+ }
115
+
116
+ .cloud-blob-3 {
117
+ width: 650px;
118
+ height: 500px;
119
+ background: radial-gradient(ellipse, #2dd4bf 0%, #5eead4 30%, transparent 70%);
120
+ top: 60%;
121
+ left: -5%;
122
+ opacity: 0.25;
123
+ animation: cloud-wave-5 22s ease-in-out infinite;
124
  }
125
 
126
  /* Fade clouds below the hero */
 
132
  background: linear-gradient(
133
  to bottom,
134
  transparent 0%,
135
+ transparent 25%,
136
+ rgba(7, 7, 11, 0.4) 55%,
137
+ rgba(7, 7, 11, 0.7) 100%
138
  );
139
  }
140
 
141
+ @keyframes cloud-wave-1 {
142
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
143
+ 20% { transform: translate(120px, 30px) scale(1.15) rotate(2deg); }
144
+ 40% { transform: translate(60px, 80px) scale(0.9) rotate(-1deg); }
145
+ 60% { transform: translate(-80px, 50px) scale(1.1) rotate(3deg); }
146
+ 80% { transform: translate(-40px, -20px) scale(1.05) rotate(-2deg); }
147
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
148
+ }
149
+
150
+ @keyframes cloud-wave-2 {
151
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
152
+ 20% { transform: translate(-100px, 60px) scale(1.12) rotate(-3deg); }
153
+ 40% { transform: translate(-50px, -50px) scale(0.88) rotate(2deg); }
154
+ 60% { transform: translate(70px, 30px) scale(1.18) rotate(-1deg); }
155
+ 80% { transform: translate(30px, -30px) scale(0.95) rotate(3deg); }
156
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
157
+ }
158
+
159
+ @keyframes cloud-wave-3 {
160
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
161
+ 20% { transform: translate(80px, -70px) scale(1.2) rotate(2deg); }
162
+ 40% { transform: translate(-60px, -30px) scale(0.85) rotate(-3deg); }
163
+ 60% { transform: translate(40px, 60px) scale(1.1) rotate(1deg); }
164
+ 80% { transform: translate(-30px, 20px) scale(1.05) rotate(-2deg); }
165
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
166
+ }
167
+
168
+ @keyframes cloud-wave-4 {
169
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
170
+ 20% { transform: translate(-90px, -40px) scale(1.15) rotate(-2deg); }
171
+ 40% { transform: translate(60px, 50px) scale(0.9) rotate(3deg); }
172
+ 60% { transform: translate(-30px, -60px) scale(1.12) rotate(-1deg); }
173
+ 80% { transform: translate(50px, 30px) scale(0.95) rotate(2deg); }
174
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
175
+ }
176
+
177
+ @keyframes cloud-wave-5 {
178
+ 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
179
+ 20% { transform: translate(100px, 40px) scale(1.1) rotate(3deg); }
180
+ 40% { transform: translate(-40px, 70px) scale(0.92) rotate(-2deg); }
181
+ 60% { transform: translate(60px, -30px) scale(1.15) rotate(1deg); }
182
+ 80% { transform: translate(-70px, 20px) scale(1.02) rotate(-3deg); }
183
+ 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
184
  }
185
 
186
  ::selection {