Border Beam

Ein Verlaufsrahmen bewegt sich um das Element und breitet sich aus, sobald der Zeiger darüber ist.

Füge bei [wo] einen „Hover Border Gradient“-Effekt hinzu.
Ein kurzer Verlaufsschimmer soll auf einem Teil des Rahmens ruhen; solange der Zeiger über dem Element ist, soll er gleichmäßig um den Rahmen wandern, während der ganze Rahmen mit sanftem Glühen heller wird.
Animiere den Rahmen nur beim Hovern und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Ein leuchtender Impuls wandert entlang einer Linie, die zwei Elemente verbindet.

Füge bei [wo] einen „Animated Beam“-Effekt hinzu (auch connecting beam genannt).
Ein kurzer leuchtender Impuls soll entlang der Linie wandern, die zwei Elemente verbindet, gleichmäßig von einem Ende zum anderen und dann von vorn: weich und ruhig.
Lass die Verbindungslinie selbst immer sichtbar und halte den Impuls bei reduzierter Bewegung (prefers-reduced-motion) still.

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.

Ein Punktraster pulsiert oder leuchtet in Wellen auf.

Füge bei [wo] einen „Dot Pattern Glow“-Hintergrund hinzu (auch dotted glow background oder dot grid genannt).
Ein feines Punktraster soll stillstehen, während ein weiches Lichtband langsam darüberzieht und die Punkte aufleuchten lässt, die es passiert: ruhig und dezent.
Halte die Punkte so blass, dass der Inhalt darüber lesbar bleibt, und stoppe das Leuchten bei reduzierter Bewegung (prefers-reduced-motion).

Eine leuchtende Lampenlinie wird breiter und wirft einen Lichtkegel auf die Überschrift darunter.

Füge bei [wo] einen „Lamp Effect“ hinzu (auch lamp glow genannt).
Wenn der Abschnitt ins Bild kommt, soll sich eine dünne, leuchtende Linie von der Mitte aus verbreitern und einen weichen Lichtkegel auf die Überschrift darunter werfen, die dabei nach oben einblendet: langsam und fließend.
Spiele ihn nur einmal ab und zeige die beleuchtete Überschrift bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Weiche Lichtstrahlen schwingen über den Hintergrund.

Füge bei [wo] einen „Light Rays“-Hintergrund hinzu (auch god rays oder light shafts genannt).
Mehrere weiche, halbtransparente Strahlen sollen sich von oben fächerförmig ausbreiten und sanft hin und her schwingen, dabei leicht heller und dunkler werden: langsam und stimmungsvoll.
Leg die Strahlen hinter den Inhalt, halte sie blass genug für gute Lesbarkeit und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).