# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/reveal9. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-29

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Reveal](/blocks/reveal)
5. /
6. Spotlight Lens Compare

# Spotlight Lens Compare[PRO](/pricing)

Before and after comparison seen through a draggable circular lens: the earlier photograph fills the frame while the later one shows only inside the circle, which follows the pointer or the arrow keys.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/reveal9`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type              | Default | Description                                                          |
| ----------- | ----------------- | ------- | -------------------------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7                                   |
| heading     | string            | –       | Section heading in the left header column                            |
| description | string            | –       | Supporting paragraph in the right header column                      |
| before      | CompareImage      | –       | The image outside the lens                                           |
| after       | CompareImage      | –       | The image revealed inside the lens                                   |
| facts       | CompareFact\[\]   | \[\]    | Ruled facts under the comparison                                     |
| lensRadius  | number            | 130     | Radius of the lens in pixels                                         |
| labels      | Reveal9Labels     | {}      | Fixed strings that are not content: the lens label and the hint line |
| className   | string            | –       | Extra classes for the outer <section>                                |

tsCopy

```
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.

## More Reveal blocks

[View all Reveal](/blocks/reveal)

[](/block/reveal6)

PRO

reveal6

### Drag Compare Slider

Before and after comparison where a pointer-driven handle clips the earlier photograph over the later one, with pill labels on both corners and a ruled row of outcome figures beneath.

[](/block/reveal2)

FREE

reveal2

### Comparison Slider with Highlights

Split-layout image comparison with a sidebar featuring benefit highlights and icons alongside a draggable before/after slider. Perfect for demonstrating product improvements with detailed feature callouts.

[](/block/reveal1)

FREE

reveal1

### Before/After Image Slider

Interactive image comparison component with a draggable divider supporting horizontal and vertical orientations. Perfect for showcasing transformations, photo editing results, or design improvements.

[](/block/reveal13)

PRO

reveal13

### Hold To Compare

Press-and-hold comparison: holding the frame or the button cross-fades the earlier photograph in and swaps the corner label and caption, releasing returns to the current one.

[](/block/reveal11)

PRO

reveal11

### Diagonal Peel Compare

Comparison that lifts diagonally instead of wiping straight: dragging the corner handle shrinks a triangular clip on the covering photograph to expose the one underneath, with notes on what changed.

[](/block/reveal12)

PRO

reveal12

### Tile Flip Compare

Two photographs split across the same grid so each square can be flipped from before to after on click, with buttons to turn the whole frame over and a counter of how much has been revealed.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.