HTML + CSSHintergründe
Punktraster mit Welle
Ein Raster aus Punkten, die nacheinander aufleuchten, wenn eine Welle von der Mitte nach außen läuft.
Einstellungen
1x
1x
1
Code
<div class="pt-dots"><i style="--r:12.3"></i><i style="--r:11.5"></i><i style="--r:10.7"></i><i style="--r:9.9"></i><i style="--r:9.2"></i><i style="--r:8.5"></i><i style="--r:7.9"></i><i style="--r:7.4"></i><i style="--r:7.0"></i><i style="--r:6.7"></i><i style="--r:6.5"></i><i style="--r:6.5"></i><i style="--r:6.7"></i><i style="--r:7.0"></i><i style="--r:7.4"></i><i style="--r:7.9"></i><i style="--r:8.5"></i><i style="--r:9.2"></i><i style="--r:9.9"></i><i style="--r:10.7"></i><i style="--r:11.5"></i><i style="--r:12.3"></i><i style="--r:11.9"></i><i style="--r:11.0"></i><i style="--r:10.1"></i><i style="--r:9.3"></i><i style="--r:8.5"></i><i style="--r:7.8"></i><i style="--r:7.1"></i><i style="--r:6.5"></i><i style="--r:6.0"></i><i style="--r:5.7"></i><i style="--r:5.5"></i><i style="--r:5.5"></i><i style="--r:5.7"></i><i style="--r:6.0"></i><i style="--r:6.5"></i><i style="--r:7.1"></i><i style="--r:7.8"></i><i style="--r:8.5"></i><i style="--r:9.3"></i><i style="--r:10.1"></i><i style="--r:11.0"></i><i style="--r:11.9"></i><i style="--r:11.4"></i><i style="--r:10.5"></i><i style="--r:9.6"></i><i style="--r:8.7"></i><i style="--r:7.9"></i><i style="--r:7.1"></i><i style="--r:6.4"></i><i style="--r:5.7"></i><i style="--r:5.1"></i><i style="--r:4.7"></i><i style="--r:4.5"></i><i style="--r:4.5"></i><i style="--r:4.7"></i><i style="--r:5.1"></i><i style="--r:5.7"></i><i style="--r:6.4"></i><i style="--r:7.1"></i><i style="--r:7.9"></i><i style="--r:8.7"></i><i style="--r:9.6"></i><i style="--r:10.5"></i><i style="--r:11.4"></i><i style="--r:11.1"></i><i style="--r:10.1"></i><i style="--r:9.2"></i><i style="--r:8.3"></i><i style="--r:7.4"></i><i style="--r:6.5"></i><i style="--r:5.7"></i><i style="--r:4.9"></i><i style="--r:4.3"></i><i style="--r:3.8"></i><i style="--r:3.5"></i><i style="--r:3.5"></i><i style="--r:3.8"></i><i style="--r:4.3"></i><i style="--r:4.9"></i><i style="--r:5.7"></i><i style="--r:6.5"></i><i style="--r:7.4"></i><i style="--r:8.3"></i><i style="--r:9.2"></i><i style="--r:10.1"></i><i style="--r:11.1"></i><i style="--r:10.8"></i><i style="--r:9.8"></i><i style="--r:8.9"></i><i style="--r:7.9"></i><i style="--r:7.0"></i><i style="--r:6.0"></i><i style="--r:5.1"></i><i style="--r:4.3"></i><i style="--r:3.5"></i><i style="--r:2.9"></i><i style="--r:2.5"></i><i style="--r:2.5"></i><i style="--r:2.9"></i><i style="--r:3.5"></i><i style="--r:4.3"></i><i style="--r:5.1"></i><i style="--r:6.0"></i><i style="--r:7.0"></i><i style="--r:7.9"></i><i style="--r:8.9"></i><i style="--r:9.8"></i><i style="--r:10.8"></i><i style="--r:10.6"></i><i style="--r:9.6"></i><i style="--r:8.6"></i><i style="--r:7.6"></i><i style="--r:6.7"></i><i style="--r:5.7"></i><i style="--r:4.7"></i><i style="--r:3.8"></i><i style="--r:2.9"></i><i style="--r:2.1"></i><i style="--r:1.6"></i><i style="--r:1.6"></i><i style="--r:2.1"></i><i style="--r:2.9"></i><i style="--r:3.8"></i><i style="--r:4.7"></i><i style="--r:5.7"></i><i style="--r:6.7"></i><i style="--r:7.6"></i><i style="--r:8.6"></i><i style="--r:9.6"></i><i style="--r:10.6"></i><i style="--r:10.5"></i><i style="--r:9.5"></i><i style="--r:8.5"></i><i style="--r:7.5"></i><i style="--r:6.5"></i><i style="--r:5.5"></i><i style="--r:4.5"></i><i style="--r:3.5"></i><i style="--r:2.5"></i><i style="--r:1.6"></i><i style="--r:0.7"></i><i style="--r:0.7"></i><i style="--r:1.6"></i><i style="--r:2.5"></i><i style="--r:3.5"></i><i style="--r:4.5"></i><i style="--r:5.5"></i><i style="--r:6.5"></i><i style="--r:7.5"></i><i style="--r:8.5"></i><i style="--r:9.5"></i><i style="--r:10.5"></i><i style="--r:10.5"></i><i style="--r:9.5"></i><i style="--r:8.5"></i><i style="--r:7.5"></i><i style="--r:6.5"></i><i style="--r:5.5"></i><i style="--r:4.5"></i><i style="--r:3.5"></i><i style="--r:2.5"></i><i style="--r:1.6"></i><i style="--r:0.7"></i><i style="--r:0.7"></i><i style="--r:1.6"></i><i style="--r:2.5"></i><i style="--r:3.5"></i><i style="--r:4.5"></i><i style="--r:5.5"></i><i style="--r:6.5"></i><i style="--r:7.5"></i><i style="--r:8.5"></i><i style="--r:9.5"></i><i style="--r:10.5"></i><i style="--r:10.6"></i><i style="--r:9.6"></i><i style="--r:8.6"></i><i style="--r:7.6"></i><i style="--r:6.7"></i><i style="--r:5.7"></i><i style="--r:4.7"></i><i style="--r:3.8"></i><i style="--r:2.9"></i><i style="--r:2.1"></i><i style="--r:1.6"></i><i style="--r:1.6"></i><i style="--r:2.1"></i><i style="--r:2.9"></i><i style="--r:3.8"></i><i style="--r:4.7"></i><i style="--r:5.7"></i><i style="--r:6.7"></i><i style="--r:7.6"></i><i style="--r:8.6"></i><i style="--r:9.6"></i><i style="--r:10.6"></i><i style="--r:10.8"></i><i style="--r:9.8"></i><i style="--r:8.9"></i><i style="--r:7.9"></i><i style="--r:7.0"></i><i style="--r:6.0"></i><i style="--r:5.1"></i><i style="--r:4.3"></i><i style="--r:3.5"></i><i style="--r:2.9"></i><i style="--r:2.5"></i><i style="--r:2.5"></i><i style="--r:2.9"></i><i style="--r:3.5"></i><i style="--r:4.3"></i><i style="--r:5.1"></i><i style="--r:6.0"></i><i style="--r:7.0"></i><i style="--r:7.9"></i><i style="--r:8.9"></i><i style="--r:9.8"></i><i style="--r:10.8"></i><i style="--r:11.1"></i><i style="--r:10.1"></i><i style="--r:9.2"></i><i style="--r:8.3"></i><i style="--r:7.4"></i><i style="--r:6.5"></i><i style="--r:5.7"></i><i style="--r:4.9"></i><i style="--r:4.3"></i><i style="--r:3.8"></i><i style="--r:3.5"></i><i style="--r:3.5"></i><i style="--r:3.8"></i><i style="--r:4.3"></i><i style="--r:4.9"></i><i style="--r:5.7"></i><i style="--r:6.5"></i><i style="--r:7.4"></i><i style="--r:8.3"></i><i style="--r:9.2"></i><i style="--r:10.1"></i><i style="--r:11.1"></i><i style="--r:11.4"></i><i style="--r:10.5"></i><i style="--r:9.6"></i><i style="--r:8.7"></i><i style="--r:7.9"></i><i style="--r:7.1"></i><i style="--r:6.4"></i><i style="--r:5.7"></i><i style="--r:5.1"></i><i style="--r:4.7"></i><i style="--r:4.5"></i><i style="--r:4.5"></i><i style="--r:4.7"></i><i style="--r:5.1"></i><i style="--r:5.7"></i><i style="--r:6.4"></i><i style="--r:7.1"></i><i style="--r:7.9"></i><i style="--r:8.7"></i><i style="--r:9.6"></i><i style="--r:10.5"></i><i style="--r:11.4"></i><i style="--r:11.9"></i><i style="--r:11.0"></i><i style="--r:10.1"></i><i style="--r:9.3"></i><i style="--r:8.5"></i><i style="--r:7.8"></i><i style="--r:7.1"></i><i style="--r:6.5"></i><i style="--r:6.0"></i><i style="--r:5.7"></i><i style="--r:5.5"></i><i style="--r:5.5"></i><i style="--r:5.7"></i><i style="--r:6.0"></i><i style="--r:6.5"></i><i style="--r:7.1"></i><i style="--r:7.8"></i><i style="--r:8.5"></i><i style="--r:9.3"></i><i style="--r:10.1"></i><i style="--r:11.0"></i><i style="--r:11.9"></i><i style="--r:12.3"></i><i style="--r:11.5"></i><i style="--r:10.7"></i><i style="--r:9.9"></i><i style="--r:9.2"></i><i style="--r:8.5"></i><i style="--r:7.9"></i><i style="--r:7.4"></i><i style="--r:7.0"></i><i style="--r:6.7"></i><i style="--r:6.5"></i><i style="--r:6.5"></i><i style="--r:6.7"></i><i style="--r:7.0"></i><i style="--r:7.4"></i><i style="--r:7.9"></i><i style="--r:8.5"></i><i style="--r:9.2"></i><i style="--r:9.9"></i><i style="--r:10.7"></i><i style="--r:11.5"></i><i style="--r:12.3"></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
Ein pulsierendes Punktraster wirkt technisch, aber freundlich. Deshalb passt es in den Hero eines Entwickler-Tools, auf die Landingpage einer Analytics-Software oder auf eine „Bald verfügbar“-Seite vor einem Launch. Die Welle startet immer in der Mitte und lenkt den Blick genau dorthin. Ein animiertes Punktmuster als Hintergrund, nur mit CSS.
Setz dein Logo oder die Überschrift direkt in die Mitte und lass die Welle den Rahmen bilden. Wirkt es auf einem großen Monitor zu unruhig, reduziere zuerst die Dichte oder die Deckkraft, bevor du an den Farben drehst.