Motion
The scroll-reveal motion utilities every animated marketing block builds on. FadeIn reveals a single element as it enters the viewport; Stagger + StaggerItem cascade a group. All gate on reduced motion, and share the Nexus EASE curve. These need the motion package.
$
Registry itembunx shadcn@latest add @nx-ui/motionReplay
The reveals below fire once when they scroll into view (viewport once: true). Use replay to watch them again.
FadeIn
Fades and rises an element in as it enters view. Pass delay to hand-stagger siblings; as='section' switches the wrapper element.
Fades in first
…then this, delayed 0.15s
…then this, delayed 0.3s
Stagger + StaggerItem
Wrap a group in Stagger and each StaggerItem child cascades in automatically. Tune the gap with the stagger prop.
1
2
3
4
5
6