Card Spotlight

Ein Lichtkreis um den Zeiger enthüllt den Inhalt, während der Rest dunkel bleibt.

Füge bei [wo] einen „Cursor Spotlight“-Effekt hinzu (auch flashlight cursor oder spotlight effect genannt).
Ein weicher Lichtkreis soll dem Zeiger folgen und den Inhalt darunter sichtbar machen, während der Rest des Bereichs abgedunkelt bleibt.
Zeige auf Touch-Geräten, wo es keinen Zeiger zum Folgen gibt, den Inhalt stattdessen voll ausgeleuchtet.

Ein heller Glanzpunkt folgt dem Zeiger wie eine Spiegelung über die Kartenoberfläche.

Füge bei [wo] einen „Glare / Holographic Card“-Effekt hinzu (auch glare card oder glare hover genannt).
Ein weicher, heller Glanzpunkt soll dem Zeiger über die Kartenoberfläche folgen wie Licht, das sich darauf spiegelt, während sich die Karte leicht zum Zeiger neigt; beim Verlassen blendet beides aus: weich und dezent.
Lass Klicks durch die Glanzebene hindurch, halte den Inhalt darunter lesbar und zeige die Karte auf Touch-Geräten ohne Glanz.

Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.

Füge bei [wo] einen „Text Reveal Card“-Effekt hinzu (auch spotlight text reveal genannt).
Wenn der Zeiger über die Karte fährt, soll ihm eine senkrechte Kante dicht folgen und auf einer Seite verborgenen Text freilegen: weich und direkt, ohne Verzögerung.
Auf Touch-Geräten, wo es keinen Zeiger gibt, soll Ziehen oder Tippen den verborgenen Text zeigen; mach den verborgenen Text außerdem für Screenreader zugänglich.

Ein weicher Lichtkegel oder Lichtfleck schwenkt an seinen Platz und beleuchtet einen Teil des Hintergrunds.

Füge bei [wo] einen „Spotlight“-Effekt hinzu (auch spotlight sweep oder light cone genannt).
Beim Laden der Seite soll ein weicher Lichtkegel schräg aus der Ecke hereinschwenken und sich über die Überschrift legen, wobei er beim Ankommen heller wird: langsam und fließend.
Spiele ihn nur einmal ab und zeige das Licht bei reduzierter Bewegung (prefers-reduced-motion) gleich an seinem Platz.

Eine Ecke des Elements klappt beim Hovern hoch wie eine Seite, die umgeblättert wird.

Füge bei [wo] einen „Curl“-Hover-Effekt hinzu (auch page curl genannt).
Eine Ecke des Elements soll sich weich hochklappen wie eine Seite beim Umblättern, dabei die Rückseite der Falte zeigen und beim Verlassen wieder flach werden.
Halte die Falte klein, damit sie keine wichtigen Inhalte verdeckt, und zeige denselben Effekt beim Tastaturfokus.

Ein Overlay gleitet von der Seite herein, über die der Zeiger kam, und verschwindet zur Seite, über die er geht.

Füge bei [wo] einen „Direction Aware Hover“-Effekt hinzu (auch direction-aware overlay genannt).
Ein Overlay soll von der Seite hereingleiten, über die der Zeiger kam, und zu der Seite hinausgleiten, über die er das Element verlässt: schnell und weich.
Ermittle die Seite aus der Zeigerposition beim Betreten und Verlassen und nutze bei Touch oder Tastaturfokus eine feste Standardrichtung.

Icons in einer Reihe wachsen weich, wenn sich der Zeiger nähert, wie im macOS-Dock.

Füge bei [wo] einen „Dock Magnification“-Effekt hinzu (auch dock genannt).
Die Icons der Reihe sollen weich größer werden, je näher der Zeiger kommt, das nächste am größten und seine Nachbarn leicht vergrößert, und alle zur normalen Größe zurückkehren, wenn der Zeiger die Reihe verlässt.
Lass die Icons von einer festen Grundlinie aus nach oben wachsen und halte jedes Icon bei Touch und Tastatur in normaler Größe bedienbar.