Magnetische Navigationsleiste mit federndem Punkt
Links lassen sich wie Magnete vom Cursor anziehen, und ein Punkt mit Federphysik folgt ihnen und streckt sich mit dem Tempo.
Einstellungen
Code
<nav class="uvq12-ml" aria-label="Navigation"><ul><li><a href="#" aria-current="page">Arbeit</a></li><li><a href="#">Studio</a></li><li><a href="#">Blog</a></li><li><a href="#">Shop</a></li><li><a href="#">Kontakt</a></li></ul><span class="dt" aria-hidden="true"></span></nav>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 Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Eine Navigationsleiste mit Physik: Jeder Link wird leicht zum Cursor gezogen, als wäre er magnetisch, und ein kleiner Verlaufspunkt unter der Leiste folgt dem gezeigten oder fokussierten Link mit echter Federsimulation. Er streckt sich bei hoher Geschwindigkeit und kommt mit einem Nachwippen zur Ruhe. Ein Klick macht den Link zum neuen Ruheplatz. Passend für Studios, Portfolios und persönliche Seiten.
Haupt- und Zweitfarbe bilden den Verlauf des Punkts, der Schatten übernimmt die Hauptfarbe. Nutze höchstens fünf oder sechs Links; auf Touchscreens und bei reduzierter Bewegung entfällt der Magneteffekt.