Light Rays
Auch genannt God rays, Light shafts
Weiche Lichtstrahlen schwingen über den Hintergrund.
Einsatz
Stimmungsvolle Header
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 „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).Ähnliche Animationen
Spotlight
Auch genannt Spotlight sweep, Light cone
Ein weicher Lichtkegel oder Lichtfleck schwenkt an seinen Platz und beleuchtet einen Teil des Hintergrunds.
Einsatz
Hero-Überschriften
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.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).Lamp Effect
Auch genannt Lamp glow
Eine leuchtende Lampenlinie wird breiter und wirft einen Lichtkegel auf die Überschrift darunter.
Einsatz
Dunkle Hero-Überschriften
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.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).Mehr aus Background & Ambient
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).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.