Rendimiento
Pasa el ratón por el borde y verás cómo la luz te persigue.
Tarjeta con borde de luz
Una tarjeta cuyo borde fino se ilumina justo donde está el cursor, con un brillo suave hacia dentro.
Ajustes
Código
<div class="uv-ks"><div><h3>Rendimiento</h3><p>Pasa el ratón por el borde y verás cómo la luz te persigue.</p></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Dónde usarlo
El efecto spotlight en tarjetas es un clásico de las landings de SaaS y herramientas para desarrolladores: una rejilla de funciones como «Rendimiento», «Seguridad» e «Integraciones», o los tres planes de una sección de precios. Al mover el ratón, un foco de luz lo sigue por el borde y templa el interior. Unas líneas de JavaScript siguen el puntero.
Luce más en páginas oscuras con varias tarjetas en fila, cada una recogiendo la luz a medida que pasa el cursor. En el móvil no hay cursor, así que la luz se queda arriba en el centro, y aun así queda limpio.