Starfield
Auch genannt Stars background, Twinkling stars
Winzige Sterne funkeln oder treiben über einen dunklen, weltraumartigen Hintergrund.
Einsatz
Hero-Bereiche mit Weltraum- oder Nachtthema
Varianten
- twinkling
- warp / fly-through
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 „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).Ähnliche Animationen
ABC
Sparkles
Auch genannt Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
Kleine helle Funken flackern rund um einen Text oder Abschnitt auf und wieder weg.
Einsatz
Headlines, Premium-Akzente
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).Particles
Auch genannt Floating particles, Particle field
Viele kleine Punkte treiben über den Hintergrund, verbinden sich oder reagieren auf den Zeiger.
Einsatz
Hero- und Abschnittshintergründe
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).Meteors
Auch genannt Meteor shower, Shooting Stars
Diagonale Streifen mit leuchtenden Schweifen fallen über eine Karte oder einen Abschnitt.
Einsatz
Akzente für Karten und Hero-Bereiche
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).Noise / Grain Texture
Auch genannt Film grain, Noise background
Eine feine, gesprenkelte Textur liegt über der Seite und flimmert manchmal wie Filmkorn.
Einsatz
Mehr haptische Tiefe für Verläufe
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.Mehr aus Background & Ambient
Vortex
Auch genannt Swirling particles
Partikel kreisen spiralförmig um einen Mittelpunkt wie ein Strudel.
Einsatz
Dramatische Hero-Hintergründe
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).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).A
B
Animated Beam
Auch genannt Connecting beam
Ein leuchtender Impuls wandert entlang einer Linie, die zwei Elemente verbindet.
Einsatz
Integrations- oder Datenflussdiagramme
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.