Per Character Rise

Animated React per-character text reveal where letters slide up from below with no blur — crisp, deliberate, and kinetic. Apple's clean tvOS-style entrance, built with Motion.

Installation

npx smoothui-cli add per-character-rise

Features

• Per-character slide-up with zero blur — crisp and sharp
• Apple tvOS / Fitness+ style kinetic reveal (cubic-bezier(0.2, 0.8, 0.2, 1))
• Configurable delay and per-character 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-character spans aria-hidden.

Props

Created by

Eduardo Calvo

Improved by

Powered by

motion.dev