ScrollStack
Tarjetas que se apilan con profundidad al hacer scroll.
- Código: RODD·CP·039
- Familia: Componentes
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/ScrollStack-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 |
|---|
| children | ReactNode | required |
| className | string | "" |
| itemDistance | number | 100 |
| itemScale | number | 0.03 |
| itemStackDistance | number | 30 |
| stackPosition | string | "20%" |
| scaleEndPosition | string | "10%" |
| baseScale | number | 0.85 |
| scaleDuration | number | 0.5 |
| rotationAmount | number | 0 |
| blurAmount | number | 0 |
| useWindowScroll | boolean | false |
| onStackComplete | function | undefined |
Otros efectos de componentes
- Terminal — Terminal animado que escribe comandos.
- AnimatedList — Lista con entrada escalonada y navegación con teclado.
- CardNav — Barra de navegación que se expande en paneles de tarjetas.
- Counter — Contador de rodillos animado con easing.
- Dock — Dock estilo macOS con magnificación por proximidad.
- ElementAlongSvgPath — Elementos que se mueven siguiendo un trazado SVG.