Gooey Svg Filter Menu Demo

1import { useState } from "react"
2import { AnimatePresence, motion } from "motion/react"
3import { Home, Mail, Menu, Settings, User, X } from "lucide-react"
4 
5import useDetectBrowser from "@/hooks/use-detect-browser"
6import GooeySvgFilter from "@/components/fancy/filter/gooey-svg-filter"
7 
8const MENU_ITEMS = [
9  { icon: Home, label: "Home" },
10  { icon: Mail, label: "Contact" },
11  { icon: User, label: "Profile" },
12  { icon: Settings, label: "Settings" },
13]
14 
15export default function GooeyDemo() {
16  const [isOpen, setIsOpen] = useState(false)
17  const browser = useDetectBrowser()
18  const isSafari = browser === "Safari"
19 
20  return (
21    <div className="relative w-dvw h-dvh flex items-center justify-center dark:bg-black bg-white">
22      <GooeySvgFilter id="gooey-filter-menu" strength={5} />
23 
24      <div
25        className="absolute top-4 left-4"
26        style={{ filter: "url(#gooey-filter-menu)" }}
27      >
28        {/* Menu Items */}
29        <AnimatePresence>
30          {isOpen &&
31            MENU_ITEMS.map((item, index) => {
32              const Icon = item.icon
33              return (
34                <motion.button
35                  key={item.label}
36                  className="absolute w-12 h-12 bg-[#efefef] rounded-full flex items-center justify-center"
37                  initial={{ x: 0, opacity: 0 }}
38                  animate={{
39                    y: (index + 1) * 44,
40                    opacity: 1,
41                  }}
42                  exit={{
43                    y: 0,
44                    opacity: 0,
45                    transition: {
46                      delay:
47                        (MENU_ITEMS.length - index) * (isSafari ? 0.0 : 0.05),
48                      duration: isSafari ? 0 : 0.4,
49                      type: "spring",
50                      bounce: 0,
51                    },
52                  }}
53                  transition={{
54                    delay: index * (isSafari ? 0.0 : 0.05),
55                    duration: isSafari ? 0 : 0.4,
56                    type: "spring",
57                    bounce: 0,
58                  }}
59                >
60                  <AnimatePresence mode="wait">
61                    <motion.div
62                      key={item.label}
63                      initial={{ opacity: 0, filter: "blur(10px)" }}
64                      animate={{ opacity: 1, filter: "blur(0px)" }}
65                      exit={{ opacity: 0, filter: "blur(10px)" }}
66                      transition={{
67                        delay: index * (isSafari ? 0.0 : 0.05),
68// … truncated