Zoom to focus product shot

Use it for

• Hero and feature sections that walk through a dashboard
• Pointing at one feature without cropping away the context
• Product tours where visitors pick the part they care about

Avoid

• Real screenshots as images, which blur when scaled up: build the shot in HTML or SVG
• More than four or five stops, which turns a tour into a slideshow

How it works

The shot is laid out once at a fixed 720 by 450 size. For the overview it is scaled to fit; for a stop, the panel's offset box gives its centre and size, and one transform (translate then scale, origin top left) puts that centre in the middle of the view at the largest scale that fits. A ResizeObserver recomputes on resize, the transition does the glide, and a veil with backdrop-filter blur and a radial mask softens everything around the focus. A timeout chain tours the stops and pauses for a while after a click.

Accessibility

The stops are real buttons with aria-pressed, and the shot is one image with a text description. The tour pauses off screen and for six seconds after any click. Reduced motion stops the tour and jumps between stops without the glide.