Carrusel con física de derrape: la fila se pasa de la marca y regresa, cada tarjeta se inclina y se corta en diagonal con retraso según su distancia, y de la base sale humo de llanta. Arrastre con inercia, teclado y avance automático.
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.
Usar mi licencia2. Instala Carrusel derrapando
npx shadcn@latest add @furin-pro/drift-carousel| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| items | { title: string; caption?: string; from?: string; to?: string }[] | "6 tarjetas de muestra" | Tarjetas del carrusel (da la vuelta sin fin). |
| cardWidth | number | 168 | Ancho de cada tarjeta, en px (el alto es 4/3 del ancho). |
| drift | number | 1 | Cuánto derrapa (0 = sin derrape). |
| smoke | boolean | true | Humo de las llantas al derrapar. |
| autoplay | number | 2300 | Avance automático en ms (0 = apagado). |
| onChange | (index: number) => void | "" | Se llama con el índice de la tarjeta que queda al centro. |
Texto animado como un folioscopio de papel: cada hoja es un cuadro distinto (cae, se aplasta, rebota y las letras hierven a mano) y se hojean en 3D con grano de papel, canto apilado y brillo de página. Clic para volver a hojear.
Movimiento
Texto que se detiene como una cinta que frena: el tono de la ondulación se hunde, las letras se juntan, bajan en arco y se desenfocan, con bandas de VHS y un tramo de pausa. Un toque frena o arranca.
Movimiento
Palabras que se estampan una por pulso: zoom desde cámara, rebote con resorte, sacudida de cuadro, onda de choque e imagen en negativo en el primer golpe de cada compás. Toca para marcar el tempo.
Movimiento