Show heymlz for assist the user

frontend/components/home/Preview.vue

@@ -15,6 +15,13 @@ const activeSlideVideo = ref<"left" | "right" | "none">("none");
 const draggableEl = ref<HTMLElement | null>(null);
 const previewContainerEl = ref<HTMLElement | null>(null);
 
+const heymlzElement = useTemplateRef<HTMLDivElement>("heymlzElement");
+const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
+    rootMargin: "0px 0px -40% 0px"
+});
+
+const showHeymlzAnimation = ref(false);
+
 const { x: dragAxisX } = useDraggable(draggableEl, {
     initialValue: { x: 0, y: 0 },
     axis: "x"
@@ -22,6 +29,17 @@ const { x: dragAxisX } = useDraggable(draggableEl, {
 
 // watch
 
+watch(heymlzElementIsVisible, (newValue) => {
+    if (newValue) {
+        showHeymlzAnimation.value = true;
+        setTimeout(() => {
+            showHeymlzAnimation.value = false;
+        }, 3200);
+    }
+}, {
+    once: true
+});
+
 watch(() => clipPathPercent.value, (newValue) => {
     if (newValue > 80) {
         activeSlideVideo.value = "right";
@@ -62,7 +80,8 @@ watch(
                     <NuxtImg
                         v-if="activeSlideVideo !== 'right'"
                         :src="homeData!.difreance_section.image1"
-                        class="select-none absolute size-full object-cover brightness-[95%]"
+                        :class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
+                        class="select-none absolute size-full object-cover transition-[filter] duration-250"
                         :alt="homeData!.difreance_section.title1"
                     />
                     <video
@@ -76,13 +95,14 @@ watch(
                     />
                 </Transition>
 
-                <div class="absolute size-full right-0 w-full">
+                <div class="absolute size-full right-0 w-full" ref="heymlzElement">
 
                     <Transition name="fade">
                         <NuxtImg
                             v-if="activeSlideVideo !== 'left'"
                             :src="homeData!.difreance_section.image2"
-                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                            :class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
+                            class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
                             :alt="homeData!.difreance_section.title2"
                         />
                         <video
@@ -97,12 +117,14 @@ watch(
                     </Transition>
 
                     <video
+                        v-if="showHeymlzAnimation"
                         src="/video/heymlz/heymlz-pulling.webm"
                         autoplay
                         muted
                         playsinline
+                        loop
                         webkit-playsinline
-                        class="size-[300px] absolute translate-x-[-100px] z-10 top-[32%] -translate-y-1/2"
+                        class="size-[400px] absolute translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
                         :style="{
                             left: `${clipPathPercent}%`,
                             filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))'
@@ -113,18 +135,23 @@ watch(
                         :style="{
                             left: `${clipPathPercent}%`,
                         }"
-                        :class="activeSlideVideo !== 'none' ? 'opacity-10' : ''"
+                        :class="[
-                        class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center transition-opacity"
+                            activeSlideVideo !== 'none' ? 'opacity-10' : '',
+                            showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'
+                        ]"
+                        class="select-none w-2 h-full  absolute left-0 flex items-center justify-center transition-opacity duration-250"
                     >
 
                         <div
                             ref="draggableEl"
-                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
+                            :class="showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'"
+                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute size-11 flex items-center justify-center"
                         >
                             <Icon
                                 name="ci:arrows"
                                 size="24"
-                                class="**:stroke-white"
+                                class="transition-all"
+                                :class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
                             />
                         </div>
                     </div>
@@ -135,7 +162,7 @@ watch(
                 >
                     <div
                         class="flex flex-col gap-2 text-black transition-opacity"
-                         :class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
+                        :class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
                     >
                         <span class="typo-p-sm md:typo-p-md">
                             {{ homeData!.difreance_section.description1 }}