Micro Scale Fade
Animated React whole-text reveal with a calm, tiny scale pop — subtle premium polish for labels and headings, built with Motion.
Precision.Subtle premium scale entrance.
Installation
npx smoothui-cli add micro-scale-fadeFeatures
- Whole-text scale fade from 0.96 to 1 with opacity (
cubic-bezier(0.32, 0.72, 0, 1)) - Calm micro-animation — not distracting, premium-feeling
- Configurable delay
- 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 scaling. The aria-label on the wrapper ensures screen readers get the full text.
Props
Mask Reveal Up
Animated React per-line text reveal with an upward masked motion — Apple's signature section-transition headline entrance, built with Motion.
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.