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.
Top comments (0)