Docs / Components
SenseAnimateOnScrollComponent
Viewport reveal wrapper from @artificialsenselabs/ui — fade/slide (or author enterClass / leaveClass) when the host intersects. Not surface chrome; style the projected content yourself.
Live demo: run nx serve showcase and open /components/animate-on-scroll (port 4202).
Overview
Category: Display. Selector: sense-animate-on-scroll. Import: import { SenseAnimateOnScrollComponent } from '@artificialsenselabs/ui';
On the client, content starts visually hidden until intersection (or until disabled / reduced-motion bypass). SSR renders the visible path so markup is readable without waiting for an observer.
Accessibility
- Hard-gated by
prefers-reduced-motion: reduce(JS + CSS): content shows immediately with no scroll-triggered animation.enter/leavedo not fire on that path. - SSR and
disableduse the same visible-without-animation path. - Projected content stays in the DOM (opacity reveal) — do not put essential-only-on-scroll UI here.