Vidrio acanalado

Panel de vidrio estriado que parte el contenido de atrás en franjas refractadas que se mueven con el cursor.

Vista previa en vivo

Acanalado

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 Vidrio acanalado

npx shadcn@latest add @furin-pro/ribbed-glass

Prop	Tipo	Por defecto	Descripción
children	ReactNode	""	Contenido que queda detrás del panel (se ve partido en franjas).
flute	number	26	Ancho aproximado de cada acanaladura, en px.
power	number	-1.2	Potencia de la lente: negativa invierte cada franja, positiva la comprime.
dispersion	number	0.12	Separación de colores en los bordes de cada franja.
tint	string	"rgba(255,255,255,0.08)"	Color del tinte del vidrio.
inset	number	28	Margen entre el borde y el panel, en px.
radius	number	22	Radio de las esquinas del panel, en px.
slide	number	22	Cuánto se desliza el panel con el cursor, en px.
scene	boolean	false	Pinta una escena de color detrás del panel.
auto	boolean	false	El panel se mece solo cuando no hay cursor.

Vidrio empañado
Pro
Vidrio empañado que limpias con el cursor como un espejo de baño; se vuelve a empañar lento y suelta gotitas.
Vidrio
Vidrio roto
Pro
Un clic estrella el vidrio desde ese punto; los fragmentos caen con física y luego se rearma de un latigazo.
Vidrio
Vitral
Pro
Vitral cuyas piezas se iluminan con la luz del cursor y proyectan su color sobre el suelo.
Vidrio