Skip to content

Commit d83e632

Browse files
guofooguofoo
committed
add hero animation`
1 parent 67c1f90 commit d83e632

3 files changed

Lines changed: 316 additions & 0 deletions

File tree

‎src/components/widgets/Hero.astro‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,22 @@ const image = Astro.props.image;
3636
<div class="hero-orb hero-orb-center"></div>
3737
</div>
3838

39+
<!-- Ripple effect - multiple centers -->
40+
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
41+
<div class="ripple-origin ripple-origin-1">
42+
<div class="hero-ripple hero-ripple-a"></div>
43+
<div class="hero-ripple hero-ripple-b"></div>
44+
</div>
45+
<div class="ripple-origin ripple-origin-2">
46+
<div class="hero-ripple hero-ripple-a"></div>
47+
<div class="hero-ripple hero-ripple-b"></div>
48+
</div>
49+
<div class="ripple-origin ripple-origin-3">
50+
<div class="hero-ripple hero-ripple-a"></div>
51+
<div class="hero-ripple hero-ripple-b"></div>
52+
</div>
53+
</div>
54+
3955
<!-- Decorative grid pattern -->
4056
<div class="absolute inset-0 pointer-events-none hero-grid" aria-hidden="true"></div>
4157

@@ -205,6 +221,94 @@ const image = Astro.props.image;
205221
opacity: 0.05;
206222
}
207223

224+
/* Ripple effect - multiple origins */
225+
.ripple-origin {
226+
position: absolute;
227+
width: 0;
228+
height: 0;
229+
}
230+
231+
.ripple-origin-1 {
232+
top: 25%;
233+
left: 20%;
234+
animation: origin-fade 12s ease-in-out infinite;
235+
}
236+
237+
.ripple-origin-2 {
238+
top: 65%;
239+
right: 15%;
240+
left: auto;
241+
animation: origin-fade 12s ease-in-out infinite;
242+
animation-delay: -4s;
243+
}
244+
245+
.ripple-origin-3 {
246+
top: 45%;
247+
left: 55%;
248+
animation: origin-fade 12s ease-in-out infinite;
249+
animation-delay: -8s;
250+
}
251+
252+
.hero-ripple {
253+
position: absolute;
254+
top: 0;
255+
left: 0;
256+
transform: translate(-50%, -50%) scale(0);
257+
width: min(600px, 70vw);
258+
height: min(600px, 70vw);
259+
border-radius: 50%;
260+
border: 2px solid rgba(43, 116, 255, 0.4);
261+
box-shadow: 0 0 20px rgba(43, 116, 255, 0.2), inset 0 0 20px rgba(43, 116, 255, 0.1);
262+
animation: ripple-expand 6s ease-out infinite;
263+
}
264+
265+
.hero-ripple-a {
266+
animation-delay: 0s;
267+
}
268+
269+
.hero-ripple-b {
270+
animation-delay: 3s;
271+
border-color: rgba(0, 200, 150, 0.35);
272+
box-shadow: 0 0 20px rgba(0, 200, 150, 0.2), inset 0 0 20px rgba(0, 200, 150, 0.1);
273+
}
274+
275+
.ripple-origin-1 .hero-ripple-a { animation-delay: 0s; }
276+
.ripple-origin-1 .hero-ripple-b { animation-delay: 3s; }
277+
.ripple-origin-2 .hero-ripple-a { animation-delay: 2s; }
278+
.ripple-origin-2 .hero-ripple-b { animation-delay: 5s; }
279+
.ripple-origin-3 .hero-ripple-a { animation-delay: 4s; }
280+
.ripple-origin-3 .hero-ripple-b { animation-delay: 1s; }
281+
282+
:global(.dark) .hero-ripple {
283+
border-color: rgba(77, 142, 255, 0.5);
284+
box-shadow: 0 0 25px rgba(77, 142, 255, 0.3), inset 0 0 25px rgba(77, 142, 255, 0.15);
285+
}
286+
287+
:global(.dark) .hero-ripple-b {
288+
border-color: rgba(0, 220, 170, 0.45);
289+
box-shadow: 0 0 25px rgba(0, 220, 170, 0.3), inset 0 0 25px rgba(0, 220, 170, 0.15);
290+
}
291+
292+
@keyframes ripple-expand {
293+
0% {
294+
transform: translate(-50%, -50%) scale(0);
295+
opacity: 1;
296+
}
297+
100% {
298+
transform: translate(-50%, -50%) scale(2);
299+
opacity: 0;
300+
}
301+
}
302+
303+
@keyframes origin-fade {
304+
0%, 100% {
305+
opacity: 1;
306+
}
307+
50% {
308+
opacity: 0.3;
309+
}
310+
}
311+
208312
/* Bottom fade */
209313
.hero-bottom-fade {
210314
position: absolute;

‎src/components/widgets/HeroSplash.astro‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,25 @@ const {
3535
<div class="hero-orb hero-orb-center"></div>
3636
</div>
3737

38+
<!-- Ripple effect - multiple centers -->
39+
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
40+
<!-- Ripple center 1 - top left area -->
41+
<div class="ripple-origin ripple-origin-1">
42+
<div class="hero-ripple hero-ripple-a"></div>
43+
<div class="hero-ripple hero-ripple-b"></div>
44+
</div>
45+
<!-- Ripple center 2 - bottom right area -->
46+
<div class="ripple-origin ripple-origin-2">
47+
<div class="hero-ripple hero-ripple-a"></div>
48+
<div class="hero-ripple hero-ripple-b"></div>
49+
</div>
50+
<!-- Ripple center 3 - center area -->
51+
<div class="ripple-origin ripple-origin-3">
52+
<div class="hero-ripple hero-ripple-a"></div>
53+
<div class="hero-ripple hero-ripple-b"></div>
54+
</div>
55+
</div>
56+
3857
<!-- Decorative grid pattern -->
3958
<div class="absolute inset-0 pointer-events-none hero-grid" aria-hidden="true"></div>
4059

@@ -205,6 +224,95 @@ const {
205224
opacity: 0.05;
206225
}
207226

227+
/* Ripple effect - multiple origins */
228+
.ripple-origin {
229+
position: absolute;
230+
width: 0;
231+
height: 0;
232+
}
233+
234+
.ripple-origin-1 {
235+
top: 25%;
236+
left: 20%;
237+
animation: origin-fade 12s ease-in-out infinite;
238+
}
239+
240+
.ripple-origin-2 {
241+
top: 65%;
242+
right: 15%;
243+
left: auto;
244+
animation: origin-fade 12s ease-in-out infinite;
245+
animation-delay: -4s;
246+
}
247+
248+
.ripple-origin-3 {
249+
top: 45%;
250+
left: 55%;
251+
animation: origin-fade 12s ease-in-out infinite;
252+
animation-delay: -8s;
253+
}
254+
255+
.hero-ripple {
256+
position: absolute;
257+
top: 0;
258+
left: 0;
259+
transform: translate(-50%, -50%) scale(0);
260+
width: min(600px, 70vw);
261+
height: min(600px, 70vw);
262+
border-radius: 50%;
263+
border: 2px solid rgba(43, 116, 255, 0.4);
264+
box-shadow: 0 0 20px rgba(43, 116, 255, 0.2), inset 0 0 20px rgba(43, 116, 255, 0.1);
265+
animation: ripple-expand 6s ease-out infinite;
266+
}
267+
268+
.hero-ripple-a {
269+
animation-delay: 0s;
270+
}
271+
272+
.hero-ripple-b {
273+
animation-delay: 3s;
274+
border-color: rgba(0, 200, 150, 0.35);
275+
box-shadow: 0 0 20px rgba(0, 200, 150, 0.2), inset 0 0 20px rgba(0, 200, 150, 0.1);
276+
}
277+
278+
/* Stagger each origin's ripples differently */
279+
.ripple-origin-1 .hero-ripple-a { animation-delay: 0s; }
280+
.ripple-origin-1 .hero-ripple-b { animation-delay: 3s; }
281+
.ripple-origin-2 .hero-ripple-a { animation-delay: 2s; }
282+
.ripple-origin-2 .hero-ripple-b { animation-delay: 5s; }
283+
.ripple-origin-3 .hero-ripple-a { animation-delay: 4s; }
284+
.ripple-origin-3 .hero-ripple-b { animation-delay: 1s; }
285+
286+
:global(.dark) .hero-ripple {
287+
border-color: rgba(77, 142, 255, 0.5);
288+
box-shadow: 0 0 25px rgba(77, 142, 255, 0.3), inset 0 0 25px rgba(77, 142, 255, 0.15);
289+
}
290+
291+
:global(.dark) .hero-ripple-b {
292+
border-color: rgba(0, 220, 170, 0.45);
293+
box-shadow: 0 0 25px rgba(0, 220, 170, 0.3), inset 0 0 25px rgba(0, 220, 170, 0.15);
294+
}
295+
296+
@keyframes ripple-expand {
297+
0% {
298+
transform: translate(-50%, -50%) scale(0);
299+
opacity: 1;
300+
}
301+
100% {
302+
transform: translate(-50%, -50%) scale(2);
303+
opacity: 0;
304+
}
305+
}
306+
307+
@keyframes origin-fade {
308+
0%, 100% {
309+
opacity: 1;
310+
}
311+
50% {
312+
opacity: 0.3;
313+
}
314+
}
315+
208316
/* Tagline badge */
209317
.hero-tagline {
210318
display: inline-block;

‎src/components/widgets/HeroText.astro‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,22 @@ const {
3131
<div class="hero-orb hero-orb-center"></div>
3232
</div>
3333

34+
<!-- Ripple effect - multiple centers -->
35+
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
36+
<div class="ripple-origin ripple-origin-1">
37+
<div class="hero-ripple hero-ripple-a"></div>
38+
<div class="hero-ripple hero-ripple-b"></div>
39+
</div>
40+
<div class="ripple-origin ripple-origin-2">
41+
<div class="hero-ripple hero-ripple-a"></div>
42+
<div class="hero-ripple hero-ripple-b"></div>
43+
</div>
44+
<div class="ripple-origin ripple-origin-3">
45+
<div class="hero-ripple hero-ripple-a"></div>
46+
<div class="hero-ripple hero-ripple-b"></div>
47+
</div>
48+
</div>
49+
3450
<!-- Decorative grid pattern -->
3551
<div class="absolute inset-0 pointer-events-none hero-grid" aria-hidden="true"></div>
3652

@@ -187,6 +203,94 @@ const {
187203
opacity: 0.05;
188204
}
189205

206+
/* Ripple effect - multiple origins */
207+
.ripple-origin {
208+
position: absolute;
209+
width: 0;
210+
height: 0;
211+
}
212+
213+
.ripple-origin-1 {
214+
top: 25%;
215+
left: 20%;
216+
animation: origin-fade 12s ease-in-out infinite;
217+
}
218+
219+
.ripple-origin-2 {
220+
top: 65%;
221+
right: 15%;
222+
left: auto;
223+
animation: origin-fade 12s ease-in-out infinite;
224+
animation-delay: -4s;
225+
}
226+
227+
.ripple-origin-3 {
228+
top: 45%;
229+
left: 55%;
230+
animation: origin-fade 12s ease-in-out infinite;
231+
animation-delay: -8s;
232+
}
233+
234+
.hero-ripple {
235+
position: absolute;
236+
top: 0;
237+
left: 0;
238+
transform: translate(-50%, -50%) scale(0);
239+
width: min(600px, 70vw);
240+
height: min(600px, 70vw);
241+
border-radius: 50%;
242+
border: 2px solid rgba(43, 116, 255, 0.4);
243+
box-shadow: 0 0 20px rgba(43, 116, 255, 0.2), inset 0 0 20px rgba(43, 116, 255, 0.1);
244+
animation: ripple-expand 6s ease-out infinite;
245+
}
246+
247+
.hero-ripple-a {
248+
animation-delay: 0s;
249+
}
250+
251+
.hero-ripple-b {
252+
animation-delay: 3s;
253+
border-color: rgba(0, 200, 150, 0.35);
254+
box-shadow: 0 0 20px rgba(0, 200, 150, 0.2), inset 0 0 20px rgba(0, 200, 150, 0.1);
255+
}
256+
257+
.ripple-origin-1 .hero-ripple-a { animation-delay: 0s; }
258+
.ripple-origin-1 .hero-ripple-b { animation-delay: 3s; }
259+
.ripple-origin-2 .hero-ripple-a { animation-delay: 2s; }
260+
.ripple-origin-2 .hero-ripple-b { animation-delay: 5s; }
261+
.ripple-origin-3 .hero-ripple-a { animation-delay: 4s; }
262+
.ripple-origin-3 .hero-ripple-b { animation-delay: 1s; }
263+
264+
:global(.dark) .hero-ripple {
265+
border-color: rgba(77, 142, 255, 0.5);
266+
box-shadow: 0 0 25px rgba(77, 142, 255, 0.3), inset 0 0 25px rgba(77, 142, 255, 0.15);
267+
}
268+
269+
:global(.dark) .hero-ripple-b {
270+
border-color: rgba(0, 220, 170, 0.45);
271+
box-shadow: 0 0 25px rgba(0, 220, 170, 0.3), inset 0 0 25px rgba(0, 220, 170, 0.15);
272+
}
273+
274+
@keyframes ripple-expand {
275+
0% {
276+
transform: translate(-50%, -50%) scale(0);
277+
opacity: 1;
278+
}
279+
100% {
280+
transform: translate(-50%, -50%) scale(2);
281+
opacity: 0;
282+
}
283+
}
284+
285+
@keyframes origin-fade {
286+
0%, 100% {
287+
opacity: 1;
288+
}
289+
50% {
290+
opacity: 0.3;
291+
}
292+
}
293+
190294
/* Bottom fade */
191295
.hero-bottom-fade {
192296
position: absolute;

0 commit comments

Comments
 (0)