Slow Riser

Eight reveal behaviours driven by one IntersectionObserver and a data attribute. Fade up, line stagger, word split, clip wipe on images, stagger by child, blur off, mask down, and a plain opacity fade. Put data-reveal on an element and it plays once when it enters the viewport, then the observer stops watching it.

The whole thing is one 3 kB script and one stylesheet. Timing, distance, delay and threshold are set per element in the markup, so changing one section does not mean editing JavaScript. A small snippet in the head marks the document as ready, so nothing stays hidden if the script never loads. Under prefers-reduced-motion every element is shown at its final state on load and no observer is created.

It suits long marketing and portfolio pages that scroll. It is the wrong pick for a dashboard or an app screen where content arrives after load, because each element is revealed once by design. If you want motion tied frame by frame to scroll position, this is not that.