Tarjetas
Gratis
Tarjeta con capas
Capas reales en 3D (cielo, estrellas, planeta, anillo, dunas, texto y brillo) que se separan a distintas profundidades al inclinar.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 9 (8 ajustables)
Nuevo mundo
Explora
Capas a distintas profundidades.
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { ParallaxCard } 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.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| children | ReactNode | "Explora" | Título grande de la tarjeta. |
| eyebrow | string | "Nuevo mundo" | Texto pequeño sobre el título. |
| caption | string | "Capas a distintas profundidades." | Texto de apoyo debajo del título. |
| width | number | 300 | Ancho máximo de la tarjeta, en px. |
| tilt | number | 14 | Inclinación máxima bajo el cursor, en grados. |
| depth | number | 1 | Cuánto se separan las capas (1 = normal, 0 = planas). |
| skyFrom | string | "#12104a" | Color del cielo, arriba. |
| skyTo | string | "#ff7a8a" | Color del cielo en el horizonte. |
| accent | string | "#ffb36b" | Color del sujeto (el planeta y su anillo). |
Sigue explorando
Tarjeta de vidrio
GratisVidrio líquido con refracción, borde especular y reflejo que sigue al cursor.
Tarjetas