ShimmerButton
Botón con un destello que recorre su borde.
- Código: RODD·MI·044
- Familia: Microinteracciones
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/shimmer-button.json"
Cuándo usarlo
Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| shimmerColor | string | "#ffffff" |
| shimmerSize | string | "0.05em" |
| borderRadius | string | "100px" |
| shimmerDuration | string | "3s" |
| background | string | "rgba(0, 0, 0, 1)" |
| className | string | |
| children | React.ReactNode | |
Otros efectos de microinteracciones
- SpringCheck — Checkbox con muelle que marca, tacha y atenúa la tarea.
- TearTicket — Entrada cuya matriz se arranca a mano con fibras de papel.
- AnimatedBadge — Etiqueta con brillo animado para novedades.
- CodeSlots — Campo de código de un solo uso (OTP) con animación por dígito.
- FuseButton — Botón con “deshacer” sobre una mecha que se consume.
- LatticeLoader — Indicador de estado de agente IA con rejilla de puntos en ola.