a navigation that behaves like a droplet · leans, reaches, splits, reforms · from the deniz lab
- hover
- magnetic. it leans before you get there
- click
- the body divides into the buttons
- hold
- it squeezes under the press
the split, frame by frame
drag to scrubthe strip runs the surface the nav ships on, so it reads the way the thing above it does: blur the cluster, threshold the alpha back to a hard edge, then composite the untouched circles on top, so every droplet keeps a true vector edge and only the necks are raster. it merges by proximity rather than pair by pair, which makes it n-body for free — anything near anything else fuses, in any arrangement.
it is also why nothing ever surfaces as a dot and swells. a droplet fills at nearly twice the rate it travels, so it is already full size while still inside its parent, and the filter keeps it there until it has actually cleared — it separates at size. flip [ surface ] on the stage for the solved joins instead: tangent points on both circles closed with cubic curves along the surface normals, one continuous path, tension fading as they part so the break gives out rather than switching off.
how it moves
- 01the pacingthe droplets sit close enough together that a neck survives almost the whole travel. there is no moment where the split is over and the motion is still going — the division is the animation.
the droplets sit close enough together that a neck survives almost the whole travel. there is no moment where the split is over and the motion is still going — the division is the animation.
- 02the curveeach droplet is walked along its path by an authored curve with a spring chasing underneath. it holds while the neck takes the strain, crosses the middle without lurching, and glides to a stop.
each droplet is walked along its path by an authored curve with a spring chasing underneath. it holds while the neck takes the strain, crosses the middle without lurching, and glides to a stop.
- 03every pairnot just neighbours along the chain. while the droplets are still stacked on each other they read as one mass, and two of them find each other again if you push one toward the other.
not just neighbours along the chain. while the droplets are still stacked on each other they read as one mass, and two of them find each other again if you push one toward the other.
- 04the leanthe only thing the cursor does. a field past each droplet edge tilts it toward the pointer, squared, so the fringe is a lean and not a lunge. no tendril, no chasing.
the only thing the cursor does. a field past each droplet edge tilts it toward the pointer, squared, so the fringe is a lean and not a lunge. no tendril, no chasing.
usage
npm install @denizeffects/dropnavimport { DropNav } from "@denizeffects/dropnav";
<DropNav
position="top-right"
layout="arc"
items={[
{ label: "home", href: "/", icon: <Home /> },
{ label: "work", href: "/work", icon: <Work /> },
{ label: "contact", href: "/contact", icon: <Mail /> },
]}
/>:root {
--dn-ink: #1b1a17; /* the liquid */
--dn-icon: #f7f6f3; /* icons and the resting dots */
--dn-focus: #1b1a17; /* focus ring; falls back to --dn-ink */
}