Smart Header

Create a smart auto-hiding header. A fixed/sticky header that slides out of view when the user scrolls down (they're reading, give them the space) and slides back the moment they scroll up (they're looking for navigation). Implementation: track scroll position; on each scroll event compare against the previous position. If scrolling down more than a small threshold (2-5px), set the header to transform: translateY(-100%); if scrolling up, back to translateY(0). Within the first ~60px of the page, always keep it visible. Animate with transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1). Throttle the handler with requestAnimationFrame. Style: semi-transparent page-background color at ~90% opacity with backdrop-filter: blur(8-12px) and a bottom hairline border. Animate transform only (never height), so the page never reflows. Keyboard focus moving into the header must reveal it, and when prefers-reduced-motion is enabled the header stays permanently visible. 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.