Mask Reveal Up
Animated React per-line text reveal with an upward masked motion — Apple's signature section-transition headline entrance, built with Motion.
Installation
npx smoothui-cli add mask-reveal-upFeatures
- Per-line masked reveal with upward drift and soft blur (
cubic-bezier(0.22, 1, 0.36, 1)) - Overflow-hidden mask per line for a clean reveal effect
- Pass lines via
childrenstring with\nseparators or the explicitlinesprop - Configurable delay and per-line stagger
- Optional scroll-trigger via
triggerOnView - Accessible: respects
prefers-reduced-motion
Accessibility
Reduced Motion
Respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no movement. The full string is exposed to screen readers via aria-label, with the per-line spans aria-hidden.
Props
Line-by-Line Slide
Animated React per-line text reveal where each line slides in from the left with a staggered entrance — inspired by Apple landing page subheads, built with Motion.
Micro Scale Fade
Animated React whole-text reveal with a calm, tiny scale pop — subtle premium polish for labels and headings, built with Motion.