SmoothCursor
Cursor con física de muelle que gira según la dirección.
- Código: RODD·AN·059
- Familia: Animaciones
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/smooth-cursor.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 |
|---|
| cursor | React.ReactNode | <DefaultCursorSVG /> |
| springConfig | { damping: number stiffness: number mass: number restDelta: number } | {
damping: 45,
stiffness: 400,
mass: 1,
restDelta: 0.001,
} |
Otros efectos de animaciones
- 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.
- GradualBlur — Desenfoque progresivo en capas para bordes cinematográficos.
- Lens — Lupa que amplía imágenes o vídeos al pasar el ratón.