Update

resources/js/projects-renderer/composables/useIntersectionActivation.js

@@ -0,0 +1,40 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export const useIntersectionActivation = (options = { rootMargin: '180px 0px' }) => {
+    const target = ref(null);
+    const isActive = ref(false);
+    let observer;
+
+    onMounted(() => {
+        if (typeof IntersectionObserver === 'undefined') {
+            isActive.value = true;
+            return;
+        }
+
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) {
+                    return;
+                }
+
+                isActive.value = true;
+                observer?.disconnect();
+            });
+        }, options);
+
+        if (target.value) {
+            observer.observe(target.value);
+        } else {
+            isActive.value = true;
+        }
+    });
+
+    onBeforeUnmount(() => {
+        observer?.disconnect();
+    });
+
+    return {
+        target,
+        isActive,
+    };
+};