Back to Motion Prompt examples
Landing page & web effects, part 2 · #12
Text roll on hover
Letters roll up and swap on hover. With the cursor on a menu word, its letters roll up and out one by one while the same word rolls in from below in orange; it rolls back when the cursor leaves.
Mouse & input interactionstext-rollhovermenulinkstaggertypography
Full motion specification
How the movement works
Use it on header menus or buttons to give short text links a tactile response.
- 01A 511 × 168 viewport with three menu words (WORKS, ABOUT, CONTACT; 30 px, weight 800, 1 px letter spacing). The cursor rests on each, left to right, for about 0.85 s. One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02An orange copy of each word sits 40 px below it, and both are clipped to a 39 px tall box (overflow: hidden).
- 03On hover each letter, staggered by 0.035 s, moves 40 px up and out over 0.36 s (cubic ease-in-out) while its orange copy rises into place.
- 04On leave the letters roll back down with the same stagger and timing.
Prompt
Give the main menu a text roll on hover: the letters roll up one by one, 0.035 s apart, revealing the same word in orange from below.