StarBorder
Borde con destellos que orbitan alrededor del contenido.
- Código: RODD·AN·035
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/StarBorder-TS-TW
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 |
|---|
| as | string | button |
| className | string | - |
| color | string | white |
| speed | string | 6s |
| thickness | number | 1 |
| backgroundColor | string | '#000000' |
| textColor | string | '#ffffff' |
| borderColor | string | '#222222' |
Otros efectos de animaciones
- Antigravity — Campo de partículas 3D que se repelen del cursor.
- CoolMode — Partículas que salen al hacer clic en un botón.
- ElasticLine — Línea elástica que se estira con el ratón.
- GlareHover — Reflejo de luz realista que cruza un elemento al pasar el ratón.
- HalftoneReveal — Trama de semitono de imprenta que se aclara alrededor del cursor.
- MagicRings — Anillos mágicos concéntricos que siguen al ratón.