BorderBeam
Haz de luz que recorre el borde de un contenedor.
- Código: RODD·AN·041
- Familia: Animaciones
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/border-beam.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 |
|---|
| size | number | 50 |
| duration | number | 6 |
| delay | number | 0 |
| colorFrom | string | "#ffaa40" |
| colorTo | string | "#9c40ff" |
| transition | Transition | |
| className | string | |
| style | React.CSSProperties | |
| reverse | boolean | false |
| initialOffset | number | 0 |
| borderWidth | number | 1 |
Otros efectos de animaciones
- 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.
- MetaBalls — Metabolas líquidas que se fusionan y separan.
- ParallaxFloating — Imágenes flotantes con parallax al mover el ratón.