motion-gravity
Characters fall in from above with staggered spring-physics timing — each one bouncing to a rest at the baseline. An entrance animation built for hero text and section titles.
Preview
Import
Usage
Height
height sets how far each character falls before landing. Larger values give a more dramatic entrance.
Stagger
stagger is the delay in seconds between each character landing. Tighten it for snappy cascades; spread it out for a slow reveal.
Delay
Use delay to hold the animation until after other elements have entered — useful when composing multiple animated elements.
How it works
Each character is wrapped in an inline-block span. On first render (and whenever text changes), all characters are set to opacity: 0 and translateY(-height). Motion One then animates them back to their natural position using a spring (stiffness: 380, damping: 22), staggered by the stagger interval, with an optional leading delay.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | — | Text to animate in |
| | | number | 60 | Fall distance in px |
| | | number | 0.05 | Seconds between each character landing |
| | | number | 0.6 | Spring duration hint per character |
| | | number | 0 | Seconds to wait before the first character falls |
Accessibility
When prefers-reduced-motion is set, characters render immediately in their final position with no animation.