Hotspot image

Pro

Image or floor plan with pulsing hotspots that open animated detail cards for each room or feature.

app/page.tsx

import { HotspotImage } from "@/components/facade/hotspot-image";

export default function Demo() {
  return (
    <div className="w-full max-w-[600px]">
      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
        <div>
          <p className="text-xs font-medium uppercase tracking-wider text-brand">Residence 4B · Main level</p>
          <p className="font-display text-lg font-semibold tracking-tight text-foreground">The Larimer, Boulder, CO</p>
        </div>
        <p className="text-sm text-muted-foreground">2 bd · 2 ba · 1,640 sqft</p>
      </div>
      <HotspotImage defaultActiveId="kitchen" alt="Floor plan of Residence 4B with living room, kitchen, primary bedroom and terrace" />
    </div>
  );
}

Installation

$npx shadcn@latest add @facade/hotspot-image

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { FloorPlanIllustration } from "@/components/facade/hotspot-image";

export default function Page() {
  return <FloorPlanIllustration />;
}

Props

FloorPlanIllustrationProps is exported, so you can extend or wrap it. Every prop has a default; <FloorPlanIllustration /> renders the example above.

Props of FloorPlanIllustration
Prop	Type	Description
src	string	Image or floor plan URL. When omitted, pass a custom visual via children.
alt	string
children	React.ReactNode	Custom visual (e.g. inline SVG floor plan). Takes precedence over the default plan.
hotspots	Hotspot[]
aspectRatio	string	Aspect ratio of the visual, e.g. "16/10".
defaultActiveId	string \| null
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade hotspot image to this page and adapt the copy to our business.