From 51f0cb28926545d66abb30793aba4dc48bcb8557 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 20 May 2025 15:17:56 +0530
Subject: [PATCH] feat: Pause animation when hovering

---
 .../src/docs/.vitepress/components/TopBar.vue    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index b25f4798d..4029d47b6 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -19,15 +19,15 @@ const taglines: Taglines[] = [
 
 const randomTagLines: Taglines[] = [
   {
-    label: 'Customize your layout and design in Mermaid Chart’s whiteboard!',
+    label: "Customize your layout and design in Mermaid Chart's whiteboard!",
     url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
   },
   {
-    label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
+    label: "Customize your layout and design in Mermaid Chart's visual editor!",
     url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
   },
   {
-    label: 'Customize your layout and design with Mermaid Chart’s GUI!',
+    label: "Customize your layout and design with Mermaid Chart's GUI!",
     url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=gui',
   },
   {
@@ -38,19 +38,27 @@ const randomTagLines: Taglines[] = [
 
 const index: Ref<number> = ref(0);
 const currentBannerSet: Ref<Taglines[]> = ref(taglines);
+const isPaused: Ref<boolean> = ref(false);
 
 onMounted(() => {
   const newIndex = Math.floor(Math.random() * randomTagLines.length);
   currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
   index.value = Math.floor(Math.random() * currentBannerSet.value.length);
   setInterval(() => {
+    if (isPaused.value) {
+      return;
+    }
     index.value = (index.value + 1) % currentBannerSet.value.length;
   }, 5_000);
 });
 </script>
 
 <template>
-  <div class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]">
+  <div
+    class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]"
+    @mouseenter="isPaused = true"
+    @mouseleave="isPaused = false"
+  >
     <p class="w-full tracking-wide fade-text text-sm">
       <transition name="fade" mode="out-in">
         <a