Components
Gooey Nav
Interactive navigation with particle effects and gooey animations
Configuring your account...
Please wait while we prepare everything for you
Usage
import GooeyNav from './GooeyNav'
// update with your own items
const items = [
{ label: "Home", href: "#" },
{ label: "About", href: "#" },
{ label: "Contact", href: "#" },
];
<div style={{ height: '600px', position: 'relative' }}>
<GooeyNav
items={items}
particleCount={15}
particleDistances={[90, 10]}
particleR={100}
initialActiveIndex={0}
animationTime={600}
timeVariance={300}
colors={[1, 2, 3, 1, 2, 3, 1, 4]}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | GooeyNavItem[] | [] | Navigation items with label and href |
animationTime | number | 600 | Base animation duration in milliseconds |
particleCount | number | 15 | Number of particles in the effect |
particleDistances | [number, number] | [90, 10] | Start and end distances for particles |
particleR | number | 100 | Particle rotation range |
timeVariance | number | 300 | Time variance for particle animations |
colors | number[] | [1, 2, 3, 1, 2, 3, 1, 4] | Color indices for particles |
initialActiveIndex | number | 0 | Initially active navigation item |