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.

Installation

npx smoothui-cli add line-by-line-slide

Features

• Per-line slide-in from the left with staggered entrance (cubic-bezier(0.22, 1, 0.36, 1))
• Pass lines via children string with \n separators or the explicit lines prop
• 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 sliding motion. The full string is exposed to screen readers via aria-label, with the per-line spans aria-hidden.

Props

Created by

Eduardo Calvo

Improved by

Powered by

motion.dev