GooeyNav
Navegación cuyo indicador se deforma como una gota.
- Código: RODD·CP·025
- Familia: Componentes
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/GooeyNav-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 |
|---|
| items | GooeyNavItem[] | [] |
| animationTime | number | 600 |
| particleCount | number | 15 |
| particleDistances | [number, number] | [90, 10] |
| particleR | number | 100 |
| timeVariance | number | 300 |
| colors | number[] | [1, 2, 3, 1, 2, 3, 1, 4] |
| initialActiveIndex | number | 0 |
Otros efectos de componentes
- 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.
- PixelCard — Tarjeta que se revela con una expansión de píxeles.
- SpecularButton — Botón de cristal con luz especular que recorre su borde.
- Terminal — Terminal animado que escribe comandos.
- AnimatedList — Lista con entrada escalonada y navegación con teclado.