Hotspot Explorer
Demo

Interactive product explainer

Your engineering reasoning, on the product page.

You already wrote why the frame is built that way. It's in a blog post, four scrolls down, that nobody reads before they buy. This puts it on the product: tap a part, get the decision and the trade-off.

See it on a phone How it embeds

Everything below is a demonstration. Bracken Cycle Works and the Scree 140 are invented — the illustration, the copy and every number are fictional and are not the products, words or figures of any real manufacturer.

Tap a marker.It plays itself first

01 At full width

Same component, same content file. On a wide screen the panel docks to the right instead of rising from the bottom.

02 How it goes on your page

Two lines. No framework, no build step, nothing to install.

<script src="hotspot-explorer.js" defer></script>

<hotspot-explorer src="content.json"></hotspot-explorer>

What you'd send me

  1. One product photo, shot square-on, framed tight.
  2. The parts you want marked — four to eight.
  3. The reasoning you've already written for each one.

I put it in a content.json and it's live. Changing the copy later doesn't touch the code.

Zero dependenciesOne script, one custom element, one JSON file. Nothing to build, nothing to update.
Mobile firstDesigned at 390px. Every touch target is 44px. The photo is never cropped.
Keyboard and screen readerTab through the markers, Escape closes, arrows step. Panels are announced.