Gooey Nav

Navigation indicator morphs with gooey blob transitions between items.

Default

Click an item to send the blob across and burst the particles. Particle count, variance and radius are wired to the controls underneath.

Particle Count15

Animation Variance300

Radius Factor100

Prop	Type	Default	Description
`items`	`{ label: string, href?: string \| null }[]`	`[]`	Array of navigation items.
`animationTime`	`number`	`600`	Duration (ms) of the main animation.
`particleCount`	`number`	`15`	Number of bubble particles per transition.
`particleDistances`	`[number, number]`	`[90, 10]`	Outer and inner distances of bubble spread.
`particleR`	`number`	`100`	Radius factor influencing random particle rotation.
`timeVariance`	`number`	`300`	Random time variance (ms) for particle animations.
`colors`	`number[]`	`[1, 2, 3, 1, 2, 3, 1, 4]`	Color indices used when creating bubble particles. Each index reads the CSS variable --color-N and falls back to white.
`initialActiveIndex`	`number`	`0`	Which item is selected on mount.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Moves focus between items.
`Enter` + `Space`	Selects the focused item and plays the transition.

Items are real links, so pass an href when they navigate.
The text on top of the blob is a visual copy of the label. Assistive tech reads the links.