import { useState } from "react" import { AnimatePresence, motion } from "motion/react" import useDetectBrowser from "@/hooks/use-detect-browser" import useScreenSize from "@/hooks/use-screen-size" import { Button } from "@/components/ui/button" import GooeySvgFilter from "@/components/fancy/filter/gooey-svg-filter" const TAB_CONTENT = [ { title: "2024", files: [ "learning-to-meditate.md", "spring-garden-plans.md", "travel-wishlist.md", "new-coding-projects.md", ], }, { title: "2023", files: [ "year-in-review.md", "marathon-training-log.md", "recipe-collection.md", "book-reflections.md", ], }, { title: "2022", files: [ "moving-to-a-new-city.md", "starting-a-blog.md", "photography-basics.md", "first-coding-project.md", ], }, { title: "2021", files: [ "goals-and-aspirations.md", "daily-gratitude.md", "learning-to-cook.md", "remote-work-journal.md", ], }, ] export default function GooeyDemo() { const [activeTab, setActiveTab] = useState(0) const [isGooeyEnabled, setIsGooeyEnabled] = useState(true) const screenSize = useScreenSize() const browserName = useDetectBrowser() const isSafari = browserName === "Safari" return (

{TAB_CONTENT.map((_, index) => (

{activeTab === index && ( )}

))}

{/* Content panel */}

{file}

{/* Interactive text overlay, no filter */}

{TAB_CONTENT.map((tab, index) => ( ))}

) }

Gooey Svg Filter Demo

Instalação

Dependências

Registry dependencies