diff --git a/neode-ui/src/components/Screensaver.vue b/neode-ui/src/components/Screensaver.vue index d01e7569..b2ca8c58 100644 --- a/neode-ui/src/components/Screensaver.vue +++ b/neode-ui/src/components/Screensaver.vue @@ -134,7 +134,7 @@ onBeforeUnmount(() => { /* Origin at segment center = ring center (segment is centered via left/top 50%) */ transform-origin: center center; 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); } @@ -145,15 +145,29 @@ onBeforeUnmount(() => { } } +/* 5 normal loops (10s) then stronger longer expression (4s) - total 14s */ @keyframes segment-pulse { - 0%, 100% { - opacity: 0.3; - transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4); - } - 50% { - opacity: 0.9; - transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1); - } + /* Loop 1 */ + 0% { opacity: 0.3; 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); } + /* Loop 2 */ + 21.4% { opacity: 0.9; 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 {