Gooey Svg Filter Demo

1import { useState } from "react"
2import { AnimatePresence, motion } from "motion/react"
3 
4import useDetectBrowser from "@/hooks/use-detect-browser"
5import useScreenSize from "@/hooks/use-screen-size"
6import { Button } from "@/components/ui/button"
7import GooeySvgFilter from "@/components/fancy/filter/gooey-svg-filter"
8 
9const TAB_CONTENT = [
10  {
11    title: "2024",
12    files: [
13      "learning-to-meditate.md",
14      "spring-garden-plans.md",
15      "travel-wishlist.md",
16      "new-coding-projects.md",
17    ],
18  },
19  {
20    title: "2023",
21    files: [
22      "year-in-review.md",
23      "marathon-training-log.md",
24      "recipe-collection.md",
25      "book-reflections.md",
26    ],
27  },
28  {
29    title: "2022",
30    files: [
31      "moving-to-a-new-city.md",
32      "starting-a-blog.md",
33      "photography-basics.md",
34      "first-coding-project.md",
35    ],
36  },
37  {
38    title: "2021",
39    files: [
40      "goals-and-aspirations.md",
41      "daily-gratitude.md",
42      "learning-to-cook.md",
43      "remote-work-journal.md",
44    ],
45  },
46]
47 
48export default function GooeyDemo() {
49  const [activeTab, setActiveTab] = useState(0)
50  const [isGooeyEnabled, setIsGooeyEnabled] = useState(true)
51  const screenSize = useScreenSize()
52  const browserName = useDetectBrowser()
53  const isSafari = browserName === "Safari"
54 
55  return (
56    <div className="relative w-dvw h-dvh flex justify-center p-8 font-calendas md:text-base text-xs sm:text-sm bg-white dark:bg-black">
57      <GooeySvgFilter
58        id="gooey-filter"
59        strength={screenSize.lessThan("md") ? 8 : 15}
60      />
61 
62      <Button
63        variant="outline"
64        onClick={() => setIsGooeyEnabled(!isGooeyEnabled)}
65        className="absolute top-4 left-4 font-overused-grotesk"
66      >
67        {isGooeyEnabled ? "Disable filter" : "Enable filter"}
68      </Button>
69 
70      <div className="w-11/12 md:w-4/5 relative mt-24">
71        <div
72          className="absolute inset-0"
73          style={{ filter: isGooeyEnabled ? "url(#gooey-filter)" : "none" }}
74        >
75          <div className="flex w-full ">
76            {TAB_CONTENT.map((_, index) => (
77              <div key={index} className="relative flex-1 h-8 md:h-12">
78                {activeTab === index && (
79                  <motion.div
80                    layoutId="active-tab"
81                    className="absolute inset-0 bg-[#efefef]"
82                    transition={{
83                      type: "spring",
84                      bounce: 0.0,
85                      duration: isSafari ? 0 : 0.4,
86// … truncated