Feature Hotspots
Numbered points on an image that open a note about each detail. Free, MIT · Content and social › Interactive explainers
Numbered points over a picture: each opens a note about one detail. Points are shares of the source image, so they stay on their detail at any width, with contain letterboxing or cover cropping (cropped points stay in the list). Every point is also a row of the text list under the image, and the note returns focus where it was opened.
Installation
npx valyro-cli@latest add feature-hotspotsnpx shadcn@latest add https://valyro.xyz/r/feature-hotspots.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { FeatureHotspots } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
image * | FeatureHotspotsImage | The picture and its text alternative. | |
hotspots | Hotspot[] | [] | Points with notes, in reading order (the Tab order). Ids must be unique; a repeated id is skipped. |
fit | 'contain' | 'cover' | 'contain' | How the image fills the area: contain (default) shows all of it, cover fills it and may crop points away. |
aspectRatio | number | string | Proportions of the image area (16 / 9). Default: the image's own (width / height), else 16 / 9. | |
activeId | string | null | Id of the open point, or null. | |
defaultActiveId | string | null | null | Initial activeId when uncontrolled. |
onActiveIdChange | (id: string | null) => void | Called with the new activeId when it changes. | |
mobilePresentation | 'sheet' | 'below' | 'below' | Where the note opens on a narrow block (under 560 px): a bottom sheet or a panel under the image. Default below. |
showList | boolean | true | The text list of every detail under the image. Default true; it still shows when points are cropped away or the image fails. |
marker | 'number' | 'dot' | 'number' | Marker look: the point's number (default) or a small dot. A point's icon wins over both. |
pulse | boolean | false | A slow pulse on the markers; never under reduced motion. Default false. |
labels | Partial<FeatureHotspotsLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Exploded Layers — Prepared image layers pulled apart with captions
- Prediction Card — The reader guesses first, then sees the answer and the explanation
- Detail Dial — Choose how deep an explanation goes: short, detailed or full
- Version Scrubber — Step through prepared versions of a design with one slider
- Page Minimap — Schematic map of a long page with the visible area
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
Previous: Media Player · Next: Exploded Layers · All Content and social