Back to Motion Prompt examples
Landing page & web effects · #24
Floating animation
Elements bob gently up and down. Next to the headline, a phone, a heart badge and a rating chip each bob gently out of step, and the shadow under the phone grows and shrinks.
Loading, navigation & ambient loopsfloatingfloatbobhover-animationkeyframestranslateydecorationloop
Full motion specification
How the movement works
Use it to add quiet motion to product images, app mockups or decorative icons.
- 01Phone (92 × 132): y = −8·sin(2πt/2.4), one bob per 2.4 s; a sine slows at both ends.
- 02Heart badge (radius 20): y = −6·sin(2πt/1.6 + 1.2). Rating chip (76 × 30): y = −6·sin(2πt/2.4 + 2.4).
- 03Shadow under the phone (54 × 6 ellipse): size and opacity scale by (1 + y/40), so it shrinks and fades as the phone rises.
- 04Both periods (2.4 s and 1.6 s) divide 4.8 s, so the loop has no seam.
Prompt
Give the phone image in the hero a floating animation: 8 px up and down, one bob every 2.4 s.