Drag Compare Slider

Reveal6: Drag Compare Slider

A true before and after: two photographs stacked in one frame with a draggable divider between them, labelled pills in the top corners, and a ruled row of facts underneath.

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

Base UI flavor

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

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

Quick start

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

import { Reveal6, reveal6Demo } from "@/components/beste/block/reveal6";

export default function Page() {
  return <Reveal6 {...reveal6Demo} />;
}

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

import { Reveal6 } from "@/components/beste/block/reveal6";

export default function Page() {
  return (
    <Reveal6
      badge={{ label: "Before and after" }}
      heading="Drag the line and watch nine years disappear."
      description="The building did not change. The way you find your way around it did."
      startPosition={50}
      before={{ src: "/case/before.jpg", alt: "Bare concrete stairwell", label: "Before" }}
      after={{ src: "/case/after.jpg", alt: "Wayfinding signage in place", label: "After" }}
      facts={[
        { title: "Components in the kit", value: "11" },
        { title: "Signs installed", value: "1,400" },
      ]}
      labels={{ handleLabel: "Drag to compare" }}
    />
  );
}

Props

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

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

type Reveal6Labels = {
  handleLabel?: string;
};

Behavior notes

• The reveal is a clip-path: inset() on the before layer rather than a width change, so neither photograph is ever squashed: both stay object-cover at full frame size while only the visible slice changes.
• Dragging works anywhere in the frame, not only on the handle: onPointerDown captures the pointer on the container, so a fast drag that leaves the box still tracks until release.
• touch-none is set on the frame, which is what stops a touch drag from scrolling the page instead of moving the divider.
• The handle is a role="slider" button with aria-valuemin, aria-valuemax and a live aria-valuenow, and arrow keys nudge it in four percent steps, so the comparison is operable without a pointer.
• Both labels are always visible in the top corners, one light and one dark, so the reader knows which side is which before touching anything.
• startPosition is only the initial value: the component owns the position from then on, so passing a new one does not fight the user's drag.
• The frame switches ratio rather than height (aspect-[16/10] becoming md:aspect-[2/1]), keeping the pair cinematic on desktop without a letterbox strip on a phone.