Mazo

Mazo de tarjetas que se baraja al arrastrar la de arriba: inercia, giro y regreso al fondo con resorte. También con clic o teclado.

Vista previa en vivo

01 / 05

AmanecerLuz fría sobre la bahía

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { CardStack } 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
cards	{ title: string; caption?: string; from?: string; to?: string }[]	"5 tarjetas de muestra"	Tarjetas del mazo, de arriba hacia abajo.
width	number	250	Ancho de cada tarjeta, en px.
fan	number	18	Cuánto asoma cada tarjeta de abajo, en px.
messiness	number	4	Giro máximo de las tarjetas del mazo, en grados.
threshold	number	90	Distancia de arrastre que baraja la tarjeta, en px.
onShuffle	(topIndex: number) => void	""	Se llama con el índice de la tarjeta que acaba de quedar arriba.

Perfil con foil
Gratis
Tarjeta de perfil con lámina holográfica: se inclina en 3D con el cursor y la iridiscencia cambia con el ángulo.
Tarjetas
Tarjeta con capas
Gratis
Capas reales en 3D (cielo, estrellas, planeta, anillo, dunas, texto y brillo) que se separan a distintas profundidades al inclinar.
Tarjetas
Tarjeta de titanio
Gratis
Tarjeta de titanio cepillado con reflejo que cambia al inclinarse.
Tarjetas