Leader Line Captions

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<LeaderLineCaptions />

Installation

npx shadcn@latest add https://webberui.com/r/leader-line-captions.json

Usage

image takes any image node (an <img>, a gradient div, whatever), and captions marks detail points in the image with percentage coordinates; the component numbers them and draws the leader lines automatically.

import { LeaderLineCaptions } from "@/components/ui/leader-line-captions";

<LeaderLineCaptions
  image={<img src="/product.jpg" alt="Product exterior" />}
  side="right"
  captions={[
    { x: 30, y: 24, title: "Camera module", description: "Three lenses in a matrix layout." },
    { x: 68, y: 52, title: "Body frame", description: "Aerospace-grade aluminium alloy." },
    { x: 44, y: 82, title: "Speaker grille" },
  ]}
/>

Each caption's x / y is a percentage relative to the image (0–100) and is independent of the image's actual size, so the leader lines realign automatically when it scales.

Controlled focus

Without activeIndex it is uncontrolled, and hovering or focusing a caption focuses it automatically. To keep it in sync with external state, pass activeIndex together with onActiveChange:

const [active, setActive] = React.useState<number | null>(null);

<LeaderLineCaptions
  image={<img src="/map.jpg" alt="Map" />}
  activeIndex={active}
  onActiveChange={setActive}
  captions={captions}
/>

Props

LeaderLineCaptions

LeaderCaption

How it works

• The leader line endpoints are measured live with getBoundingClientRect against the actual positions of the badge and the detail point in the image, and a ResizeObserver watches the container and the sidebar, so everything realigns after a resize, a reflow, or a font load.
• On reveal, the leader lines emerge one by one as pathLength animates from 0 to 1, and each number "lights up" in turn once its line is more than halfway drawn.
• Hovering or focusing any caption makes a focus halo appear at that detail point while the rest of the image dims under a radial gradient; on mouse out the halo fades away in place rather than snapping back to the origin.

Accessibility

• The caption sidebar is wrapped semantically in <figure> / <figcaption>, and each caption is a focusable <button>, so keyboard Tab moves through them one by one and triggers the matching focus effect on the image.
• The leader line <svg>, the focus halo, and the small number circles are all decorative only (aria-hidden), so they do not interfere with the screen reader; the caption text itself is readable content.
• When the user has "reduce motion" enabled at the system level, the leader lines and numbers are rendered in their final state with no drawing animation, and the focus dimming switches instantly.