ImageCompare (Deslizador Antes/Después)

Esta sección muestra una vista previa del componente ImageCompare.

En esta guía presentamos el componente ImageCompare, un deslizador antes/después con divisor arrastrable y clip-path.

Vista Previa

AfterAfter
BeforeBefore

Código

import "@elizabthpazp/intera-ui/dist/globals.css";

import { ImageCompare } from "@elizabthpazp/intera-ui";

export default function Home() {
  return (
    <ImageCompare
      before="https://picsum.photos/seed/before/800/500"
      after="https://picsum.photos/seed/after/800/500"
      beforeLabel="Before" afterLabel="After"
      defaultPosition={50}
      darkMode
      className="max-w-2xl mx-auto"
    />
  );
}
// Arrastra en el handle o haz clic en cualquier punto + teclado ArrowLeft/Right (5%)
// Usa clipPath inset(0 ${100-pos}% 0 0) -> imagen siempre a tamaño completo

Detalles del Componente

El componente ImageCompare consta de:

  • Imagen posterior (after) a tamaño completo como base.
  • Imagen anterior (before) recortada con clipPath: inset(0 ${100-pos}% 0 0).
  • Divisor + asa (handle) arrastrable con eventos pointer y soporte de teclado.

Propiedades

Nombre de PropTipoPor DefectoDescripción
beforestringpicsum/seed/beforeURL de la imagen anterior.
afterstringpicsum/seed/afterURL de la imagen posterior.
beforeLabelstring"Before"Etiqueta para el antes.
afterLabelstring"After"Etiqueta para el después.
defaultPositionnumber50 (0-100)Posición inicial del divisor en %.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea.

Responsivo: aspect-[16/10] w-full, touch-none, clipPath %.

Características

  • Arrastre en el asa o clic en cualquier punto + ArrowLeft/Right (5%).
  • Sin distorsión — imagen siempre a tamaño completo vía clip.
  • Personalizable vía className/style.
  • Ubicación: src/components/interactive/ImageCompare.jsx.