---
title: "Product Explorer — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Interactive. Clickable hotspots + Side Panel"
canonical: "https://framer.elliotli.dev/component/product-explorer"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Product Explorer

# Product Explorer

Clickable hotspots + Side Panel

[View on Framer](https://framer.com/marketplace/components/product-explorer/?via=elliot-li)

![Product Explorer preview image 1](https://framer.elliotli.dev/og/component/product-explorer/4ced8a2bbd8b940b/1600x1200.jpg)

## Summary

Clickable hotspots + Side Panel

## Description

[Live Preview](https://productfeatureexplorer.framer.website/)

[Grab more quality componnets for free](https://www.framer.com/@design-by-saqlain/)

Product Feature Explorer turns any product photo into an interactive tour — clickable hotspots sit on top of the image, and clicking one slides open a detail panel with a title, description, and zoomed-in preview of that exact spot. Works especially well for product pages, feature breakdowns, spec sheets, and any image that has more to explain than captions alone can carry.

### **Interactive Hotspot Explorer**

-   Place unlimited hotspots anywhere on an image using simple X/Y percentages.
    
-   Click a hotspot to open a detail panel with title, description, and a zoomed preview of that area.
    
-   Panel can dock right, left, or bottom — and auto-switches to a bottom sheet on narrow containers.
    
-   Navigate between hotspots with arrow buttons, dot indicators, or keyboard left/right.
    
-   Optional autoplay cycles through hotspots automatically.
    
-   Static-render safe for Framer canvas and exports.
    

### **Fully Customizable**

Product Feature Explorer includes Framer property controls for customizing the image, hotspot markers, panel styling, colors, spacing, and motion.

### **Customize**

-   Hotspots — Add, remove, and position any number of markers with title and body text.
    
-   Marker — Choose plus, dot, or number style, adjust size, anchor point, and hover scale.
    
-   Pulse — Toggle an attention-drawing pulse ring around idle markers.
    
-   Panel — Set panel side, width, offset, and the breakpoint where it collapses to a bottom sheet.
    
-   Zoom Preview — Reveal a zoomed-in crop of the image behind each hotspot's panel.
    
-   Colors — Customize stage, panel, marker, and text colors independently.
    
-   Typography — Customize title and body fonts using Framer's extended font controls.
    
-   Transition — Control the panel's entrance and exit motion with Framer's transition control.
    

### **How It Works**

Each hotspot sits on the image at an exact X/Y position. Clicking one opens a detail panel that slides in from the chosen side, showing a zoomed view of that region alongside its title and description.

## Rank history [How rankings work →](/terms#rankings)

-   All · #913

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-08-26
- **Updated**: 2026-11-04
- **Added**: 2026-08-26
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step