Back to Motion Prompt examples
Landing page & web effects, part 2 · #10
Spotlight hover
Only the area around the cursor lights up. As the cursor moves over the dark cards, only a circle around it is lit, and the edges of nearby cards glow.
Mouse & input interactionsspotlighthoverglowcursorradial-gradientdark-modecard
Full motion specification
How the movement works
Use it on dark-themed sites with rows of feature or pricing cards, to make the spot under the pointer stand out.
- 01A 511 × 168 viewport: a dark page (#121828) with three dark cards (147 × 116, radius 10). One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02The cursor keeps moving in a figure eight: x = 255 + 190·sin(2πt/4.7), y = 92 + 40·sin(4πt/4.7).
- 03Inside each card only, a white radial light of radius 115 px is centered on the cursor (opacity 0.34 at the center → 0); it does not spill outside the cards.
- 04Card borders (width 2) glow by distance from the cursor: an orange radial light (rgb(255,122,82)) of radius 120 px. Far edges keep only the faint base line (8% white).
- 05No lag: the light sits exactly at the cursor (the usual build puts the coordinates in CSS variables used as the radial-gradient center).
Prompt
Add a spotlight hover to the feature cards: on the dark cards, light up only a circle of about 120 px around the cursor and make the borders glow too.