Background & Ambient

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.

Die Farben eines Verlaufshintergrunds verschieben, bewegen oder drehen sich langsam.

Füge bei [wo] einen „Animated Gradient“-Hintergrund hinzu (auch gradient animation oder moving gradient genannt).
Die Farben des Verlaufs sollen langsam über die Fläche ziehen, in einem weichen, stetigen Fluss, ohne sichtbaren Sprung beim Neustart der Schleife.
Halte den Text darüber auf jeder Farbe lesbar und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Ein Raster aus Linien oder Quadraten, dessen Zellen ein- und ausblenden oder flackern.

Füge bei [wo] einen „Animated Grid Pattern“-Hintergrund hinzu (auch flickering grid oder grid background genannt).
Ein blasses Linienraster soll an Ort und Stelle bleiben, während einige verstreute Zellen zu unterschiedlichen Zeiten langsam ein- und ausblenden: leise und dezent, nie alle gleichzeitig.
Halte es hinter dem Inhalt, ohne Klicks abzufangen, und stoppe das Flackern bei reduzierter Bewegung (prefers-reduced-motion).

Weiche, verschwommene Farbbänder ziehen wie ein Polarlicht hinter dem Inhalt vorbei.

Füge bei [wo] einen „Aurora Background“ hinzu (auch northern lights gradient genannt).
Weiche, verschwommene Farbbänder sollen langsam hinter dem Inhalt treiben und schwingen, sich überlagern und ineinanderfließen wie Nordlichter: sehr langsam und verträumt.
Halte den Text darüber lesbar, berechne die Unschärfe nicht in jedem Frame neu, damit es flüssig bleibt, und stoppe das Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Dünne, leuchtende Linien wandern entlang von Pfaden und zerplatzen manchmal, wenn sie auf eine Fläche treffen.

Füge bei [wo] einen „Background Beams“-Effekt hinzu (auch light beams oder background lines genannt).
Blasse, geschwungene Pfade sollen im Hintergrund liegen, während kurze leuchtende Streifen nacheinander an ihnen entlangwandern, in ruhigem, gleichmäßigem Tempo.
Versetze die Strahlen zeitlich, damit sie sich nie im Gleichschritt bewegen, halte sie hinter dem Inhalt und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

Ein schräges Raster aus Kacheln leuchtet farbig auf, wenn der Zeiger darüberfährt.

Füge bei [wo] einen „Background Boxes“-Effekt hinzu (auch tile hover background genannt).
Fülle die Fläche mit einem schrägen Kachelraster; jede Kachel, über die der Zeiger fährt, soll sofort aufleuchten und dann langsam verblassen, sodass eine kurze Spur entsteht.
Leg die Kacheln hinter den Inhalt, damit sie keine Klicks darauf blockieren, und lass auf Touch-Geräten stattdessen die angetippte Kachel aufleuchten.

Ein heller Lichtpunkt wandert am Rand einer Karte entlang.

Füge bei [wo] einen „Border Beam“-Effekt hinzu (auch shine border oder moving border genannt).
Ein kurzer, heller Lichtstreifen soll in gleichmäßigem, gemächlichem Tempo am Kartenrand entlangwandern und ohne sichtbaren Sprung in Schleife laufen.
Der Effekt darf Inhalt und Größe der Karte nicht verändern; stoppe den Lichtstreifen bei reduzierter Bewegung (prefers-reduced-motion).

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).

Mehrere Farbpunkte verschmelzen weich miteinander und treiben dahin, sodass ein organischer, vielfarbiger Hintergrund entsteht.

Füge bei [wo] einen „Mesh Gradient“-Hintergrund hinzu (auch animated mesh gradient genannt).
Mehrere weiche Farbflecken sollen ineinanderfließen und langsam über die Fläche treiben, sodass sich der Hintergrund organisch ständig verändert: sehr langsam und fließend.
Sorge dafür, dass der Inhalt darüber bei jeder Farbmischung lesbar bleibt, und stoppe das Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Diagonale Streifen mit leuchtenden Schweifen fallen über eine Karte oder einen Abschnitt.

Füge bei [wo] einen „Meteors“-Effekt hinzu (auch meteor shower oder shooting stars genannt).
Eine Handvoll kleiner Streifen mit verblassenden Schweifen soll zu zufälligen Zeitpunkten diagonal über die Fläche schießen, jeder schnell und dann verschwunden.
Halte es bei wenigen, damit es ein Akzent bleibt, schneide sie an den Rändern der Fläche ab und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

Eine feine, gesprenkelte Textur liegt über der Seite und flimmert manchmal wie Filmkorn.

Füge bei [wo] ein „Noise / Grain Texture“-Overlay hinzu (auch film grain oder noise background genannt).
Eine feine, blasse, gesprenkelte Textur soll über der Fläche liegen und in kleinen Sprüngen wie Filmkorn flimmern: dezent, nie so stark, dass der Inhalt trüb wirkt.
Lass Klicks durch das Overlay hindurch, erzeuge die Textur einmal statt in jedem Frame und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Viele kleine Punkte treiben über den Hintergrund, verbinden sich oder reagieren auf den Zeiger.

Füge bei [wo] einen „Particles“-Hintergrund hinzu (auch floating particles oder particle field genannt).
Kleine Punkte in verschiedenen Größen sollen langsam auf sanften, umherwandernden Bahnen schweben und treiben, jeder in seinem eigenen Tempo: ruhig und luftig.
Halte die Anzahl der Punkte moderat, damit es auch auf langsameren Geräten leicht bleibt, pausiere es außerhalb des sichtbaren Bereichs und stoppe es bei reduzierter Bewegung (prefers-reduced-motion).

Die Unschärfe nimmt zu einem Rand hin allmählich zu, sodass der Inhalt weich ausläuft.

Füge bei [wo] einen „Progressive Blur“-Rand hinzu (auch gradient blur edge genannt).
Inhalt, der zum Rand hin scrollt, soll allmählich unschärfer und weicher werden und sanft zunehmen, statt an einer harten Linie abzubrechen.
Zeige die Unschärfe nur an einem Rand, hinter dem noch weiterer Inhalt kommt, und sorge dafür, dass der unscharfe Bereich weder Klicks noch Scrollen blockiert.

Ein geneigtes Perspektivraster läuft wie ein Synthwave-Boden auf den Betrachter zu.

Füge bei [wo] einen „Retro Grid“-Hintergrund hinzu (auch perspective grid oder synthwave grid genannt).
Ein perspektivisch nach hinten geneigter Rasterboden soll gleichmäßig auf den Betrachter zulaufen und zum Horizont hin ausblenden: fließend und endlos.
Mach die Schleife nahtlos, damit die Linien nie springen, und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Konzentrische Kreise breiten sich von einem Mittelpunkt nach außen aus und verblassen.

Füge bei [wo] einen „Ripple Rings“-Effekt hinzu (auch background ripple oder concentric ripples genannt).
Ringe sollen sich fortlaufend von einem Mittelpunkt nach außen ausbreiten und beim Wachsen verblassen, gleichmäßig nacheinander: langsam und stetig.
Lass das mittlere Element ruhig an seinem Platz und stoppe die Wellen bei reduzierter Bewegung (prefers-reduced-motion).

Kleine helle Funken flackern rund um einen Text oder Abschnitt auf und wieder weg.

Füge bei [wo] einen „Sparkles“-Effekt hinzu (auch glitter oder twinkle particles genannt).
Kleine sternförmige Funken sollen an verstreuten Stellen und zu zufälligen Zeitpunkten rund um den Text aufploppen, funkeln und verblassen: leicht und schnell.
Halte die Funken rein dekorativ und vor Screenreadern verborgen, lass sie nie den Text selbst verdecken und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

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.

Winzige Sterne funkeln oder treiben über einen dunklen, weltraumartigen Hintergrund.

Füge bei [wo] einen „Starfield“-Hintergrund hinzu (auch stars background oder twinkling stars genannt).
Winzige Sterne in verschiedenen Größen sollen jeweils in ihrem eigenen Tempo sanft funkeln, während das ganze Feld sehr langsam dahintreibt: still und ruhig.
Halte die Zahl der Sterne moderat, damit es leicht bleibt, und stoppe Funkeln und Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Partikel kreisen spiralförmig um einen Mittelpunkt wie ein Strudel.

Füge bei [wo] einen „Vortex“-Hintergrund hinzu (auch swirling particles genannt).
Kleine Partikel sollen wie in einem Strudel spiralförmig um einen Mittelpunkt nach innen kreisen, am Rand einblenden und zur Mitte hin ausblenden, in einem fließenden, durchgehenden Wirbel.
Halte die Zahl der Partikel moderat, pausiere außerhalb des sichtbaren Bereichs und stoppe den Wirbel bei reduzierter Bewegung (prefers-reduced-motion).

Geschichtete Wellenlinien oder -formen wogen horizontal.

Füge bei [wo] einen „Wave Background“ hinzu (auch wavy background oder animated waves genannt).
Einige geschichtete Wellenformen sollen mit leicht unterschiedlichen Geschwindigkeiten seitwärts rollen, sodass sie sich überlagern und wie Wasser verschieben: langsam und ruhig.
Lass jede Welle nahtlos ohne sichtbaren Sprung wiederholen und stoppe die Wellen bei reduzierter Bewegung (prefers-reduced-motion).