Self Sweeping Compare

Reveal10: Self Sweeping Compare

A comparison that plays itself: the seam walks from edge to edge and turns around, and clicking anywhere on the picture freezes it exactly where you want to look. One round control between the two captions puts the sweep back on.

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/reveal10?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Reveal10, reveal10Demo } from "@/components/beste/block/reveal10";

export default function Page() {
  return <Reveal10 {...reveal10Demo} />;
}

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

import { Reveal10 } from "@/components/beste/block/reveal10";

export default function Page() {
  return (
    <Reveal10
      badge={{ label: "Wipe it across" }}
      heading="The shelf redesigns itself while you watch."
      description="The seam sweeps on its own. Click the picture to stop it."
      duration={7}
      before={{
        src: "/packaging/old.jpg",
        alt: "Unbranded paper packaging",
        label: "2019",
        caption: "Six colors, four typefaces, unreadable at arm's length.",
      }}
      after={{
        src: "/packaging/new.jpg",
        alt: "Minimal coffee packaging",
        label: "Today",
        caption: "One ink, uncoated stock, origin on the face of the bag.",
      }}
      labels={{
        playLabel: "Let the seam sweep",
        pauseLabel: "Hold the seam still",
        frameLabel: "Click to stop the sweep",
      }}
    />
  );
}

Props

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

type Reveal10Labels = {
  playLabel?: string;
  pauseLabel?: string;
  frameLabel?: string;
};

Behavior notes

• The sweep is a 40 millisecond interval whose step is derived from duration, and a direction ref flips at each edge, so the seam bounces rather than jumping back to the start.
• The timer never starts when the visitor prefers reduced motion: matchMedia("(prefers-reduced-motion: reduce)") is checked before the interval is created, leaving a still comparison that can be clicked.
• The whole frame is one button with an aria-label, so clicking the picture stops the sweep at the clicked position, and the control is reachable by keyboard as a single target.
• The seam is the only furniture on the picture: a hairline with a small dot at its foot, no track and no thumb parked underneath, which was the point of this variant.
• The reveal is a clip-path: inset() on the before layer, so neither photograph is squashed while the visible slice changes.
• The round play control sits between the two captions on a md:grid-cols-[1fr_auto_1fr] row, so it reads as the pivot of the comparison rather than a media button under it.
• That control carries aria-pressed and swaps its own label between the play and pause strings, so its state is announced rather than only drawn.