Botón de vidrio

Botón de vidrio líquido que refracta el fondo.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { GlassButton } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
children	ReactNode	""	Texto del botón.
size	"sm" \| "md" \| "lg"	"md"	Alto del botón: pequeño, mediano o grande.
arrow	boolean	true	Muestra una flecha al final del texto.
blur	number	1.2	Desenfoque del fondo detrás del vidrio, en px.
refraction	number	1	Fuerza de la refracción en el borde (0 = sin curvar la luz).
tint	string	"rgba(255,255,255,0.12)"	Color del tinte del vidrio.
color	string	"#fff"	Color del texto.
scene	boolean	false	Pinta una escena de color animada detrás (para verlo refractar).
disabled	boolean	false	Desactiva el botón.

Copiar
Gratis
Botón de copiar: el contorno del ícono se transforma en una palomita con un morph de trazo y resorte, y el texto se copia de verdad con navigator.clipboard (con respaldo).
Botones
Descargar
Gratis
Botón que se afina hasta ser una barra de progreso, avanza a ritmo irregular como una red real y termina en una palomita. Con href descarga el archivo de verdad.
Botones
Deslizar para confirmar
Gratis
Pomo con física que se arrastra hasta el final para confirmar; si se suelta antes regresa con resorte y rebote. Accesible como slider.
Botones