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%
|
transparent 55%
|
||||||
),
|
),
|
||||||
linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%);
|
linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%);
|
||||||
background-size: 100% 100%;
|
background-size: 145% 130%, 140% 125%, 100% 100%;
|
||||||
animation: bgshift 18s ease-in-out infinite alternate;
|
animation: bgshift 22s ease-in-out infinite alternate;
|
||||||
}
|
}
|
||||||
@keyframes bgshift {
|
@keyframes bgshift {
|
||||||
0% {
|
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% {
|
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