Neobrutalist Kinetic Dock Menu

Navigation

About

A draggable, magnetic navigation anchor built with a raw neobrutalist design system. It combines user-adjustable positioning with fluid SVG-morphed transitions and a high-impact, staggered fullscreen menu for a truly reactive user experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Neobrutalist Kinetic Dock Menu to your project and fits it to your theme.

Code

How Neobrutalist Kinetic Dock Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/neobrutalist-kinetic-dock-menu";

const navItems = [
    { label: "Home", href: "#" },
    { label: "Services", href: "#" },
    { label: "About", href: "#" },
    { label: "Portfolio", href: "#" },
    { label: "Resume", href: "#" },
    { label: "Contact", href: "#" },
];

export default function DemoDefault() {
    return (
        <div className="relative w-full h-[800px] bg-[#f0f0f0] overflow-hidden font-sans">
            {/* Abstract shapes for glassmorphism preview */}
            <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500 rounded-full blur-[100px] opacity-20 animate-pulse"></div>
            <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-500 rounded-full blur-[100px] opacity-20 animate-pulse delay-700"></div>
            <div className="absolute top-[20%] right-[10%] w-[20%] h-[20%] bg-yellow-400 rounded-full blur-[80px] opacity-20 animate-pulse delay-1000"></div>

            <div className="relative z-10 flex flex-col items-center justify-center h-full text-black text-center p-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl px-4">
                    <div className="bg-white border-4 border-black p-6 shadow-neo -rotate-1 hover:rotate-0 transition-transform">
                        <h3 className="font-black text-xl mb-2 uppercase">Neo-Brutalism</h3>
                        <p className="font-bold opacity-70">Thick borders, hard shadows, and high contrast.</p>
                    </div>
                    <div className="bg-white border-4 border-black p-6 shadow-neo rotate-2 hover:rotate-0 transition-transform">
                        <h3 className="font-black text-xl mb-2 uppercase">Touch-First</h3>
                        <p className="font-bold opacity-70">Optimized for mobile drag & snap interactions.</p>
                    </div>
                </div>
            </div>

            {/* The Navigation Component */}
            <Component items={navItems} />
        </div>
    );
}