Anatomía

El componente se organiza en tres zonas apiladas. Arriba, un bloque de cabecera centrado con una insignia de proyecto (icono Layout + nombre del proyecto), un titular y un subtítulo que aparecen al hacer scroll mediante useInView. Debajo se encuentra el contenedor de comparación: dos paneles posicionados en absoluto dentro de un div relativo. El panel 'antes' rellena el contenedor por completo; el panel 'después' lo cubre y se recorta por la izquierda con clip-path. Una barra vertical de acento en la posición del arrastre termina en un tirador circular GripVertical. Cada panel enumera cuatro elementos (cabecera, hero, maquetación, CTA) con iconos Minus o Plus para señalar regresión o mejora. La tercera zona es una cuadrícula de estadísticas responsive opcional que se anima en escalonado.

Cómo funciona

El truco es un único valor de estado React `sliderPosition` (0–100, inicialmente 50). Cuando el usuario presiona sobre el div del tirador, un booleano `isDragging` pasa a true. En cada movimiento de ratón/táctil sobre el contenedor, `handleMove` lee el clientX del evento, resta el borde izquierdo del contenedor obtenido con getBoundingClientRect, divide por el ancho del contenedor y multiplica por 100. Ese porcentaje se escribe directamente en el estado. El panel 'después' lo recibe como `clipPath: inset(0 0 0 ${sliderPosition}%)` mediante un estilo inline, aquí no hace falta ningún spring de Framer Motion, la actualización es instantánea y eso mantiene la sensación física del arrastre. El div del tirador vertical recibe `left: ${sliderPosition}%` más `transform: translateX(-50%)` para mantenerse centrado en el borde.

Cómo crearlo en React

1. Configurar el contenedor y seguir el estado del arrastre

   Crea un ref en el contenedor de comparación y dos valores de estado: un número para la posición de división y un booleano para el arrastre. Asocia onMouseDown al tirador y onMouseUp/onMouseLeave al contenedor para que el arrastre se detenga cuando el puntero sale.

   const sliderRef = useRef<HTMLDivElement>(null);
   const [sliderPosition, setSliderPosition] = useState(50);
   const [isDragging, setIsDragging] = useState(false);

2. Convertir las coordenadas del puntero en un porcentaje

   En el manejador de movimiento, obtén los límites del contenedor con getBoundingClientRect, acota el desplazamiento clientX entre 0 y el ancho del contenedor, luego divide para obtener un valor de 0–100. Escríbelo en el estado dentro de un useCallback para que la referencia se mantenga estable entre renders.

   const handleMove = useCallback((clientX: number) => {
     if (!sliderRef.current) return;
     const rect = sliderRef.current.getBoundingClientRect();
     const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
     setSliderPosition((x / rect.width) * 100);
   }, []);

3. Recortar el panel 'después' con clip-path inset

   Ambos paneles van en absoluto con inset:0. El panel 'antes' no necesita recorte. El panel 'después' recibe un clipPath inline que corta todo lo que está a la izquierda de la posición del slider. Sin transición CSS, la actualización es síncrona con el arrastre, así que no hay retraso.

   <div style={{
     position: "absolute",
     inset: 0,
     clipPath: `inset(0 0 0 ${sliderPosition}%)`,
   }}>
     {/* after content */}
   </div>

4. Añadir soporte táctil

   Los eventos táctiles reflejan exactamente los eventos de ratón. En el contenedor, añade onTouchMove que lea e.touches[0].clientX y lo pase a la misma función handleMove. Añade onTouchEnd que reinicie isDragging. Eso cubre el móvil sin ninguna librería adicional.

   onTouchMove={(e) => handleMove(e.touches[0].clientX)}
   onTouchEnd={() => setIsDragging(false)}

Cuándo usarlo

Ideal para páginas de portafolio de agencias, casos de estudio y landing pages de producto donde necesitas demostrar una transformación, no solo afirmarla. El slider funciona como sección en mitad de una página larga; no sustituye a un hero. Evítalo cuando los estados 'antes' y 'después' son demasiado parecidos visualmente, el contraste debe ser evidente para justificar la interacción. En pantallas muy pequeñas la altura fija de 400px puede resultar apretada; considera reducirla o cambiar a un sencillo conmutador con pestañas por debajo de un breakpoint.

Usado por

• Stripe, Utiliza comparaciones en paralelo y por revelación en sus casos de estudio de UI de pago para mostrar las mejoras del panel del comerciante.
• Figma, Los patrones de revelación antes/después aparecen en las páginas de anuncio de funciones de Figma para contrastar las experiencias antiguas y nuevas del editor.
• Webflow, Los sliders de comparación aparecen en los casos de estudio de clientes de Webflow para demostrar la mejora de rendimiento y diseño del sitio.
• Shopify, Las historias de éxito de comerciantes usan visuales antes/después para mostrar transformaciones de tienda, a veces con sliders interactivos.

FAQ