HTML + CSSHintergründe

Partikel-Konstellation

Schwebende Punkte, verbunden durch feine Linien, die ausweichen, sobald deine Maus näher kommt.

Einstellungen

1x
1x
1

Code

<div class="pt-constellation"><canvas></canvas></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

Verbundene Partikel sagen „Netzwerk“, ohne dass du ein Diagramm zeichnen musst. Sie passen in den Hero einer Datenberatung, zu einem Blockchain-Projekt oder auf die Landingpage einer Community-App. Bewegst du den Cursor, weichen die Punkte in der Nähe aus und verbinden sich mit ihm. Ein interaktiver Partikel-Hintergrund, ähnlich wie particles.js, nur viel schlanker.

Auf dem Handy gibt es kein Hover, dann treiben die Linien einfach für sich, was trotzdem gut aussieht. Übertreib es nicht mit der Dichte: Jeder Punkt misst den Abstand zu allen anderen, und bei vollem Bildschirm merken ältere Laptops das.