Tarjeta que se arrastra y se lanza: rebota en las paredes con inercia y, mientras va rápido, un estrobo interno deja copias fantasma como una foto de exposición múltiple que se apagan solas.
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 Tarjeta estroboscópica
npx shadcn@latest add @furin-pro/motion-trail-card| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| children | ReactNode | "tarjeta de muestra" | Contenido de la tarjeta (también de las copias). |
| width | number | 176 | Ancho de la tarjeta, en px. |
| height | number | 224 | Alto de la tarjeta, en px. |
| ghosts | number | 8 | Cuántas copias fantasma como máximo. |
| strobeMs | number | 52 | Cada cuántos ms dispara el flash y deja una copia. |
| bounce | number | 0.86 | Rebote contra las paredes (0 = sin rebote, 1 = elástico). |
| friction | number | 0.75 | Qué tan rápido se frena la tarjeta lanzada. |
| autoThrow | number | 2400 | La tarjeta se lanza sola cada tantos ms si nadie la toca (0 = apagado). |
| from | string | "#ffd23d" | Color de arranque de la tarjeta de muestra. |
| to | string | "#ff5a47" | Color de cierre de la tarjeta de muestra. |
Indicador de carga: un trompo metálico (shader con reflejos de estudio, torneado, aro moleteado y franjas anodizadas) con la física real del trompo pesado: precesa, nuta, se frena por fricción, cabecea y le dan cuerda de nuevo. Clic para darle cuerda.
Movimiento
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.
Movimiento
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