Leistung
Pasa el ratón por el borde y verás cómo la luz te persigue.
Karte mit Spotlight-Rand
Eine Karte, deren feiner Rand genau dort aufleuchtet, wo der Cursor ist, mit leichtem Schein nach innen.
Einstellungen
Code
<div class="uv-ks"><div><h3>Leistung</h3><p>Fahr mit der Maus über den Rand – das Licht folgt dir.</p></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Wofür du ihn nutzen kannst
Der Spotlight-Effekt für Karten ist auf Landingpages von SaaS- und Entwickler-Tools beliebt: ein Raster aus Feature-Karten wie „Performance“, „Sicherheit“ und „Integrationen“ oder die drei Tarife einer Preisseite. Beim Bewegen der Maus folgt ein Lichtfleck am Rand entlang und wärmt das Innere der Karte. Ein paar Zeilen JavaScript verfolgen dafür den Zeiger.
Am besten wirkt er auf dunklen Seiten mit mehreren Karten nebeneinander, die nacheinander das Licht einfangen. Auf dem Handy gibt es keinen Cursor, das Licht bleibt dann oben in der Mitte stehen, was trotzdem ordentlich aussieht.