Liquid Text.
SVG feTurbulence와 feDisplacementMap 필터를 활용하여 텍스트에 액체처럼 흐르는 왜곡 애니메이션을 적용합니다.
LIQUID
컨트롤 패널
표시할 텍스트
왜곡 강도 (px)
노이즈 주파수 (낮을수록 큰 물결)
애니메이션 속도
노이즈 디테일 레벨 (1~8)
텍스트 색상
텍스트 크기
글꼴 두께
1
인터렉션 아이디어
언제:컴포넌트가 마운트될 때
무엇을:텍스트의 모든 픽셀을
어떻게:SVG feTurbulence로 Perlin Noise를 생성하고, feDisplacementMap으로 노이즈 값에 따라 픽셀 위치를 왜곡하여 액체처럼 흐르는 효과를 실시간으로 표현
2
바이브 프롬프트
LiquidText 컴포넌트를 만들어주세요. SVG feTurbulence 필터로 Perlin Noise를 생성하고, feDisplacementMap으로 텍스트 픽셀을 왜곡하여 액체처럼 흐르는 효과를 만듭니다. requestAnimationFrame으로 turbulence seed를 매 프레임 변경하여 실시간 애니메이션을 구현합니다. scale(왜곡 강도), baseFrequency(물결 크기), speed(속도), numOctaves(디테일) prop을 지원해주세요.