MotionMenu is an interactive navigation component that uses smooth animations and directional hover effects to create a dynamic, engaging menu experience.
import { Component } from "@/components/ui/motion-menu";
const demoItems = [
{ link: "#", text: "Mojave", image: "https://cdn.21st.dev/assets/mirror/bf/bfe039363c060dd56e041d0c886c66d63338a3fe08cb40783831e85a27057fd8.jpg" },
{ link: "#", text: "Sonoma", image: "https://cdn.21st.dev/assets/mirror/f0/f047e082fe67b5f4f001c21346a99753b2ff5aaa77e775ec4d109accba73378a.jpg" },
{ link: "#", text: "Monterey", image: "https://cdn.21st.dev/assets/mirror/d5/d5885303071c9378f369f3f4ea0464c4d42d6d97ee56b54efdc1bb68596cb5b4.jpg" },
{ link: "#", text: "Sequoia", image: "https://cdn.21st.dev/assets/mirror/25/257fdf5727ef83b97cee31a7449fd52caf7bd19da66e2834ee487a6680e43b32.jpg" },
];
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>
);
}