Cascading Hero Text

A cinematic, per-character slide-and-rise hero title- the first letter pops, there’s a brief pause, then the rest cascade while the whole word glides in from the right.

A per-character hero animation: letters rise from below while the container slides in horizontally, creating a bold, staggered reveal.

Behavior

  • The first letter appears immediately, then a short pause holds attention.
  • Remaining letters cascade up with staggered timing.
  • The entire line slides in from the right during the cascade for added motion.
  • Uses a smooth bell-curve easing for natural acceleration and settle.

Timing controls (edit in source)

  • letterRiseDur — duration for each letter’s vertical rise.
  • quickStagger — brief pre-pause offset before the hold.
  • pause — intentional pause after the first letter.
  • normalStagger — per-letter delay after the pause.
  • slideFrom — initial horizontal offset (px) before the container slides to center.
  • easeBell — cubic-bezier used across container + letters.
Rocketmxn