Components
Loading preview...
This is a modern, interactive navigation header component built with React, TypeScript, and Framer Motion. Here's a breakdown of its functionality and design: 1. **Main Features**: - An animated navigation menu with a sliding cursor effect - Hover interactions that move a black background pill behind menu items - Mix-blend-difference effect that makes text appear white over the black background - Responsive design with different sizes for mobile/desktop - Rounded pill-style container with a border 2. **Component Structure**: - `Header`: The main component that manages position state - `Tab`: A subcomponent for individual menu items - `Cursor`: An animated motion component that slides behind the active tab 3. **Technical Implementation**: - Uses Framer Motion for smooth animations - Implements mouse event handlers for interactive effects - Uses refs to measure and position elements - Responsive styling with Tailwind CSS - Client-side component (marked with "use client")
@krittyz
npx shadcn@latest add https://21st.dev/r/abdulali254/nav-headerimport NavHeader from "@/components/blocks/nav-header"
function HomeDemo() {
return (
<header className="justify-center items-center h-screen p-10">
<NavHeader />
</header>
);
}
export { HomeDemo }