Ripple Rings
Auch genannt Background ripple, Concentric ripples
Konzentrische Kreise breiten sich von einem Mittelpunkt nach außen aus und verblassen.
Einsatz
Hero-Mittelpunkte, Audio- oder Kopplungsvisualisierungen
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 „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).Ähnliche Animationen
A
Ping
Auch genannt Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
Eine Kopie des Elements wächst wiederholt und blendet dabei aus, wie ein Radarsignal.
Einsatz
Benachrichtigungspunkte, Live-Status
Füge bei [wo] einen „Ping“-Effekt hinzu (auch radar ping oder pulse ring genannt).
Eine Kopie des Elements soll nach außen wachsen und ausblenden, immer wieder in gleichmäßigem Takt, während das Element selbst stillsteht.
Zeichne den Ring auf einer eigenen Ebene, damit er nie das Layout verändert, und stoppe die Schleife bei reduzierter Bewegung (prefers-reduced-motion).Klicken
Ripple
Auch genannt Material ripple, Touch ripple, Ripple Button, Ink ripple
Eine kreisförmige Welle breitet sich vom genauen Klick- oder Tippunkt aus und verblasst.
Einsatz
Buttons, Listeneinträge
Füge bei [wo] einen „Ripple“-Effekt hinzu (auch material ripple oder ink ripple genannt).
Bei jedem Klick oder Tippen soll sich eine weiche, kreisförmige Welle vom genauen Druckpunkt ausbreiten, bis sie das Element bedeckt, und dabei verblassen: schnell und leicht.
Beschneide die Welle auf die Form des Elements, lass jeden schnellen Druck seine eigene Welle starten und starte sie bei Tastatureingaben aus der Mitte.A
Mit der Maus darüberfahren
Konzentrische Rahmenringe breiten sich beim Hovern vom Element nach außen aus oder ziehen sich nach innen zusammen.
Einsatz
Buttons
Füge bei [wo] einen „Border Ripple“-Hover-Effekt hinzu.
Wenn der Zeiger hineinfährt, sollen sich ein paar Rahmenringe nacheinander vom Element nach außen ausbreiten und verblassen: schnell und leicht, wie eine Welle im Wasser.
Spiel ihn einmal pro Hover ab statt in einer Schleife und lass die Ringe das umgebende Layout nicht verschieben.Mehr aus Background & Ambient
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).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.Starfield
Auch genannt Stars background, Twinkling stars
Winzige Sterne funkeln oder treiben über einen dunklen, weltraumartigen Hintergrund.
Einsatz
Hero-Bereiche mit Weltraum- oder Nachtthema
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).