Tarjeta de vidrio

Vidrio líquido con refracción, borde especular y reflejo que sigue al cursor.

Vista previa en vivo

Vidrio líquido

Refracción, borde especular y un reflejo que te sigue.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { GlassCard } 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	""	Título de la tarjeta.
caption	string	""	Texto pequeño debajo del título.
radius	number	30	Radio de las esquinas, en px.
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).
dispersion	number	0.12	Separación de colores (aberración cromática) en el borde, de 0 a 0.5.
tint	string	"rgba(255,255,255,0.10)"	Color del tinte del vidrio.
glare	number	0.55	Intensidad del reflejo que sigue al cursor, de 0 a 1.
tilt	number	6	Inclinación máxima de la tarjeta bajo el cursor, en grados.
scene	boolean	false	Pinta una escena de color animada detrás (para verla refractar).

Tarjeta satinada
Gratis
Un barrido de brillo satinado al pasar el cursor.
Tarjetas
Instantánea
Pro
Foto instantánea que cae y se revela poco a poco, con grano; con un clic se sacude y se revela otra vez.
Tarjetas
Recibo
Pro
Impresora de tickets: el recibo térmico sale línea por línea, con grano de papel y borde dentado, y se arranca al terminar.
Tarjetas