Refactor breathing animation to use dynamic text transitions with letter-spacing effects

Author: robertpiosik

packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.module.scss

@@ -81,8 +81,41 @@
     animation: exhale 5s linear forwards;
   }
 
-  &__breathing-status {
+  &__breathing {
+    position: relative;
     color: var(--cwc-text-color-dimmed);
+    width: 60px;
+    height: 100%;
+
+    &__text {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      opacity: 0;
+      transition: opacity 1s var(--transition-timing-function);
+      &--active {
+        opacity: 1;
+      }
+
+      &--inhale {
+        letter-spacing: 2px;
+
+        &.heading__breathing__text--active {
+          animation: inhale-spacing 5s linear forwards;
+        }
+      }
+
+      &--exhale {
+        letter-spacing: 0px;
+
+        &.heading__breathing__text--active {
+          animation: exhale-spacing 5s linear forwards;
+        }
+      }
+    }
   }
 }
 
@@ -219,3 +252,21 @@
     background-size: 0% 100%;
   }
 }
+
+@keyframes inhale-spacing {
+  from {
+    letter-spacing: 0px;
+  }
+  to {
+    letter-spacing: 2px;
+  }
+}
+
+@keyframes exhale-spacing {
+  from {
+    letter-spacing: 2px;
+  }
+  to {
+    letter-spacing: 0px;
+  }
+}

packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.tsx

@@ -94,13 +94,36 @@ export const ApiManagerModal: React.FC<Props> = (props) => {
         <div
           className={cn(styles.heading, {
             [styles['heading--scrolled']]: is_scrolled,
-            [styles['heading--inhale']]: breathing_state === 'inhale',
-            [styles['heading--exhale']]: breathing_state === 'exhale'
+            [styles['heading--inhale']]: breathing_state == 'inhale',
+            [styles['heading--exhale']]: breathing_state == 'exhale'
           })}
         >
           <div className={styles.heading__title}>API Manager</div>
-          <div className={styles['heading__breathing-status']}>
-            {breathing_state.toUpperCase()}
+          <div className={styles['heading__breathing']}>
+            <span
+              className={cn(
+                styles['heading__breathing__text'],
+                styles['heading__breathing__text--inhale'],
+                {
+                  [styles['heading__breathing__text--active']]:
+                    breathing_state == 'inhale'
+                }
+              )}
+            >
+              INHALE
+            </span>
+            <span
+              className={cn(
+                styles['heading__breathing__text'],
+                styles['heading__breathing__text--exhale'],
+                {
+                  [styles['heading__breathing__text--active']]:
+                    breathing_state == 'exhale'
+                }
+              )}
+            >
+              EXHALE
+            </span>
           </div>
         </div>
         <Scrollable max_height="25vh" on_scrolled_change={set_is_scrolled}>