About this concept

An organic navigation where the menu items are joined into a single continuous shape. Hovering (or focusing) an item makes the whole bar respond, so it feels like one living, elastic object rather than a row of separate buttons.

Built for the Holos app · Holos teal on near-black · Montserrat UI / Fraunces headings.

True vector geometry (not a blur filter)

Early drafts used an SVG “gooey” blur filter to fuse the pills, but that reads soft and raster-y. This version generates one real SVG path every frame: each pill is a flat-topped stadium, and each neck is a pair of cubic Bézier curves that pinch to a waist and meet the pills with horizontal tangents (so the joins are perfectly smooth).

The neck maths came from a hand-drawn reference. With R = cap radius (= half the bar height) and s = half the gap between two pills: the waist pinches to R/3, the pill-side Bézier handle is ⅔·s and the waist-side handle is s − R.

The path builder generalises that: each pill carries its own cap radius, each neck its own waist thickness and waist position, and s is measured separately on each side of the waist. Set the radii equal, the waists to R/3 and the positions to the midpoints and it draws exactly the original shape — every mode below is a different way of feeding that one function.

Flow

The chosen mode. Nothing scales and no label moves: the layout is built from fixed centres rather than accumulated gaps, so there is no re-centring shift at all. The only thing that changes is the waist of each neck, driven by a distance field:

waist[i] = W3 · (1 + FLOW · smoothstep((RADIUS − |cursorX − neckMid[i]|) / RADIUS))

Because that target moves continuously with the cursor, a fixed-duration tween is the wrong tool — it would restart every frame. Flow uses an exponential spring instead, framerate-independent:

k = 1 − exp(−dt / TAU)
cur += (target − cur) · k

When the pointer leaves, the field’s focus point falls back to the selected item’s centre and the same spring carries it there, so the bar settles into a resting swell that marks the selection.

Making it flow

The first build stuttered — the pointer would catch and stick. Four causes, all of them structural rather than incidental:

1 · Uncoalesced input doing layout work

The old mousemove handler called svg.getScreenCTM() to convert the cursor into user space. That is a geometry read, so it forces a synchronous style + layout flush of the whole document — and it ran once per pointer event. Measured on this page: a DOM write followed by getScreenCTM() costs 0.030ms against 0.003ms for the write alone. A 1000Hz mouse therefore asks for a thousand full layout flushes a second, and the event queue backs up faster than frames can drain it. That is exactly what “the mouse gets stuck” feels like.

Now the handler does one thing: stash clientX/clientY and set a dirty flag. Every derived value — hit testing, glow position, label proximity, the flow field — is computed once per animation frame from the most recent sample. Extra events between frames cost nothing.

2 · The matrix is cached

The inverse CTM only changes when the page scrolls, resizes or re-measures, so it is computed once and invalidated on those events. Per-frame conversion is then six multiplies against cached numbers, with no layout flush and no SVGPoint allocation.

3 · The clip path is gone

The glow used to be two large gradient-filled circles inside a <g clip-path> that referenced the shape. Clipping against a path that changes every frame is the most expensive thing the old version did — the clip has to be re-rasterised as a mask each time. It is now a second copy of the same path filled with a userSpaceOnUse radial gradient whose centre follows the focus point. No clip, no mask, and the geometry string is written to both paths from one build.

4 · Fewer, smaller writes

• Path coordinates are rounded to 0.1. The old builder emitted numbers like 9.642123690264803; the d string went from ~1,500 characters to well under half that, which the browser has to re-parse every frame.
• The d attribute is only written when the string actually changed.
• Label opacity is eased in the frame loop and only written when it moves by more than 0.004 — and opacity was removed from the CSS transition, because writing it per frame was restarting a 300ms transition on six elements sixty times a second.
• Label positions and hit rects are written only when they change, not every frame. In the fixed-label modes that is once.
• Arrays are preallocated and written in place, so a sustained sweep allocates nothing and never triggers GC.

Turn on show frame time to watch it. The loop stops entirely once the spring settles, so an idle bar costs zero.

The hover fix

In the original, hovering an item moves it, and the necks between the pills have no hit area at all — so the cursor drops into a dead gap, the bar collapses back, the cursor is over the item again, and it oscillates. Fixed labels remove the first half; bigHit removes the second.

• Tiled bands. Each item owns everything out to the middle of the neck on either side, so there are no dead gaps. The end items get HIT_OUT px of overshoot past the caps.
• Full-height bands. Bands span the whole SVG box (76px rather than the 48px pill), so approaching from above or below is forgiving.
• Pointer-driven hover. Hover is resolved from pointer samples rather than per-item mouseenter. mouseenter/mouseleave also fire when the geometry moves under a stationary cursor; resolving on movement means a still cursor can never re-trigger anything.
• A frozen hit map, plus latching. The bands freeze while the geometry is in motion and snap to it once settled. On top of that the hovered item latches — it holds hover until the cursor clears its band by HYST (26px).

The other modes

Flow, neck and pinch are the same one-line change — cfg.thick, the waist multiplier. Positive fills the join in, negative pinches it out, and flow drives the same number from a distance field instead of a per-item flag.

Sliding the waist position toward the active item (cfg.drift, still supported) was tried and dropped. The waist has to fall R − W3 = 16px, so it needs roughly 20px of span on each side to do it gracefully; the resting half-span is only 32.5px, leaving about 12px of usable drift — not enough to see. Push further and the near-side taper collapses into a hard vertical corner. It would work at a resting gap of 1.8·H or more.

Editing

Everything is in one self-contained file. Global constants sit at the top of OrganicNav(); the per-mode numbers live in the ONAV_CFG table just above it.

Colours

Swap the brand colours in the :root block at the top of the stylesheet:

--bg:    #011012;   /* page background    */
--shape: #031d22;   /* the connected pill shape */
--ink:   #fffcfb;   /* label text         */
--teal:  #279DAF;   /* selected text + underline + glow */

Glow strength lives on the gradient stop-opacities (0.38 / 0.15 / 0) plus the .glow resting opacity (0.42, going to 1 on hover).

Implementing

The component API

OrganicNav(hostElement, {
  id: 'prod',                 // unique prefix for this instance's SVG ids
  items: [                    // your menu
    { label: 'Directory', href: '/directory' },
    { label: 'Map',       href: '/map' },
    /* ... */
  ],
  selectedIndex: 0,           // initial active item
  mode: 'flow',               // 'flow' | 'neck' | 'pinch' | 'width' | 'swell' | 'spread'
  bigHit: true,               // tiled, full-height, latching hit areas
  asLinks: true,              // real <a> links + keyboard + URL routing
  responsive: true            // resize re-measure + mobile fallback menu
});

You can place more than one on a page — just give each a unique id (it namespaces the SVG gradient IDs so instances don’t collide). Each instance only runs a frame loop while it is actually animating.

In Webflow

• Add an HTML Embed containing a host <div id="nav"></div>, the component <script>, and the small CSS block (or move the CSS into the page/site styles).
• Montserrat & Fraunces are already loaded in Holos, so you can drop the Google-Fonts <link>.
• The SVG reserves a fixed footprint, so nothing it does reflows the logo or account menu beside it. In flow that footprint is just the resting size plus padding.
• If the nav lives inside a scrolling container rather than the page, add that container’s scroll event to the CTM invalidation list — otherwise the glow will lag behind the cursor after scrolling.
• For the lab/CDN pattern this can be split into organic-nav.css + organic-nav.js and loaded via the standard loader — say the word and I’ll package it that way.

Real (multi-page) routing

The production demo derives the active item from location.hash. For a normal multi-page site, point each item’s href at a real URL and match on the path instead — change indexFromHash() to compare location.pathname against item.href.

Accessibility notes

• Items are real links: Tab to move, Enter to activate, with a teal focus ring; aria-current="page" marks the active item.
• Resting labels sit at BASE_OP = 0.72 for readability and brighten toward full opacity near the cursor.
• prefers-reduced-motion collapses every spring and tween to instant.
• Below 720px the SVG hides and a tappable pill menu takes over, since the effect is hover-only.