Skip to main content
Sync UI offers a variety of text animation styles to enhance your user interface.

Variants

Video Text

Text with video content visible through text mask.

Blur In

Text that cycles through blur states with opacity changes.

Split Reveal

Text that reveals characters with a sliding motion.

Staggered Scale

Characters that pulse in a wave pattern.

Letters Pull Up

Individual letters that rise and fade repeatedly.

Wave Effect

Characters that move in a vertical wave pattern.

Neon Glow

Text with pulsating neon effect in national colors.

Words Pull Up

Complete words that smoothly rise into view.

Typewriter

Classic typing effect with blinking cursor.

Rotate Words

Text that cycles through words with smooth transitions.

Morphing Text

Words that smoothly transition between different values.

Props

Most text animation variants accept the following props:
  • text - The text content to animate (string)
  • words - Array of words for rotating/morphing variants (string[])
  • videoSrc - Video source path for Video Text variant (string)

Features

  • Smooth animations using Framer Motion
  • Customizable timing and easing
  • Responsive text sizing
  • Character-level and word-level animations
  • Loop and cycle effects

Customization

Each text animation can be customized by modifying:
  • Font size and weight
  • Animation duration and delays
  • Color gradients and effects
  • Spacing and letter-spacing

Build docs developers (and LLMs) love