Hold To Compare

Reveal13: Hold To Compare

The simplest comparison there is: press and hold to put the old state back, let go and the current one returns. The picture, the pill label, the button and the caption all follow the hold.

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

Base UI flavor

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

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

Quick start

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

import { Reveal13, reveal13Demo } from "@/components/beste/block/reveal13";

export default function Page() {
  return <Reveal13 {...reveal13Demo} />;
}

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

import { Reveal13 } from "@/components/beste/block/reveal13";

export default function Page() {
  return (
    <Reveal13
      badge={{ label: "Hold to see" }}
      heading="Press and hold to put the old control panel back."
      description="Let go and the current one returns."
      resting={{
        src: "/hardware/now.jpg",
        alt: "Minimal control surface",
        label: "Now",
        description: "One dial, one indicator and nothing else on the face.",
      }}
      held={{
        src: "/hardware/before.jpg",
        alt: "Audio hardware on a bench",
        label: "Before",
        description: "Four buttons, two switches and an unreadable legend.",
      }}
      changes={[
        { title: "Controls removed", value: "Five" },
        { title: "Setup support tickets", value: "Halved" },
      ]}
      labels={{
        holdLabel: "Hold to see the old panel",
        holdingLabel: "Release to come back",
        hint: "Works with a mouse, a finger, or the space bar.",
      }}
    />
  );
}

Props

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

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

type Reveal13Labels = {
  holdLabel?: string;
  holdingLabel?: string;
  hint?: string;
};

Behavior notes

• Both images stay mounted and the held one is cross-faded with transition-opacity duration-300, so the swap never flashes an empty frame while a file loads.
• The hold works on the picture itself and on the button, and both release on onPointerLeave and onPointerCancel, so a pointer that slides off the frame mid-press cannot leave the block stuck in the held state.
• Keyboard users get the same interaction: space or enter on the button holds on keydown and releases on keyup, which is why the control carries aria-pressed rather than pretending to be a toggle.
• The pill label swaps its own colors between the two states (light on dark while held), so the state is legible on the picture without reading the button.
• The caption under the frame is taken from the active state, so the explanation changes with the picture instead of describing both at once.
• touch-none is set on the frame, so a press and hold on a phone compares rather than scrolls or opens a context menu.
• The frame changes 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.