initiation librodrome

app/components/ui/ScrollReveal.vue

@@ -0,0 +1,33 @@
+<template>
+  <div ref="el" class="scroll-reveal" :style="{ animationDelay: `${delay}ms` }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  delay?: number
+}>()
+
+const el = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  if (!el.value) return
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible')
+          observer.unobserve(entry.target)
+        }
+      })
+    },
+    { threshold: 0.1, rootMargin: '0px 0px -50px 0px' },
+  )
+
+  observer.observe(el.value)
+
+  onUnmounted(() => observer.disconnect())
+})
+</script>