Spotria is a premium CMS-friendly Framer Code Component for creating interactive image hotspots. It lets you place clickable or hoverable pins on top of an image and reveal rich detail cards with title, description, metadata, price, preview image, and an optional CTA link.
It is ideal for product pages, lookbooks, portfolio case studies, real estate tours, editorial stories, image maps, feature breakdowns, and CMS-powered detail pages. Every hotspot can be edited directly through Framer Property Controls, making it easy to connect content, images, labels, and links to your own design system or CMS content.
Features:
- Interactive image hotspots with custom X/Y positioning
- Hover or click trigger mode
- Floating or bottom detail panel
- CMS-friendly hotspot array structure
- Optional title, description, metadata, price, preview image, and CTA
- Safe link handling for expected URL protocols
- Canvas-safe animation behavior with useIsStaticRenderer
- Customizable colors, radius, typography, overlay, pin size, blur, and shadows
- Accessible hotspot buttons with keyboard focus styles
- Responsive layout with intrinsic Framer sizing
Typical Use Cases:
- E-commerce product detail images
- Fashion lookbooks and shoppable images
- Portfolio project breakdowns
- Real estate and interior tours
- Editorial image stories
- CMS item showcases
- Feature maps for SaaS or hardware products
Spotria is a premium CMS-friendly Framer Code Component for creating interactive image hotspots. It lets you place clickable or hoverable pins on top of an image and reveal rich detail cards with title, description, metadata, price, preview image, and an optional CTA link.
It is ideal for product pages, lookbooks, portfolio case studies, real estate tours, editorial stories, image maps, feature breakdowns, and CMS-powered detail pages. Every hotspot can be edited directly through Framer Property Controls, making it easy to connect content, images, labels, and links to your own design system or CMS content.
Features:
- Interactive image hotspots with custom X/Y positioning
- Hover or click trigger mode
- Floating or bottom detail panel
- CMS-friendly hotspot array structure
- Optional title, description, metadata, price, preview image, and CTA
- Safe link handling for expected URL protocols
- Canvas-safe animation behavior with useIsStaticRenderer
- Customizable colors, radius, typography, overlay, pin size, blur, and shadows
- Accessible hotspot buttons with keyboard focus styles
- Responsive layout with intrinsic Framer sizing
Typical Use Cases:
- E-commerce product detail images
- Fashion lookbooks and shoppable images
- Portfolio project breakdowns
- Real estate and interior tours
- Editorial image stories
- CMS item showcases
- Feature maps for SaaS or hardware products
