Paint Fill Text.

텍스트가 물감이 채워지는 듯한 애니메이션 효과를 적용하여 위에서 아래로 색상이 채워지는 시각적 효과를 구현합니다.

Paint Fill Text
Paint Fill Text

컨트롤 패널

표시할 텍스트

애니메이션 지속 시간 (초)

애니메이션 시작 지연 시간 (초)

채워질 텍스트 색상

텍스트 크기

글꼴 두께

텍스트 스타일 옵션

1

인터렉션 아이디어

언제:컴포넌트가 마운트되거나 애니메이션이 시작될 때
무엇을:텍스트를
어떻게:CSS clip-path와 background-clip을 활용하여 물감이 채워지는 듯한 애니메이션으로 표현하고, 외곽선과 채워진 텍스트를 겹쳐서 입체감 구현
2

바이브 프롬프트

PaintFillText 컴포넌트를 만들어주세요. 이 컴포넌트는 텍스트가 물감이 채워지는 듯한 애니메이션 효과를 보여줍니다. text prop으로 표시할 텍스트를, duration prop으로 애니메이션 지속시간을, delay prop으로 시작 지연시간을, textColor prop으로 채워질 색상을, fontSize prop으로 텍스트 크기를, fontWeight prop으로 글꼴 두께를 설정할 수 있게 해주세요. CSS 모듈을 사용하여 clip-path와 background-clip을 활용한 물감 채우기 애니메이션을 구현하고, 외곽선 텍스트와 채워진 텍스트를 겹쳐서 입체감을 표현해주세요. trackingTight와 leadingNone 옵션으로 텍스트 스타일을 조정할 수 있게 해주세요.