Letting a reveal finish its job once

Track entry, not animation progress#

The useInView hook starts with a false boolean and observes the element attached to its ref. When the element crosses the configured threshold, the hook sets the boolean to true and disconnects the observer.

That state is not reset when the element leaves view. A reader scrolling upward therefore sees the section already present rather than starting its entrance again. The effect also disconnects during cleanup, covering a wrapper that leaves the page before its first entry.

Give CSS the transition between states#

Reveal maps the boolean to an is-in class and accepts one of five typed delay options. CSS changes opacity and vertical position with those classes; React does not drive the intermediate frames.

The seabed-contour illustration uses the same entry hook at another threshold, then animates SVG strokes through CSS. The navigation's passive scroll listener is a separate behavior, so the one-time reveal design should not be described as removing all scroll listeners from the page.

Keep the fallback visible in the assessment#

Reduced-motion rules set the reveal content to visible, remove its translation and disable the transition. The hook is still created, but readability in that mode does not wait for its visible class.

The normal reveal rule starts hidden, and the hook constructs IntersectionObserver without a support guard. Unsupported observers or failed JavaScript can therefore leave content hidden. That needs a visible-baseline or equivalent fallback and a browser check; neither was implemented or exercised in this read-only review.