Mycelium Network
An interactive image transition component. Connects an SVG grid of nodes and edges masked with a mathematical gooey filter. On hover, it calculates the cursor's origin and triggers a radiating physics simulation where edges snap and nodes organically drift outward.
Last Modified:Aug 17, 2026
Install
CLI
mycelium-network
Or install a specific demo variant:
mycelium-network-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | Required | The URL of the image to display on top. |
children | React.ReactNode | Required | The content to reveal underneath the image. |
columns | number | 16 | Number of columns in the network grid. |
rows | number | 9 | Number of rows in the network grid. |
edgeThickness | string | "20%" | Initial thickness of the connecting web lines. |
nodeRadius | string | "15%" | Initial radius of the anchor nodes. |
duration | number | 1.2 | Base duration of the snap and drift animations. |
staggerMultiplier | number | 0.7 | Controls how fast the wave ripples outward from the cursor. |