Vertical Split Compare

Reveal8: Vertical Split Compare

The same comparison, split horizontally: one photograph above the divider, the other below, dragged up and down. Each state keeps its own pill label inside the frame and its own caption on the rule 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/reveal8?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Reveal8, reveal8Demo } from "@/components/beste/block/reveal8";

export default function Page() {
  return <Reveal8 {...reveal8Demo} />;
}

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

import { Reveal8 } from "@/components/beste/block/reveal8";

export default function Page() {
  return (
    <Reveal8
      badge={{ label: "Draw the line" }}
      heading="Sketch above, printed below, same spread."
      description="Pull the divider down to see how much of the first drawing survived."
      startPosition={45}
      top={{
        src: "/case/sketch.jpg",
        alt: "Sketches pinned to a desk",
        label: "Sketch",
        caption: "Week three, pinned and argued over",
      }}
      bottom={{
        src: "/case/printed.jpg",
        alt: "Printed editorial spread",
        label: "Printed",
        caption: "Week eleven, off the press",
      }}
      labels={{ handleLabel: "Drag to compare" }}
    />
  );
}

Props

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

type Reveal8Labels = {
  handleLabel?: string;
};

Behavior notes

• The reveal is a clip-path: inset() on the top layer rather than a height change, so neither photograph is ever squashed: both stay object-cover at full frame size while only the visible band 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 vertical touch drag from scrolling the page instead of moving the divider.
• The handle is a role="slider" button with aria-orientation="vertical" and a live aria-valuenow; up and down arrows nudge it in four percent steps, so the comparison is operable without a pointer.
• Pill labels sit in opposite corners, top left and bottom left, so each one stays inside its own half at every divider position.
• Captions live outside the picture on a shared border-t rule, one per side, with the second md:justify-self-end so the pair reads as a caption line rather than a paragraph.
• The frame changes ratio rather than height (aspect-[4/3] becoming md:aspect-[16/9]), so a phone gets a taller box to drag through and a desktop gets a wide plate.