Lens
Lupa que amplía imágenes o vídeos al pasar el ratón.
- Código: RODD·AN·051
- Familia: Animaciones
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/lens.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 |
|---|
| children | React.ReactNode | |
| zoomFactor | number | 1.3 |
| lensSize | number | 170 |
| position | Position | { x: 0, y: 0 } |
| defaultPosition | Position | |
| isStatic | boolean | false |
| duration | number | 0.1 |
| lensColor | string | "black" |
| ariaLabel | string | "Zoom Area" |
Otros efectos de animaciones
- MetallicPaint — Pintura metálica líquida aplicada sobre cualquier logo.
- PixelSwap — Los píxeles cubren, intercambian y revelan contenido.
- ScrollExpand — Un marco de imagen que crece a pantalla completa con el scroll.
- StarBorder — Borde con destellos que orbitan alrededor del contenido.
- AnimatedContent — Envoltorio que anima cualquier contenido al entrar en pantalla.
- Confetti — Lanza confeti para celebrar una acción.