annu-kute-ced/src/lib/motion/reveal.ts

import { prefersReducedMotion, syncopatedDelay } from './tokens';

export function reveal(node: HTMLElement, index = 0) {
	if (prefersReducedMotion()) return;

	node.classList.add('reveal');
	node.style.setProperty('--d', `${syncopatedDelay(index)}ms`);

	const observer = new IntersectionObserver(
		(entries) => {
			for (const entry of entries) {
				if (entry.isIntersecting) {
					node.classList.add('is-visible');
					observer.disconnect();
				}
			}
		},
		{ threshold: 0.1, rootMargin: '0px 0px -8% 0px' }
	);
	observer.observe(node);

	return {
		destroy() {
			observer.disconnect();
		}
	};
}