Glare / Holographic Card

Ein weiches radiales Licht folgt dem Zeiger über die Kartenoberfläche und lässt den Hintergrund darunter durchscheinen.

Füge bei [wo] einen „Card Spotlight“-Effekt hinzu (auch spotlight hover, pointer glow, mouse-following glow oder radial gradient hover genannt).
Ein weicher, schwacher radialer Schein soll dem Zeiger über die Kartenoberfläche folgen, beim Hineinfahren einblenden und beim Verlassen ausblenden.
Halte den Schein hinter dem Karteninhalt, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten einfach unbeleuchtet.

Text zeigt schillernde Regenbogen-Folienreflexe, die sich mit dem Zeiger oder mit der Zeit bewegen.

Füge bei [wo] einen „Holographic Text“-Hover-Effekt hinzu (auch holographic foil text genannt).
Solange der Zeiger über dem Text ist, soll ein Band aus folienartigen Farben langsam und weich über die Buchstaben hin und her gleiten; verlässt der Zeiger den Text, kehrt er zu seinem schlichten Aussehen zurück.
Halte die Buchstaben in jeder Phase des Schimmers lesbar und zeige denselben Effekt beim Tastaturfokus.

Eine Karte dreht sich perspektivisch zum Zeiger, und geschichtete Inhalte heben sich von der Oberfläche ab.

Füge bei [wo] einen „3D Tilt“-Effekt hinzu (auch perspective tilt oder tilt card genannt).
Die Karte soll sich perspektivisch zum Zeiger neigen, während er sich bewegt, ihre inneren Ebenen heben sich in unterschiedlichen Tiefen ab, und beim Verlassen gleitet sie sanft zurück in die Ebene: weich und dezent.
Halte die Neigung sanft, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.

Beim Hovern gleitet ein diagonaler Lichtstreifen von einer Seite zur anderen über das Element.

Füge bei [wo] einen „Shine Sweep“-Hover-Effekt hinzu (auch sheen, shiny button, shine on hover, glint, shimmer oder shimmer button genannt).
Ein weicher diagonaler Lichtstreifen soll von links nach rechts über das Element gleiten und sich mit einer kurzen Pause wiederholen, solange der Zeiger darüber bleibt.
Schneide den Streifen am Rand des Elements ab, stoppe ihn, wenn der Zeiger es verlässt, und spiele ihn bei reduzierter Bewegung (prefers-reduced-motion) nicht ab.

Im Ring angeordnete Panels drehen sich im 3D-Raum um eine senkrechte Achse.

Füge bei [wo] ein „3D Carousel“ hinzu (auch rotating ring carousel genannt).
Ordne die Panels in einem perspektivisch gesehenen Ring an; jeder Klick auf Weiter soll den ganzen Ring sanft um seine senkrechte Achse drehen und das nächste Panel nach vorn holen.
Mach die Steuerung per Tastatur erreichbar, sag Screenreadern das aktuelle Panel an und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

Eine rotierende 3D-Erde mit Markern oder Bögen sitzt im Layout.

Füge bei [wo] einen „3D Globe“ hinzu (auch interactive globe genannt).
Ein Globus mit einigen Markern auf der Oberfläche soll sich langsam und gleichmäßig um seine Achse drehen, die Marker drehen sich mit: ruhig und fortlaufend.
Halte ihn dekorativ mit einer Textalternative für die gezeigten Informationen, pausiere ihn außerhalb des sichtbaren Bereichs und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Eine Karte kippt beim Hovern perspektivisch nach hinten, während ein Pin mit Leuchten zum Betrachter aufsteigt.

Füge bei [wo] einen „3D Pin“-Hover-Effekt hinzu (auch pin hover 3D genannt).
Wenn der Zeiger über der Karte ist, soll sie perspektivisch nach hinten kippen, während ein Pin mit sanftem Leuchten am Fuß aus ihrer Mitte aufsteigt; beim Verlassen kehrt alles zurück: sanft, ohne Nachfedern.
Lass den Platz der Karte im Layout unverändert und zeige denselben Effekt beim Tastaturfokus.