Skip to content

1. Default — section accent markers, theme card tooltip

Pulsing markers should use the section accent color; click one — the tooltip surface should follow the theme card variant 1 colors and its text should inherit that surface color.

Product image with interactive hotspots

2. Dark section — heading + markers track the dark palette

On the dark section the heading and this intro should use the dark-section text color, and the markers should use the dark-section accent color.

Product image with interactive hotspots

3. Custom — ring markers, custom tooltip colors, 16:9, contained

Markers should be rings in dark red; the tooltip should have a dark background with light text; the image is forced to 16:9 and the module is contained to a narrower width.

Product image with interactive hotspots

4. Animation — module slides up on scroll, numbered markers

Scroll into view: the whole module should slide up once with the theme animation duration and easing. Without JavaScript the module simply stays visible; reduced motion is respected.

Product image with interactive hotspots