Wasser-Kaustik
Ein wogendes Lichtnetz wie Sonnenlicht auf dem Grund eines Pools, erzeugt mit einem SVG-Filter.
Einstellungen
Code
<div class="pt-water"><svg><filter id="pt-water-f" x="0" y="0" width="100%" height="100%"><feTurbulence id="pt-water-t" type="turbulence" baseFrequency="0.006 0.009" numOctaves="1" seed="4"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -40 3"/></filter><animate href="#pt-water-t" attributeName="baseFrequency" dur="18s" values="0.006 0.009;0.008 0.007;0.006 0.009" repeatCount="indefinite"/><rect width="100%" height="100%" filter="url(#pt-water-f)"/></svg><b></b></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
Kaustiken holen den Sommer direkt auf den Bildschirm. Sie passen auf die Website eines Strandhotels, zum Sommer-Sale eines Surfshops oder auf die Buchungsseite für eine Bootstour. Das Licht bewegt sich ständig, dadurch wirkt die Seite frisch, ohne unruhig zu sein. Ein animierter Wasser-Hintergrund in HTML und CSS, gezeichnet von einem SVG-Filter.
Blau und Türkis liegen nahe, mit einem tiefen Grün wird daraus aber ein See oder ein Spa. SVG-Filter brauchen mehr Rechenleistung als einfache Verläufe. Ist die Seite schon voller Bilder, teste sie zuerst auf einem Mittelklasse-Handy.