Pixel Dissolve Text.

SVG feMorphology와 feConvolveMatrix로 텍스트를 픽셀화(모자이크)하고, feTurbulence 기반 디졸브 마스크와 결합하여 레트로 게임처럼 픽셀 단위로 흩어지며 사라지는 효과를 적용합니다. 텍스트 위에 마우스를 올려보세요.

PIXEL

컨트롤 패널

표시할 텍스트

픽셀 블록 크기 (1~20)

노이즈 주파수 (낮을수록 큰 덩어리)

노이즈 디테일 (1~8)

디졸브 애니메이션 시간 (ms)

호버 시 자동 디졸브

ON

텍스트 색상

텍스트 크기

글꼴 두께

1

인터렉션 아이디어

언제:사용자가 텍스트 위에 마우스를 올리거나, progress 값이 변경될 때
무엇을:텍스트의 각 픽셀 영역을
어떻게:SVG feMorphology(dilate)로 픽셀 블록을 확대하고 feConvolveMatrix 평균 필터로 모자이크 효과를 만든 뒤, feTurbulence 노이즈 기반 sigmoid 마스크와 feComposite로 합성하여 픽셀 단위로 점진적으로 흩어지는 레트로 디졸브 효과를 표현
2

바이브 프롬프트

PixelDissolveText 컴포넌트를 만들어주세요. SVG feMorphology로 텍스트를 픽셀 블록으로 확대하고 feConvolveMatrix 평균 필터로 모자이크 효과를 만듭니다. 동시에 feTurbulence로 fractal noise를 생성하고 feComponentTransfer의 sigmoid table로 디졸브 마스크를 만들어 feComposite로 합성합니다. progress가 증가하면 픽셀 블록이 커지면서 동시에 노이즈 패턴에 따라 부분적으로 사라지는 레트로 게임 스타일 효과를 구현합니다. requestAnimationFrame으로 60fps 부드러운 애니메이션을 지원하고, 호버 트리거와 외부 progress 제어를 모두 지원해주세요.