Sticky Blur Navigation
Sticky top nav that gains a blur backdrop and hairline after scrolling; logo left, links centre, CTA right, mobile sheet menu.
Component code: StickyNav.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build the one navigation pattern every landing page needs, done properly: invisible at the top, solid once you scroll.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion. Scroll state via a passive scroll listener (threshold 8px), no scroll-jacking.
LAYOUT
Layout
Fixed top bar, height 4rem. Inner: max-w-6xl flex row — logo left, centre links (desktop only), right: sign-in link + primary CTA button. At rest: transparent background, no border. Scrolled: background hsl(var(--background)/0.8) + backdrop-blur + bottom hairline. Mobile: hamburger opens a full-width dropdown sheet under the bar with the same links stacked, 48px rows.
TYPOGRAPHY
Typography
Logo: 1.1rem/700. Links: 0.95rem/500. CTA: 0.95rem/600.
COLOR TOKENS
Color Tokens
--background: 0 0% 100%; --foreground: 240 20% 10%; --primary: 250 80% 60%; --primary-foreground: 0 0% 100%; --border: 240 15% 90%; --muted-foreground: 240 10% 45%.
SPACING
Spacing
Bar padding 0 1.5rem; link gap 2rem; CTA padding 0.6rem 1.2rem rounded-full.
ANIMATION
Animation
Background/border transition 0.25s. Sheet opens with height+fade 0.25s. Active-section link gets primary colour (IntersectionObserver optional). Reduced motion: transitions off.
RESPONSIVE
Responsive
<md: centre links hidden, hamburger shown; bar height stays 4rem; sheet links are full-width rows.
SAMPLE COPY
Sample Copy
Links: "Features", "Pricing", "Reviews", "FAQ". CTA: "Start free". Sign-in: "Sign in".