OrbitingCircles
Iconos orbitando alrededor de un centro.
- Código: RODD·AN·052
- Familia: Animaciones
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/orbiting-circles.json"
Cuándo usarlo
Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| className | string | |
| children | React.ReactNode | |
| reverse | boolean | |
| duration | number | 20 |
| delay | number | |
| radius | number | 160 |
| path | boolean | true |
| iconSize | number | 30 |
| speed | number | 1 |
Otros efectos de animaciones
- Screensaver — Elementos que rebotan por la pantalla como un salvapantallas.
- SplashCursor — Simulación de fluido que salpica al mover el cursor.
- TargetCursor — Cursor de cuatro esquinas que se ajusta a los elementos objetivo.
- ClickSpark — Chispas de partículas en el punto donde haces clic.
- CursorGrid — Rejilla cuyas celdas se iluminan alrededor del cursor.
- FadeContent — Envoltorio de fundido con desenfoque al entrar en pantalla.