Back to Motion Prompt examples
Landing page & web effects, part 2 · #19
Hotspots
Dots on an image open notes when clicked. White dots pulse on the product picture; clicking one opens a tooltip about that part, and clicking another dot swaps the tooltip.
Showcase effectshotspotsimagetooltippulseproductinteractive-image
Full motion specification
How the movement works
Use it on products, floor plans or maps, to explain different spots within one picture.
- 01A 511 × 168 viewport: a product picture (a backpack) on the left, name and price on the right, with two dots on the picture (white circle, radius 8, drop shadow; orange center, radius 4). One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02Pulse: from each dot a white ring (width 2) grows from radius 8 to 20 while fading from 0.75 to 0 opacity, every 1.57 s (a third of 4.7 s), two rings half a period apart.
- 03At 0.9 s the upper dot is clicked: a tooltip (136 × 48, radius 8, with a pointer toward the dot) appears to its left over 0.25 s (cubic ease-out), rising 6 px.
- 04At 2.4 s the lower dot is clicked: the first tooltip fades over 0.25 s and the next one opens to the right of the lower dot. A second click at 3.8 s closes it.
Prompt
Add hotspots to the product photo: put pulsing dots on the key features and open a tooltip over 0.25 s when one is clicked.