lfg2025/archy
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 44 Wiki Activity

Update Screensaver animation duration and keyframes for enhanced visual effect

Browse Source 
- Increased the segment-pulse animation duration from 2s to 14s for a smoother visual experience.
- Refined keyframes to create a more dynamic animation sequence, including multiple loops and a stronger final expression.
This commit is contained in:
Dorian 2026-02-17 21:14:39 +00:00
parent 316dfee2fc
commit 8a32e36d85
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
neode-ui/src/components/Screensaver.vue
View File

@ -134,7 +134,7 @@ onBeforeUnmount(() => {
/* Origin at segment center = ring center (segment is centered via left/top 50%) */ /* Origin at segment center = ring center (segment is centered via left/top 50%) */
transform-origin: center center; transform-origin: center center;
transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))); transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius)));
animation: segment-pulse 2s ease-in-out infinite; animation: segment-pulse 14s ease-in-out infinite;
animation-delay: calc(var(--segment-index) * 0.02s); animation-delay: calc(var(--segment-index) * 0.02s);
} }
@ -145,15 +145,29 @@ onBeforeUnmount(() => {
} }
} }
/* 5 normal loops (10s) then stronger longer expression (4s) - total 14s */
@keyframes segment-pulse { @keyframes segment-pulse {
0%, 100% { /* Loop 1 */
opacity: 0.3; 0% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); 7.1% { opacity: 0.9; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); }
} 14.3% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
50% { /* Loop 2 */
opacity: 0.9; 21.4% { opacity: 0.9; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); }
transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); 28.6% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
} /* Loop 3 */
35.7% { opacity: 0.9; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); }
42.9% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
/* Loop 4 */
50% { opacity: 0.9; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); }
57.1% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
/* Loop 5 */
64.3% { opacity: 0.9; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); }
71.4% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
/* Strong expression: ramp up (1.5s), hold (2s), ease back (0.5s) */
78.6% { opacity: 1; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1.5); }
85.7% { opacity: 1; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1.5); }
92.9% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
100% { opacity: 0.3; transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); }
} }
.screensaver-logo-wrapper { .screensaver-logo-wrapper {