Gooey Svg Filter Pixel Trail Demo

1import useDetectBrowser from "@/hooks/use-detect-browser"
2import useScreenSize from "@/hooks/use-screen-size"
3import PixelTrail from "@/components/fancy/background/pixel-trail"
4import GooeySvgFilter from "@/components/fancy/filter/gooey-svg-filter"
5 
6export default function GooeyDemo() {
7  const screenSize = useScreenSize()
8  const browserName = useDetectBrowser()
9  const isSafari = browserName === "Safari"
10 
11  return (
12    <div className="relative w-dvw h-dvh flex flex-col items-center justify-center gap-8 bg-black text-center text-pretty">
13      <img
14        src="https://images.aiscribbles.com/34fe5695dbc942628e3cad9744e8ae13.png?v=60d084"
15        alt="impressionist painting"
16        className="w-full h-full object-cover absolute inset-0 opacity-70"
17      />
18 
19      <GooeySvgFilter id="gooey-filter-pixel-trail" strength={5} />
20 
21      <div
22        className="absolute inset-0 z-0"
23        style={{ filter: isSafari ? "none" : "url(#gooey-filter-pixel-trail)" }}
24      >
25        <PixelTrail
26          pixelSize={screenSize.lessThan(`md`) ? 24 : 32}
27          fadeDuration={0}
28          delay={500}
29          pixelClassName="bg-white"
30        />
31      </div>
32 
33      <p className="text-white text-4xl sm:text-5xl md:text-7xl z-10 font-calendas w-1/2 font-bold">
34        Speaking things into existence
35        <span className="font-overused-grotesk"></span>
36      </p>
37    </div>
38  )
39}