Holograma

Tarjeta que se inclina en 3D siguiendo al cursor, con una lámina holográfica y un brillo especular que reaccionan al movimiento.

Vista previa en vivo

FurinPro

HologramaEdición fundadora · foil irrepetible

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 Holograma

npx shadcn@latest add @furin-pro/holograma

Prop	Tipo	Por defecto	Descripción
children	ReactNode	"tarjeta de ejemplo"	Contenido de la tarjeta; si no se pasa, se dibuja una tarjeta coleccionable de ejemplo.
width	number	300	Ancho de la tarjeta en px.
height	number	420	Alto de la tarjeta en px.
maxTilt	number	16	Inclinación máxima en grados cuando el cursor llega a una orilla.
scale	number	1.04	Cuánto crece la tarjeta al pasar el cursor (1 = no crece).
foil	number	0.9	Intensidad de la lámina holográfica, de 0 a 1.
glare	number	0.7	Intensidad del brillo especular que sigue al cursor, de 0 a 1.
hue	number	0	Giro de color de la lámina, en grados (0 a 360).
perspective	number	900	Distancia de la cámara en px: más baja, más exagerada la perspectiva.
radius	number	22	Redondeo de las esquinas en px.
animarEnReposo	boolean	true	Si es true, la tarjeta se mece sola cuando nadie la toca (útil en pantallas táctiles).
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	"{}"	Estilos en línea del contenedor.