Initial commit

src/lib/actions/reveal.ts

@@ -0,0 +1,53 @@
+type RevealOptions = {
+  delay?: number;
+  distance?: number;
+  threshold?: number;
+};
+
+const defaultOptions: Required<RevealOptions> = {
+  delay: 0,
+  distance: 24,
+  threshold: 0.18
+};
+
+export function reveal(node: HTMLElement, options: RevealOptions = {}) {
+  const settings = { ...defaultOptions, ...options };
+  const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+  if (media.matches) {
+    node.classList.add('reveal-visible');
+    return {
+      destroy() {}
+    };
+  }
+
+  node.style.setProperty('--reveal-delay', `${settings.delay}ms`);
+  node.style.setProperty('--reveal-distance', `${settings.distance}px`);
+  node.classList.add('reveal-ready');
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) {
+          continue;
+        }
+
+        node.classList.add('reveal-visible');
+        observer.disconnect();
+        break;
+      }
+    },
+    {
+      threshold: settings.threshold,
+      rootMargin: '0px 0px -8% 0px'
+    }
+  );
+
+  observer.observe(node);
+
+  return {
+    destroy() {
+      observer.disconnect();
+    }
+  };
+}