BubbleMenu
Menú de burbujas que se expande con elementos escalonados.
- Código: RODD·CP·005
- Familia: Componentes
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/BubbleMenu-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 |
|---|
| logo | ReactNode | string | — |
| onMenuClick | (open: boolean) => void | — |
| className | string | — |
| style | CSSProperties | — |
| menuAriaLabel | string | "Toggle menu" |
| menuBg | string | "#fff" |
| menuContentColor | string | "#111" |
| useFixedPosition | boolean | false |
| items | MenuItem[] | DEFAULT_ITEMS |
| animationEase | string | "back.out(1.5)" |
| animationDuration | number | 0.5 |
| staggerDelay | number | 0.12 |
Otros efectos de componentes
- 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.
- GlassSurface — Superficie de cristal estilo Apple con distorsión en tiempo real.
- LineSidebar — Barra lateral cuyos elementos reaccionan a la cercanía del cursor.
- Masonry — Masonry responsive con reflujo animado.