Divisor de vidrio

Ola de vidrio líquido entre dos secciones que refracta ambas y se desliza con el cursor.

Vista previa en vivo

Antes

Despué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 Divisor de vidrio

npx shadcn@latest add @furin-pro/glass-wave-divider

Prop	Tipo	Por defecto	Descripción
top	ReactNode	"Antes"	Contenido de la sección de arriba.
bottom	ReactNode	"Después"	Contenido de la sección de abajo.
topBackground	string	"linear-gradient(160deg,#0b0f2a,#25155e)"	Fondo CSS de la sección de arriba.
bottomBackground	string	"linear-gradient(160deg,#fff3dd,#ffc9a1)"	Fondo CSS de la sección de abajo.
amplitude	number	24	Altura de la ola, en px.
wavelength	number	270	Largo de cada ola, en px.
thickness	number	86	Grosor de la cinta de vidrio, en px.
zoom	number	2.3	Cuánto amplía el vidrio lo que hay detrás.
speed	number	34	Velocidad a la que fluye la ola, en px/s.
dispersion	number	0.14	Separación de colores en los bordes del vidrio.

Gota de vidrio
Pro
Una gota de vidrio líquido sigue al cursor y se funde con los bordes de los botones, estirándose como un líquido.
Vidrio
Nivel de burbuja
Pro
Deslizador con forma de nivel de burbuja: la burbuja sigue el valor con física y el cuerpo se inclina como un nivel de verdad.
Vidrio
Plástico de burbujas
Pro
Burbujas de plástico que se hunden al pasar y revientan al clic con sonido; las reventadas quedan arrugadas.
Vidrio