Aurora Background
Auch genannt Northern lights gradient
Weiche, verschwommene Farbbänder ziehen wie ein Polarlicht hinter dem Inhalt vorbei.
Einsatz
Hero-Bereiche
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
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).Ähnliche Animationen
Mesh Gradient
Auch genannt Animated mesh gradient
Mehrere Farbpunkte verschmelzen weich miteinander und treiben dahin, sodass ein organischer, vielfarbiger Hintergrund entsteht.
Einsatz
Landingpage-Hintergründe
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).Animated Gradient
Auch genannt Gradient animation, Moving gradient, Background gradient animation
Die Farben eines Verlaufshintergrunds verschieben, bewegen oder drehen sich langsam.
Einsatz
Hero-Hintergründe, Buttons
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).Light Rays
Auch genannt God rays, Light shafts
Weiche Lichtstrahlen schwingen über den Hintergrund.
Einsatz
Stimmungsvolle Header
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).Wave Background
Auch genannt Wavy background, Animated waves
Geschichtete Wellenlinien oder -formen wogen horizontal.
Einsatz
Abschnittstrenner, Hero-Abschlüsse
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).Mehr aus Background & Ambient
Background Beams
Auch genannt Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
Dünne, leuchtende Linien wandern entlang von Pfaden und zerplatzen manchmal, wenn sie auf eine Fläche treffen.
Einsatz
Hero-Hintergründe
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).Mit der Maus darüberfahren
Background Boxes
Auch genannt Tile hover background
Ein schräges Raster aus Kacheln leuchtet farbig auf, wenn der Zeiger darüberfährt.
Einsatz
Hero-Hintergründe
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.A
Border Beam
Auch genannt Shine border, Animated border, Glowing effect, Moving Border
Ein heller Lichtpunkt wandert am Rand einer Karte entlang.
Einsatz
Hervorgehobene Karten, CTAs
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).