Reveal button effect https://twitter.com/samselikoff/status/1451216044438261760

reveal-button.jsx

<div className="grid grid-cols-2 mt-8 gap-y-4 gap-x-4">
  {categories.map((category) => (
    <motion.button
      whileTap={{ scale: 1.05 }}
      onMouseDown={() => setCategoryPressed(category.id)}
      onMouseUp={() => setCategoryPressed(null)}
      className="relative w-full py-3 overflow-hidden bg-white border rounded-lg"
      key={category.id}
    >
      <motion.span
        initial={{ clipPath: "inset(0% 100% 0% 0%)" }}
        animate={{
          clipPath:
            categoryPressed === category.id
              ? "inset(0% 0% 0% 0%)"
              : "inset(0% 100% 0% 0%)",
        }}
        transition={{ duration: 1.5 }}
        // onAnimationComplete={() => {
        //   if (categoryPressed) {
        //     alert("hi");
        //   }
        // }}
        className="absolute inset-0 flex items-center justify-center w-full text-white bg-blue-500 pointer-events-none"
      >
        {category.label}
      </motion.span>

      <span className="">{category.label}</span>
    </motion.button>
  ))}
</div>