Back to Motion Prompt examples
Landing page & web effects, part 2 · #18
Lightbox
Opens an image large over a dimmed page. Clicking a thumbnail in the gallery dims the page and shows that photo large in the center; the × shrinks it back into its thumbnail.
Showcase effectslightboxmodalgalleryimageoverlayzoom
Full motion specification
How the movement works
Use it for case studies, portfolios or product photos that should be seen large without leaving the page.
- 01A 511 × 168 viewport with four thumbnails (108 × 72, radius 6). The third is clicked at 0.75 s, and the × at the top right at 3.0 s. One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02Open: over 0.85–1.3 s (0.45 s, cubic ease-out) a dark overlay (rgb(14,18,28), opacity 0 → 0.82) covers the page and the clicked thumbnail grows to 261 × 128 in the center.
- 03Over the second half of the open, "3 / 4" appears below the photo, previous/next arrows at the sides and a × at the top right.
- 04Close: over 3.05–3.4 s (0.35 s, cubic ease-in-out) the same move runs in reverse and the photo returns to its thumbnail.
Prompt
Let visitors view the case-study photos in a lightbox: on click, dim the page and enlarge the photo in the center, with arrows to go to the previous or next photo.