Carrusel con paneo de latigazo entre escenas: resorte con rebote, desenfoque de movimiento y separación cromática que siguen la velocidad, paralaje entre fondo y letras. Flechas, teclado, puntos y arrastre con inercia.
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 Paneo rápido
npx shadcn@latest add @furin-pro/whip-pan| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| slides | { title: string; caption?: string; from?: string; to?: string; accent?: string; image?: string }[] | "5 escenas de muestra" | Escenas del carrusel. |
| autoplay | number | 3400 | Avance automático en ms (0 = apagado). |
| blur | number | 1 | Fuerza del desenfoque de movimiento. |
| snap | number | 1 | Fuerza del latigazo: rigidez del resorte. |
| split | number | 7 | Separación cromática durante el paneo, en px. |
| onChange | (index: number) => void | "" | Se llama con el índice de la escena a la que llega el paneo. |
Al hacer clic, el papel se quema desde ese punto: borde incandescente irregular, brasas que reptan por el carbón, papel tostado, luz naranja sobre lo de abajo y ceniza, chispas y trozos ardiendo que vuelan. WebGL con ruido; se puede reiniciar.
Movimiento
El contenido aparece en rebanadas rápidas como un estrobo: cada cuadro enciende franjas distintas con destello, vibración y aberración cromática hasta asentarse. Una sola copia del contenido, con máscaras CSS.
Movimiento
Tarjeta de hule: un cuerpo blando de cuatro esquinas con resortes. La que agarras sigue al puntero, las lejanas se retrasan y se estiran; al soltar regresa con latigazo y rebotes. El hule se aclara donde se estira.
Movimiento