WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

web-ui: wave-1 foundation — services/web-ui/src/css/components/motion.css

Browse source
This commit is contained in:
Zac Gaetano 2026-05-21 12:30:38 -04:00
parent 310eca0810
commit a6c9f88068
1 changed files with 46 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
services/web-ui/src/css/components/motion.css Normal file
View file

@ -0,0 +1,46 @@
/* motion.css ─ keyframes + global reduced-motion override.
* Keep keyframes here, not scattered across primitive files,
* so a single import disables them under prefers-reduced-motion. */
/* Skeleton shimmer — gradient sweep, NOT opacity pulse */
@keyframes wd-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* "LIVE" tally-light stutter — bright 0.9s / dim 0.3s / bright 0.9s */
@keyframes wd-stutter {
0%, 42% { opacity: 1; }
42.01%, 56% { opacity: 0.55; }
56.01%, 100% { opacity: 1; }
}
/* Signal-strip sweep for recording cards */
@keyframes wd-signal-sweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.wd-shimmer {
background: linear-gradient(
90deg,
var(--bg-surface) 0%,
var(--bg-hover) 50%,
var(--bg-surface) 100%
);
background-size: 200% 100%;
animation: wd-shimmer 1.8s ease-in-out infinite;
}
.wd-stutter { animation: wd-stutter 2.1s ease-in-out infinite; }
.wd-sweep { animation: wd-signal-sweep 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.wd-shimmer, .wd-stutter, .wd-sweep {
animation: none;
}
*, *::before, *::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}