Build Vercel-style Scroll-Aware Navigation with Next.js and Motion

Animated Header: A scroll-aware navigation component for Next.js that animates based on user scroll position.

Key features:

🎯 Logo scales down as you scroll with Motion animations
⚡ Sticky navigation stays fixed at viewport top
🔄 Real-time GitHub star count integration
🎨 Built-in theme toggle with dark mode support
📱 Smooth tab transitions that shift horizontally on scroll

Built with Next.js, TailwindCSS, Shadcn/UI, and Motion.

The component handles scroll detection automatically and applies animations without manual event listener setup.

You can customize scroll speeds, animation timing, and tab configurations through simple prop modifications.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo