fix(ui): make animated background drift subtly
The animated background had an animation assigned, but the layers painted at the viewport size so the background-position changes were effectively static. Give the ambient light layers larger paint areas and drift them slowly so the animated option visibly moves without becoming distracting. Reduced-motion users keep the same static background. Test Plan: - git diff --check Refs: user redesign nitpick about animated background not moving
This commit is contained in:
@@ -36,15 +36,23 @@
|
||||
transparent 55%
|
||||
),
|
||||
linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%);
|
||||
background-size: 100% 100%;
|
||||
animation: bgshift 18s ease-in-out infinite alternate;
|
||||
background-size: 145% 130%, 140% 125%, 100% 100%;
|
||||
animation: bgshift 22s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes bgshift {
|
||||
0% {
|
||||
background-position: 0% 0%, 0% 0%, 0% 0%;
|
||||
background-position: 0% 0%, 100% 0%, 0% 0%;
|
||||
}
|
||||
50% {
|
||||
background-position: 12% 6%, 82% 9%, 0% 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: 10% 4%, -6% 2%, 0% 0%;
|
||||
background-position: 4% 10%, 92% 16%, 0% 0%;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bg-animated {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user