CardSwap
Pila de tarjetas que se intercambian solas.
- Código: RODD·CP·007
- Familia: Componentes
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/CardSwap-TS-TW
Cuándo usarlo
Sustituyen a un componente estándar cuando la experiencia es parte del producto.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| width | number | string | 500 |
| height | number | string | 400 |
| cardDistance | number | 60 |
| verticalDistance | number | 70 |
| delay | number | 5000 |
| pauseOnHover | boolean | false |
| onCardClick | (idx: number) => void | undefined |
| skewAmount | number | 6 |
| easing | 'linear' | 'elastic' | 'elastic' |
| children | ReactNode | required |
Otros efectos de componentes
- CurvedInput — Campo de texto curvado con botón de envío.
- DragElements — Elementos que puedes arrastrar y lanzar.
- FlyingPosters — Pósters 3D que vuelan en bucle con el scroll.
- InfiniteMenu — Esfera infinita de elementos navegable con arrastre.
- MagicCard — Tarjeta con un foco de luz que sigue al cursor e ilumina sus bordes.
- ModelViewer — Visor de modelos 3D con órbita e iluminación.