Spotlight Lens ComparePRO

Reveal9: Spotlight Lens Compare

A comparison shown through a circular lens: everything outside the circle is the before state, everything inside it is the after. Drag the lens anywhere across the picture, or move it with the arrow keys.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/reveal9?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/reveal9?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/reveal9.tsx plus the badge7 eyebrow it uses.

Quick start

The installed file exports reveal9Demo alongside the block: the exact props behind the preview above. Spread it to get a working comparison in one line.

import { Reveal9, reveal9Demo } from "@/components/beste/block/reveal9";

export default function Page() {
  return <Reveal9 {...reveal9Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Reveal9 } from "@/components/beste/block/reveal9";

export default function Page() {
  return (
    <Reveal9
      badge={{ label: "Look through it" }}
      heading="Drag the lens across and the old signage comes back."
      description="Outside the circle is the building before. Inside it is what we installed."
      lensRadius={130}
      before={{ src: "/case/found.jpg", alt: "Bare concrete stairwell", label: "As found" }}
      after={{ src: "/case/built.jpg", alt: "Signage across a lobby wall", label: "As built" }}
      facts={[
        { title: "Surfaces touched", value: "None" },
        { title: "Days on site", value: "4" },
      ]}
      labels={{ lensLabel: "Drag the lens", hint: "Press and drag anywhere on the picture." }}
    />
  );
}

Props

type CompareImage = {
  src: string;
  alt: string;
  label: string;
};

type CompareFact = {
  title: string;
  value: string;
};

type Reveal9Labels = {
  lensLabel?: string;
  hint?: string;
};

Behavior notes

• The lens is a clip-path: circle() on the after layer, positioned in percentages of the frame, so both photographs stay object-cover at full size and only the visible disc moves.
• The radius is given in pixels while the centre is in percentages, which keeps the circle a constant physical size while it tracks the pointer at any frame width.
• Dragging works anywhere on the picture: onPointerDown captures the pointer on the frame, so the lens keeps following even when the cursor leaves the box mid-drag.
• touch-none is set on the frame, so a touch drag moves the lens instead of scrolling the page.
• The ring is a focusable button with an aria-label, and all four arrow keys nudge it in four percent steps, so the reveal works without a pointer.
• Both labels stay pinned in the top corners at all times, so the reader always knows which state is inside the circle and which is outside.
• The frame changes ratio rather than height (aspect-[16/10] becoming md:aspect-[2/1]), so the lens has room to travel on a wide screen without the picture going letterbox-thin on a phone.