import { useEffect, useRef, useState } from "react" import { animate, useMotionValue, useMotionValueEvent } from "motion/react" import PixelateSvgFilter from "@/components/fancy/filter/pixelate-svg-filter" export default function PixelateSVGFilterDemo() { const containerRef = useRef(null) const pixelSize = useMotionValue(16) const [size, setSize] = useState(16) const [isAnimating, setIsAnimating] = useState(true) useMotionValueEvent(pixelSize, "change", (latest) => { setSize(latest) }) useEffect(() => { const controls = animate(pixelSize, 1, { duration: 1.2, ease: "easeOut", onComplete: () => setIsAnimating(false), }) return controls.stop }, []) return (

{isAnimating && ( )} {/* Left Content */}

Ari — Yu

hello@ariyu.co

Creative Director

& Writer

Selected Works

Dreamweaver #93 Dec 2023 Starlight #87 "digital dreams" The Quantum Mirror Press Holograph Vol.5 crystal edition 2020 Byte Flow Vol.12 Neural Canvas #9 Synthmagazin 11/2020 VOID 2020 zine Nebula #4 VOID 量子 + Wave zines Binary Pulse volume 7 Cyber Cascade (self-published)

{/* Right Content - Image */}

) }

Pixelate Svg Filter Text

Instalação

Dependências

Registry dependencies