Animated Menu

<AnimatedMenu>
  <AnimatedMenuButton>
    <AnimatedMenuButtonToggleIcon />
    <AnimatedMenuButtonLabel />
  </AnimatedMenuButton>

  <AnimatedMenuList>
    <div className="flex flex-col items-start gap-4 *:transition-blur *:duration-300 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none">
      {menuItems.map((item, i) => (
        <AnimatedMenuItem key={i} order={i}>
          <Link
            className="text-sm font-medium text-muted"
            href={item.href}
            title={item.title}
          >
            {item.title}
          </Link>
        </AnimatedMenuItem>
      ))}
    </div>
  </AnimatedMenuList>
</AnimatedMenu>