Tropfen im Teich
Ringe breiten sich an zufälligen Stellen auf dunklem Wasser aus, als fielen Tropfen in einen stillen Teich.
Einstellungen
Code
<div class="pt-pond"><i style="left:5.0%;top:35.7%;--t:8.7s;--dl:-1.2s"></i><i style="left:57.3%;top:25.3%;--t:7.2s;--dl:-3.6s"></i><i style="left:42.5%;top:81.0%;--t:7.6s;--dl:-1.3s"></i><i style="left:43.0%;top:17.7%;--t:8.1s;--dl:-4.3s"></i><i style="left:18.3%;top:27.9%;--t:7.6s;--dl:-1.9s"></i><i style="left:74.9%;top:64.7%;--t:6.7s;--dl:-6.3s"></i><i style="left:88.1%;top:40.0%;--t:5.1s;--dl:-5.2s"></i><i style="left:70.5%;top:17.5%;--t:5.2s;--dl:-1.4s"></i><i style="left:64.5%;top:56.0%;--t:6.2s;--dl:-7.5s"></i><i style="left:83.9%;top:91.5%;--t:7.8s;--dl:-0.5s"></i><i style="left:18.7%;top:43.2%;--t:8.4s;--dl:-7.7s"></i><i style="left:50.0%;top:40.9%;--t:8.4s;--dl:-1.8s"></i><i style="left:94.9%;top:41.1%;--t:6.2s;--dl:-6.9s"></i><i style="left:81.2%;top:11.5%;--t:8.4s;--dl:-4.5s"></i></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Wofür du ihn nutzen kannst
Wellenringe auf dem Wasser stehen für Ruhe und Gelassenheit. Sie passen zum Startbildschirm einer Achtsamkeits-App, zur Website eines Spas oder einer Therme, zu einem Teehaus oder zur Buchungsseite eines Retreats am See. Die Tropfen fallen zufällig, dadurch wirkt der Rhythmus nie mechanisch. Ein animierter Wasserwellen-Hintergrund in HTML und CSS.
Für Meditations- oder Schlafinhalte nimmst du das Tempo etwas zurück, die Standardeinstellung erinnert eher an leichten Regen. Große, dünne Überschriften in Weiß schweben wunderbar über den Ringen, vor allem mit etwas weniger Deckkraft.