Back to Motion Prompt examples
Landing page & web effects · #11
Cursor follower
A shape trails the mouse pointer with a delay. As the cursor moves around the page, an orange circle follows it a little behind.
Hover & click interactionscursorcustom-cursorcursor-followermouse-followlerptrailinteraction
Full motion specification
How the movement works
Use it on brand sites and portfolios to add a playful, hands-on feel.
- 01Cursor path: x = 255 + 175·sin(2πt/4.8), y = 86 + 46·sin(4πt/4.8) (a figure eight lying on its side, one lap per 4.8 s).
- 02Circle: radius 17, orange, opacity 0.88, drawn under the cursor.
- 03Follow rule: every frame (60 fps) it covers 12% of the remaining distance (x += (cursor x − x) × 0.12).
- 04The arrow cursor stays visible.
Prompt
Add a cursor follower across the site: a 30 px orange circle that trails the pointer slightly.