The swell

A floating colonnade. The shaft nearest your pointer bulges and lifts, and the architrave it carries drapes into the columns either side.

A navigation bar fixed to the foot of the viewport, one Corinthian column per link. The shaft under the pointer widens and rises; its flutes bulge with it, the drum is shaded as a cylinder lit from the page's own sun, and the acanthus is redrawn at whatever width the column currently is — so the carving resolves as you approach rather than sitting there as a smudge. The columns are coupled springs and the architrave is the beam resting on them, so a shove near the pointer carries a column or two out before it dies, and the whole silhouette — glass, cast shadow and all — deforms with the beam rather than sitting in a rectangle. The swell is driven by the pointer's position along the slab rather than by which link is hovered, because the columns displace as they grow and a hover test would change its own answer. Total width never changes: growth comes out of the gaps, so the dock cannot move its own centre. With no pointer to read — a touch screen, or a keyboard tabbing the row — the current column stays swollen instead. The stone is neutral by default; set `--entasis-stone` warm and the whole colonnade turns.

Integration

<link rel="stylesheet" href="anthemion.css">
<script type="module" src="anthemion.js"></script>

<anthemion-entasis place="fixed" swell="55" spread="45" lift="40" sway="35" flutes="20">
  <nav><a href="/work" aria-current="page">Work</a><a href="/studio">Studio</a><a href="/press">Press</a><a href="/contact">Contact</a></nav>
</anthemion-entasis>

Slot

Primary navigation, as persistent floating chrome rather than a masthead.

Custom properties

--entasis-stone
--entasis-position
--entasis-inset
--entasis-field
--entasis-blur
--sky-azimuth
--sky-shadow

Budget

One per page. Two floating docks is two navigations, and the visitor has to choose between them.
Never with a stoa. Both are colonnades doing the same job — pick the register and commit to it.
Between three and seven columns. Fewer is a pair of links; more is a menu, and a menu is not a colonnade.
One or two words per label. Every cell is as wide as the longest one, so a third word stretches the whole dock.
Never inside a scrolling container. It is fixed chrome and it pins itself to the viewport.