this repo has no description
Another scroll-driven initiative
+22
+22
src/components/account-info.css
+22
src/components/account-info.css
···
433
433
filter: blur(16px) opacity(0.2);
434
434
}
435
435
}
436
+
@keyframes surface-header {
437
+
0% {
438
+
border-bottom-color: transparent;
439
+
box-shadow: none;
440
+
}
441
+
100% {
442
+
border-bottom-color: var(--outline-color);
443
+
box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
444
+
}
445
+
}
436
446
@keyframes shrink-avatar {
437
447
0% {
438
448
width: 64px;
···
487
497
animation: bye-banner 1s linear both;
488
498
animation-timeline: view();
489
499
animation-range: contain 100% cover 100%;
500
+
}
501
+
502
+
header {
503
+
background-image: linear-gradient(
504
+
to bottom,
505
+
transparent 30%,
506
+
var(--bg-color) var(--banner-overlap)
507
+
);
508
+
border-bottom: 1px solid transparent;
509
+
animation: surface-header 1s linear both;
510
+
animation-timeline: --account-scroll;
511
+
animation-range: 0 150px;
490
512
}
491
513
492
514
header .avatar {