Interaction / component

Gooey Nav

A navigation pill gathers into place through soft, colorful particle motion.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Original particle keyframes, blur and contrast are retained. One owned clock drives the animation; bursts are capped at 40 particles and settle completely.
Native anchors support keyboard navigation and modified clicks. The demo handles selection locally; the reusable component follows item hrefs.
initialActiveIndex applies at mount. Use activeIndex to control selection after mount.
Demo.tsx includes the full composition. Reduced motion, pause, hidden and offscreen behavior use an owned animation clock.

React 19.2Pointer Events

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Prop	Type	Default	Description
`animationTime`	number	`600`	Duration
`particleCount`	number	`15`	Particles
`particleR`	number	`100`	Rotation
`timeVariance`	number	`300`	Time variance
`initialActiveIndex`	number	`0`	Initial item
`items`	GooeyNavItem[]	`Home, Work, About`	Each item contains label and href. Links preserve native navigation semantics.
`activeIndex`	number	`undefined`	Controlled selected index.
`onSelect`	(index, item, event) => void	`undefined`	Selection callback. Prevent the event default only when handling navigation yourself.
`particleDistances`	[number, number]	`[90, 10]`	Outer and inner orbit distances in CSS pixels.
`colors`	number[]	`[1,2,3,1,2,3,1,4]`	Palette indices 1–4; override scoped --color-1 through --color-4 variables.
`label`	string	`"Main navigation"`	Accessible navigation label.
`paused`	boolean	`false`	Freeze decorative motion.
`replayToken`	number	`0`	Change to replay or reset the effect.
`className`	string	`''`	Text classes for Curved Loop; outer classes for the other components.