MagicCard
Tarjeta con un foco de luz que sigue al cursor e ilumina sus bordes.
- Código: RODD·CP·057
- Familia: Componentes
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/magic-card.json"
Cuándo usarlo
Sustituyen a un componente estándar cuando la experiencia es parte del producto.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| children | unknown | |
| className | unknown | |
| gradientSize | number | 200 |
| gradientColor | string | "#262626" |
| gradientOpacity | number | 0.8 |
| gradientFrom | string | "#9E7AFF" |
| gradientTo | string | "#FE8BBB" |
| mode | string | "gradient" |
Otros efectos de componentes
- MorphSlider — Slider WebGL que funde imágenes con una transición líquida.
- PixelImage — Imagen que se revela píxel a píxel.
- SpotlightCard — Tarjeta con foco de luz que sigue al cursor.
- TiltedCard — Tarjeta 3D que se inclina hacia el puntero.
- BorderGlow — Borde con brillo de malla degradada que sigue la dirección del cursor.
- CardSwap — Pila de tarjetas que se intercambian solas.