Antes y después

Comparador con divisor de vidrio que se arrastra.

Vista previa en vivo

AntesDespués

Instalación

1. Configura el registro Pro una sola vez

Los componentes Pro no están en npm ni en el registro público de shadcn: se instalan con tu licencia desde el registro privado de Furin.

2. Instala Antes y después

npx shadcn@latest add @furin-pro/compare-slider

Prop	Tipo	Por defecto	Descripción
before	ReactNode	""	Escena de "antes"; por defecto, un paisaje generado sin retocar.
after	ReactNode	""	Escena de "después"; por defecto, el mismo paisaje revelado.
beforeLabel	string	"Antes"	Etiqueta de la izquierda.
afterLabel	string	"Después"	Etiqueta de la derecha.
defaultPosition	number	50	Posición inicial del divisor, de 0 a 100.
onChange	(position: number) => void	""	Se llama al mover el divisor, con el valor de 0 a 100.
trigger	"drag" \| "hover"	"drag"	Cómo se mueve el divisor: arrastrando o siguiendo al cursor.
intro	boolean	true	Un barrido de bienvenida que enseña que se puede mover.
ratio	string	"4 / 3"	Proporción de la imagen, p. ej. "4 / 3".
radius	number	24	Radio de las esquinas, en px.
refraction	number	1	Fuerza de la refracción de la lente del divisor (0 = sin curvar la luz).

Coverflow
Gratis
Portadas en perspectiva con reflejo: la central mira de frente y las demás se abren en abanico; flechas, arrastre con inercia, clic y teclado.
Galerías
Galería en órbita
Gratis
Tarjetas con escenas generadas en un carrusel circular 3D: gira solo, se arrastra con inercia y un clic trae una tarjeta al frente.
Galerías
Mosaico
Gratis
Mosaico de columnas que aparece pieza por pieza al entrar en vista, con rebote suave y un destello; al pasar el cursor la pieza se acerca y muestra su título.
Galerías