Node Navigation

Description

Node Nav is a floating pill navigation bar with a living neural web behind its links. Faint nodes drift and connect inside the link capsule. Hover a link and the nearest nodes break away and settle into an orange underline beneath the word, then drift back when you leave. The wordmark has a pulsing three-node glyph whose letters decode from code-like characters on hover. A “Let’s talk” pill on the right fills with your accent colour, and its arrow turns on hover.

Built for dark, technical sites: AI products, agencies, dev tools and portfolios. The motion is subtle and respects reduced-motion settings.

Easy to customise

Everything is set from the component’s variables in the right-hand panel, with no code and no digging through layers:

• Text: logo name, each link label and the button label

• Links: where the logo, each nav link and the button go

• Colors: accent (the underline and glowing node), nav background, link colour, link hover colour, button fill and button text

• Number – Node Count: how many nodes are in the web

• Number – Node Speed: how fast they drift (0 keeps them still)

Drop it on your page, change the text and links, pick your accent colour, and it’s done. Every variable is named by type (Text, Link, Color, Number), so you can see at a glance what each one controls.