About Component
HotspotShowcase is an interactive shoppable image component for Framer. Place clickable hotspot dots anywhere on a lifestyle photo and let visitors explore each product through an animated side panel — without ever leaving the page.
Interactive hotspot dots with pulse animation Hover or tap any dot to reveal the linked product. Inactive dots pulse with a soft ripple to draw attention naturally.
Animated product card panel Each hotspot opens a card showing product image, brand name, price, size options, color swatches and a CTA button — all with smooth fade and slide transitions.
Multi-image carousel per product Add multiple photos per hotspot. Arrow navigation lets visitors browse each product’s full image set inside the card.
Color swatch → image sync When swatch count matches image count, clicking a color instantly swaps the product photo. A subtle crossfade keeps the experience fluid.
Built-in dark mode + theme toggle Switch between light and dark with the animated sun/moon button. Designers set the default; visitors can override it live on the page.
Fully responsive layout Side-by-side on desktop, clean vertical stack on mobile. Layout, spacing and dot sizes adapt automatically below 960px.
Aspect-ratio-aware image container The hotspot image always locks to its natural photo ratio. Dots stay pixel-perfect on every breakpoint — no drift, no crop surprises.
Keyboard & accessibility support Full arrow-key navigation between dots, ARIA labels and focus-visible outlines keep the component accessible out of the box.
Keywords
shoppable image framer, hotspot component, interactive product card, image hotspot framer, hover product reveal, lookbook framer, shoppable lookbook, product showcase framer, hotspot gallery, interactive image map, ecommerce framer component, product card hover, image dot navigation, lifestyle product page, fashion editorial framer, card swipe framer
About Component
HotspotShowcase is an interactive shoppable image component for Framer. Place clickable hotspot dots anywhere on a lifestyle photo and let visitors explore each product through an animated side panel — without ever leaving the page.
Interactive hotspot dots with pulse animation Hover or tap any dot to reveal the linked product. Inactive dots pulse with a soft ripple to draw attention naturally.
Animated product card panel Each hotspot opens a card showing product image, brand name, price, size options, color swatches and a CTA button — all with smooth fade and slide transitions.
Multi-image carousel per product Add multiple photos per hotspot. Arrow navigation lets visitors browse each product’s full image set inside the card.
Color swatch → image sync When swatch count matches image count, clicking a color instantly swaps the product photo. A subtle crossfade keeps the experience fluid.
Built-in dark mode + theme toggle Switch between light and dark with the animated sun/moon button. Designers set the default; visitors can override it live on the page.
Fully responsive layout Side-by-side on desktop, clean vertical stack on mobile. Layout, spacing and dot sizes adapt automatically below 960px.
Aspect-ratio-aware image container The hotspot image always locks to its natural photo ratio. Dots stay pixel-perfect on every breakpoint — no drift, no crop surprises.
Keyboard & accessibility support Full arrow-key navigation between dots, ARIA labels and focus-visible outlines keep the component accessible out of the box.
Keywords
shoppable image framer, hotspot component, interactive product card, image hotspot framer, hover product reveal, lookbook framer, shoppable lookbook, product showcase framer, hotspot gallery, interactive image map, ecommerce framer component, product card hover, image dot navigation, lifestyle product page, fashion editorial framer, card swipe framer
Ahmet Loca
