Skip to content

Commit e780ee5

Browse files
stratdev3stratdev3
committed
feature(documentation): improve animated logo
1 parent 68944e2 commit e780ee5

1 file changed

Lines changed: 111 additions & 29 deletions

File tree

‎documentation/simplew/docs/.vitepress/theme/components/AnimatedLogo.vue‎

Lines changed: 111 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@
128128
--routing-hit-x: calc(var(--belt-routing) / 2);
129129
130130
--dot: 7px;
131+
--req-idle: #94a3b8;
131132
132133
--violet: #8b5cf6;
133134
--violet-2: #a855f7;
@@ -477,36 +478,117 @@
477478
box-shadow: 0 0 10px currentColor;
478479
}
479480
480-
.pass { color: var(--cyan); }
481-
.route { color: var(--routing-main); }
482-
.block-fw { color: var(--fw-main); }
483-
.block-auth { color: var(--auth-main); }
481+
.pass { --req-active: var(--cyan); }
482+
.route { --req-active: var(--routing-main); }
483+
.block-fw { --req-active: var(--fw-main); }
484+
.block-auth { --req-active: var(--auth-main); }
484485
485486
/* particle bindings */
486-
.p1 { color: var(--violet); animation: pass-1 1.9s linear infinite; }
487-
.p2 { color: var(--cyan); animation: pass-2 1.4s linear infinite; }
488-
.p3 { color: var(--violet-2); animation: pass-3 2.1s linear infinite; }
489-
.p4 { color: var(--cyan-2); animation: pass-4 1.6s linear infinite; }
490-
.p5 { color: var(--violet); animation: pass-5 2.4s linear infinite; }
491-
.p6 { color: var(--cyan); animation: pass-6 1.3s linear infinite; }
492-
.p7 { color: var(--violet-2); animation: pass-7 1.8s linear infinite; }
493-
.p8 { color: var(--cyan-2); animation: pass-8 2.2s linear infinite; }
494-
.p9 { color: var(--violet); animation: pass-9 1.5s linear infinite; }
495-
.p10 { color: var(--cyan); animation: pass-10 2s linear infinite; }
496-
.p11 { color: var(--cyan-2); animation: pass-11 1.7s linear infinite; }
497-
.p12 { color: var(--violet-2); animation: pass-12 2.5s linear infinite; }
498-
499-
.r1 { animation: route-1 4.2s linear infinite; }
500-
.r2 { animation: route-2 5.4s linear infinite; }
501-
.r3 { animation: route-3 6.1s linear infinite; }
502-
503-
.fw1 { animation: block-fw-1 4.8s linear infinite; }
504-
.fw2 { animation: block-fw-2 6.3s linear infinite; }
505-
.fw3 { animation: block-fw-3 7.4s linear infinite; }
506-
507-
.a1 { animation: block-auth-1 5.2s linear infinite; }
508-
.a2 { animation: block-auth-2 6.8s linear infinite; }
509-
.a3 { animation: block-auth-3 8.1s linear infinite; }
487+
.p1 { --req-active: var(--violet); animation: pass-1 1.9s linear infinite, color-at-42 1.9s linear infinite; }
488+
.p2 { --req-active: var(--cyan); animation: pass-2 1.4s linear infinite, color-at-40 1.4s linear infinite; }
489+
.p3 { --req-active: var(--violet-2); animation: pass-3 2.1s linear infinite, color-at-45 2.1s linear infinite; }
490+
.p4 { --req-active: var(--cyan-2); animation: pass-4 1.6s linear infinite, color-at-44 1.6s linear infinite; }
491+
.p5 { --req-active: var(--violet); animation: pass-5 2.4s linear infinite, color-at-49 2.4s linear infinite; }
492+
.p6 { --req-active: var(--cyan); animation: pass-6 1.3s linear infinite, color-at-39 1.3s linear infinite; }
493+
.p7 { --req-active: var(--violet-2); animation: pass-7 1.8s linear infinite, color-at-52 1.8s linear infinite; }
494+
.p8 { --req-active: var(--cyan-2); animation: pass-8 2.2s linear infinite, color-at-54 2.2s linear infinite; }
495+
.p9 { --req-active: var(--violet); animation: pass-9 1.5s linear infinite, color-at-46 1.5s linear infinite; }
496+
.p10 { --req-active: var(--cyan); animation: pass-10 2s linear infinite, color-at-48 2s linear infinite; }
497+
.p11 { --req-active: var(--cyan-2); animation: pass-11 1.7s linear infinite, color-at-42 1.7s linear infinite; }
498+
.p12 { --req-active: var(--violet-2); animation: pass-12 2.5s linear infinite, color-at-50 2.5s linear infinite; }
499+
500+
.r1 { animation: route-1 4.2s linear infinite, color-at-52 4.2s linear infinite; }
501+
.r2 { animation: route-2 5.4s linear infinite, color-at-58 5.4s linear infinite; }
502+
.r3 { animation: route-3 6.1s linear infinite, color-at-68 6.1s linear infinite; }
503+
504+
.fw1 { animation: block-fw-1 4.8s linear infinite, color-at-50 4.8s linear infinite; }
505+
.fw2 { animation: block-fw-2 6.3s linear infinite, color-at-56 6.3s linear infinite; }
506+
.fw3 { animation: block-fw-3 7.4s linear infinite, color-at-62 7.4s linear infinite; }
507+
508+
.a1 { animation: block-auth-1 5.2s linear infinite, color-at-52 5.2s linear infinite; }
509+
.a2 { animation: block-auth-2 6.8s linear infinite, color-at-58 6.8s linear infinite; }
510+
.a3 { animation: block-auth-3 8.1s linear infinite, color-at-64 8.1s linear infinite; }
511+
512+
/* particles start neutral, then adopt the color of the ring they touch */
513+
@keyframes color-at-39 {
514+
0%, 38.9% { color: var(--req-idle); }
515+
39%, 100% { color: var(--req-active); }
516+
}
517+
518+
@keyframes color-at-40 {
519+
0%, 39.9% { color: var(--req-idle); }
520+
40%, 100% { color: var(--req-active); }
521+
}
522+
523+
@keyframes color-at-42 {
524+
0%, 41.9% { color: var(--req-idle); }
525+
42%, 100% { color: var(--req-active); }
526+
}
527+
528+
@keyframes color-at-44 {
529+
0%, 43.9% { color: var(--req-idle); }
530+
44%, 100% { color: var(--req-active); }
531+
}
532+
533+
@keyframes color-at-45 {
534+
0%, 44.9% { color: var(--req-idle); }
535+
45%, 100% { color: var(--req-active); }
536+
}
537+
538+
@keyframes color-at-46 {
539+
0%, 45.9% { color: var(--req-idle); }
540+
46%, 100% { color: var(--req-active); }
541+
}
542+
543+
@keyframes color-at-48 {
544+
0%, 47.9% { color: var(--req-idle); }
545+
48%, 100% { color: var(--req-active); }
546+
}
547+
548+
@keyframes color-at-49 {
549+
0%, 48.9% { color: var(--req-idle); }
550+
49%, 100% { color: var(--req-active); }
551+
}
552+
553+
@keyframes color-at-50 {
554+
0%, 49.9% { color: var(--req-idle); }
555+
50%, 100% { color: var(--req-active); }
556+
}
557+
558+
@keyframes color-at-52 {
559+
0%, 51.9% { color: var(--req-idle); }
560+
52%, 100% { color: var(--req-active); }
561+
}
562+
563+
@keyframes color-at-54 {
564+
0%, 53.9% { color: var(--req-idle); }
565+
54%, 100% { color: var(--req-active); }
566+
}
567+
568+
@keyframes color-at-56 {
569+
0%, 55.9% { color: var(--req-idle); }
570+
56%, 100% { color: var(--req-active); }
571+
}
572+
573+
@keyframes color-at-58 {
574+
0%, 57.9% { color: var(--req-idle); }
575+
58%, 100% { color: var(--req-active); }
576+
}
577+
578+
@keyframes color-at-62 {
579+
0%, 61.9% { color: var(--req-idle); }
580+
62%, 100% { color: var(--req-active); }
581+
}
582+
583+
@keyframes color-at-64 {
584+
0%, 63.9% { color: var(--req-idle); }
585+
64%, 100% { color: var(--req-active); }
586+
}
587+
588+
@keyframes color-at-68 {
589+
0%, 67.9% { color: var(--req-idle); }
590+
68%, 100% { color: var(--req-active); }
591+
}
510592
511593
/* =========================================================
512594
Traffic trajectories - pass through
@@ -1021,4 +1103,4 @@
10211103
display: none;
10221104
}
10231105
}
1024-
</style>
1106+
</style>

0 commit comments

Comments
 (0)