Animated Beam
Auch genannt Connecting beam
Ein leuchtender Impuls wandert entlang einer Linie, die zwei Elemente verbindet.
Einsatz
Integrations- oder Datenflussdiagramme
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 „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.Ähnliche Animationen
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).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).Animated Map Arcs
Auch genannt World Map Animated Lines, Globe Arcs
Linien und Punkte bewegen sich animiert zwischen Orten auf einer Karte oder einem Globus.
Einsatz
Visuals zur globalen Reichweite
Füge bei [wo] „Animated Map Arcs“ hinzu (auch globe arcs genannt).
Gekrümmte Linien sollen sich nacheinander zwischen Orten auf einer Punktekarte selbst zeichnen und sich dann zu ihrem Ziel zurückziehen, während dort ein weicher Ring pulsiert: ruhig und gleichmäßig.
Versetze die Bögen zeitlich, damit sie sich nie im Gleichtakt bewegen, halte die Schleife nahtlos und pausiere sie bei reduzierter Bewegung (prefers-reduced-motion).Motion Path
Auch genannt Animate Along Path, Offset Path Animation
Ein Element bewegt sich entlang eines eigenen gekrümmten Pfads und kann sich dabei in Laufrichtung drehen.
Einsatz
Flugzeug oder Punkt auf einer Route, dekorative Wanderelemente
Füge bei [wo] eine „Motion Path“-Animation hinzu (auch animate along path genannt).
Ein kleines Element soll langsam und gleichmäßig einer eigenen gekrümmten Route folgen und sich dabei stets in Bewegungsrichtung drehen.
Nimm eine geschlossene Route, damit die Schleife ohne Sprung wiederholt, und lass die Route mit ihrem Container mitskalieren statt in fester Größe zu bleiben.Mehr aus Background & Ambient
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).Animated Grid Pattern
Auch genannt Flickering grid, Grid background
Ein Raster aus Linien oder Quadraten, dessen Zellen ein- und ausblenden oder flackern.
Einsatz
Hero-Bereiche für Tech und SaaS
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).Aurora Background
Auch genannt Northern lights gradient
Weiche, verschwommene Farbbänder ziehen wie ein Polarlicht hinter dem Inhalt vorbei.
Einsatz
Hero-Bereiche
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).