Reveal

Composing it

It renders a plain <div> around children - one extra box in the DOM, which matters if the parent is a CSS grid or flex context that counts direct children. Nest more than one RevealRevealFades and rises its children the first time they reach the viewport. Never un-reveals.@sushindustries/ui · motion with staggered delay values, the way SectionSectionKicker, heading and body, revealing top-down with an 80ms offset.@sushindustries/ui · layout does with its heading and body, to make a group resolve top-down rather than as one block.

Motion and reduced motion

prefers-reduced-motion: reduce skips the fade entirely - the check runs once on mount, and if it matches, RevealRevealFades and rises its children the first time they reach the viewport. Never un-reveals.@sushindustries/ui · motion sets itself to shown immediately instead of waiting on the intersection observer. Content is never left hidden waiting for motion that will not happen.