Dissolve Text.
SVG feTurbulence와 feComponentTransfer 필터를 활용하여 텍스트가 먼지처럼 흩어지며 사라지는 디졸브 효과를 적용합니다. 텍스트 위에 마우스를 올려보세요.
DISSOLVE
컨트롤 패널
표시할 텍스트
노이즈 주파수 (낮을수록 큰 덩어리)
노이즈 디테일 (1~8)
디졸브 애니메이션 시간 (ms)
호버 시 자동 디졸브
ON
텍스트 색상
텍스트 크기
글꼴 두께
1
인터렉션 아이디어
언제:사용자가 텍스트 위에 마우스를 올리거나, progress 값이 변경될 때
무엇을:텍스트의 각 픽셀 영역을
어떻게:SVG feTurbulence로 fractal noise 패턴을 생성하고, feComponentTransfer의 discrete threshold로 노이즈를 이진 마스크로 변환한 뒤, feComposite로 원본과 합성하여 점진적으로 흩어지는 효과를 표현
2
바이브 프롬프트
DissolveText 컴포넌트를 만들어주세요. SVG feTurbulence로 fractal noise를 생성하고, feComponentTransfer의 discrete 함수로 노이즈를 이진 마스크(threshold)로 변환합니다. feComposite의 'in' 연산자로 마스크와 원본 텍스트를 합성하여 노이즈 패턴에 따라 텍스트가 부분적으로 사라지는 효과를 만듭니다. threshold 값을 0→1로 변경하면 점점 더 많은 영역이 사라집니다. 호버 트리거와 외부 progress 제어를 모두 지원해주세요.