Components
Loading preview...
MotionMenu is an interactive navigation component that uses smooth animations and directional hover effects to create a dynamic, engaging menu experience.
@satyam-mishra-dev
npx shadcn@latest add https://21st.dev/r/satyam-mishra-dev/motion-menuimport { Component } from "@/components/ui/motion-menu";
const demoItems = [
{ link: "#", text: "Mojave", image: "https://picsum.photos/600/400?random=1" },
{ link: "#", text: "Sonoma", image: "https://picsum.photos/600/400?random=2" },
{ link: "#", text: "Monterey", image: "https://picsum.photos/600/400?random=3" },
{ link: "#", text: "Sequoia", image: "https://picsum.photos/600/400?random=4" },
];
export default function DemoOne() {
return (
<div className="w-screen h-[600px]">
<Component
items={demoItems}
speed={15}
textColor="#ffffff"
bgColor="#060010"
marqueeBgColor="#ffffff"
marqueeTextColor="#060010"
borderColor="#ffffff"
className="w-full h-full"
/>
</div>
);
}