Header Nav

Create a site header with a nav indicator that stretches while it travels. Structure: a sticky header (position: sticky, top: 0, z-index above the page) with a wordmark on the left and 3-5 nav links on the right. Wrap the links in a relatively positioned <nav>. The indicator: a single absolutely positioned bar (height 2px, accent color, bottom: 0) inside that <nav>. Do NOT give each link its own underline, and do NOT use a shared layoutId slide. Instead track two numbers, the bar's left edge and its right edge, and animate them with two DIFFERENT springs: - leading edge: stiff and quick (spring, stiffness ~700, damping ~46) - trailing edge: soft and laggy (spring, stiffness ~300, damping ~38) When the target changes, work out which way the bar is moving. Moving right, the right edge is the leading one; moving left, the left edge leads. Give the leading edge the stiff spring and the trailing edge the soft one. The result is that the bar physically stretches out of the old link, spans the gap, then snaps shut on the new one, like ink pulled across the row. Style the bar with x = left and width = right minus left. Measure each link with getBoundingClientRect relative to the nav container, and re-measure on resize with a ResizeObserver so the bar never drifts. The indicator follows hover when the pointer is inside the nav and falls back to the active link when it leaves. Condense on scroll: past ~18px of scroll, shrink the header's vertical padding, fade in a translucent background with backdrop-filter: blur(8px) and a hairline bottom border, and collapse the wordmark to just its first character by animating max-width to 0 on the rest of the letters (keep overflow: hidden so they wipe rather than pop). If prefers-reduced-motion is enabled, place the bar directly with no spring and skip the condense animation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.