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
Varianten
- sweep in
- pulsing
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 „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.Ähnliche Animationen
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.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).- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
Zeiger hier bewegen
Cursor Spotlight
Auch genannt Flashlight cursor, Spotlight effect
Ein Lichtkreis um den Zeiger enthüllt den Inhalt, während der Rest dunkel bleibt.
Einsatz
Hero-Bereiche, Enthüllungseffekte
Füge bei [wo] einen „Cursor Spotlight“-Effekt hinzu (auch flashlight cursor oder spotlight effect genannt).
Ein weicher Lichtkreis soll dem Zeiger folgen und den Inhalt darunter sichtbar machen, während der Rest des Bereichs abgedunkelt bleibt.
Zeige auf Touch-Geräten, wo es keinen Zeiger zum Folgen gibt, den Inhalt stattdessen voll ausgeleuchtet.A
Zeiger hier bewegen
Card Spotlight
Auch genannt Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
Ein weiches radiales Licht folgt dem Zeiger über die Kartenoberfläche und lässt den Hintergrund darunter durchscheinen.
Einsatz
Feature-Karten, Bento-Raster
Füge bei [wo] einen „Card Spotlight“-Effekt hinzu (auch spotlight hover, pointer glow, mouse-following glow oder radial gradient hover genannt).
Ein weicher, schwacher radialer Schein soll dem Zeiger über die Kartenoberfläche folgen, beim Hineinfahren einblenden und beim Verlassen ausblenden.
Halte den Schein hinter dem Karteninhalt, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten einfach unbeleuchtet.Mehr aus Background & Ambient
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).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).