Diagonal Peel Compare

Reveal11: Diagonal Peel Compare

A comparison peeled from the corner: the cover image is clipped to a triangle you drag along the diagonal, lifting it off the picture underneath. Three ruled notes explain what survived the change.

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

Base UI flavor

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

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

Quick start

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

import { Reveal11, reveal11Demo } from "@/components/beste/block/reveal11";

export default function Page() {
  return <Reveal11 {...reveal11Demo} />;
}

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

import { Reveal11 } from "@/components/beste/block/reveal11";

export default function Page() {
  return (
    <Reveal11
      badge={{ label: "Peel it back" }}
      heading="Pull the corner down and the sketch is still under there."
      description="The printed spread sits on top. Drag diagonally to lift it off."
      startPosition={35}
      cover={{ src: "/case/printed.jpg", alt: "Printed editorial spread", label: "Printed" }}
      beneath={{ src: "/case/sketch.jpg", alt: "Sketches pinned to a desk", label: "Sketch" }}
      notes={[
        { title: "The grid survived", description: "Column widths and margins are unchanged." },
        { title: "The type did not", description: "Three weights were dropped at real size." },
      ]}
      labels={{ handleLabel: "Drag to peel", hint: "Drag anywhere on the picture." }}
    />
  );
}

Props

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

type PeelNote = {
  title: string;
  description: string;
};

type Reveal11Labels = {
  handleLabel?: string;
  hint?: string;
};

Behavior notes

• The peel is a clip-path: polygon() triangle anchored to the top left corner, whose legs are derived from one value (200 - position * 2), so at zero the cover still fills the frame and at one hundred it is gone.
• Both pointer axes feed that single value (100 - (x + y) / 2), which is what makes a diagonal drag feel like lifting a sheet rather than moving two independent sliders.
• Dragging works anywhere on the picture: the frame captures the pointer, so a fast diagonal drag that leaves the box still tracks until release.
• touch-none is set on the frame, so a diagonal touch drag peels the corner instead of scrolling the page.
• The handle is a role="slider" button with a live aria-valuenow; the arrow keys peel and unpeel in four percent steps, so the reveal works without a pointer.
• Labels sit in opposite corners, cover top left and beneath bottom right, so each stays on its own side of the diagonal at every position.
• The frame changes ratio rather than height (aspect-[4/3] becoming md:aspect-[16/9]), so the diagonal has a sensible slope at both ends of the breakpoint range.