---
title: "Spotlight Tour — Free Framer component · Best of Framer"
description: "Free Framer component · by Artem Kireev · Interactive. Spotlight Tour turns one product screenshot into a step-by-step walkthrough."
canonical: "https://framer.elliotli.dev/component/spotlight-tour"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Spotlight Tour

# Spotlight Tour

Zoom-guided product walkthroughs

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

![Spotlight Tour preview image 1](https://framer.elliotli.dev/og/component/spotlight-tour/c206a7e9865a0c89/1600x1280.jpg)

## Summary

Spotlight Tour turns one product screenshot into a step-by-step walkthrough.

## Description

Spotlight Tour turns one product screenshot into a step-by-step walkthrough. You place numbered pins on the image, write a caption for each, and the component pans and zooms to that region when a visitor selects it.

It solves a specific problem: product screenshots on landing pages are too dense to read once they are scaled down to fit a section. Spotlight Tour keeps the full context on screen and moves the visitor's attention to one detail at a time, so you do not have to crop your UI into disconnected close-ups or commission a demo video.

### **What you can customise.**

Each step carries its own focus point, zoom level, label, title, body copy, and optional link. You can also give a step its own image, which turns the component into a screenshot sequencer with a crossfade between states. Beyond content, you control three caption layouts (below, beside, overlay), three step-navigation styles (chips, list, dots), three pin styles (numbered, dot, ring), aspect ratio, all colours and type sizes, dim level, radius, borders, shadow, and the full motion model — spring stiffness and damping, or a tween with a duration and easing curve. Autoplay is available with an interval, looping, and pause-on-hover.

**Responsive.** The component measures its own container rather than the browser window, so it collapses to a single column when placed in a narrow stack, not only on a narrow screen. The media area uses an aspect ratio, so it scales without any per-breakpoint setup. Nothing depends on hover, so every step is reachable by tap.

**Accessible.** Steps are real buttons with tablist semantics. Arrow keys, Home, and End move between them. The caption announces changes to screen readers. Focus rings appear for keyboard users only. When a visitor has reduced motion enabled, camera moves become instant and the pin pulse stops.

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

-   All · #4359

## Details

- **Author**: Artem Kireev
- **Published**: 2026-07-27
- **Updated**: 2026-07-27
- **Added**: 2026-07-27
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase