AWESOME AI MOTION
효과Effects / 질감·스타일Texture & Style / Nº 489

질감 채움 모션Animated Texture Fill

Animated Texture Fill
질감 채움 모션
다른 이름Also known as · Texture text fill · 글자 내부 질감 흐름 · Text Image Fill · 글자 속 이미지 · bg-clip-text-shape · Heatmap Logo Flow · 열지도 로고 흐름 · Gem Smoke Mask · 보석 연무 마스크
489
렌더 추가 예정CLIP COMING질감 채움 모션Animated Texture Fill정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 489. 질감 채움 모션 · Animated Texture Fill · none

고정된 모양 마스크 안에서 질감 이미지가 움직이거나 프레임마다 교체되는 효과A texture image moves or swaps frame by frame inside a fixed shape mask.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
글자나 도형에 살아 있는 재질감을 부여하고, 모양은 고정한 채 내용물만 흐르게 한다Gives letters or shapes a living material feel while keeping the shape itself fixed.
언제 쓰나Use whenUSE WHEN
  • 큰 제목 글자 안에 영상이나 질감이 흐르게 할 때
  • 도형 배지나 로고에 재질감을 입힐 때
  • To make video or texture flow inside large title letters
  • To give shaped badges or logos a material feel
과용 주의AvoidAVOID
  • 글자 굵기 700 미만에는 쓰지 않는다
  • 질감 대비를 낮춰 글자 윤곽이 읽히도록 한다
분류TagsTAGS
질감·스타일Texture & Style분위기Mood브랜딩Branding강조Emphasis숏폼Short-form설명 영상Explainer video웹 UIWeb UI난이도 기본Basiccss
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

굵은 제목 글자 안에서 노을 질감 이미지가 2초 동안 오른쪽으로 320px 흐르고, 글자 윤곽은 움직이지 않는다

과용 · 나쁜 사례OVERUSE

얇은 글자에 질감을 채워 읽기 어렵거나, 질감 이동이 너무 빨라 글자 형태가 흐려 보인다

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
이동 시간2000ms1200~3500ms질감 이동
이동 거리320px160~600px마스크 안 background-position
교체 간격3프레임2~4프레임질감 프레임 교체 방식
배경 크기150%130~200%마스크보다 크게
텍스트 굵기800700~900가독성
GSAP
/* .fill{font-weight:800;font-size:220px;background:url(tex.jpg);background-size:150%;-webkit-background-clip:text;color:transparent} */
tl.fromTo('.fill',{backgroundPositionX:'0px'},{backgroundPositionX:'-320px',duration:2,ease:'none'},t);
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<제목> 글자 안에서 질감이 흐르게 해줘. font-weight 800, 220px, background-clip text에 노을 질감 이미지를 background-size 150%로 깔고, 2초 동안 background-position-x를 0에서 -320px로 linear 이동. 글자 윤곽은 고정, 텍스트는 그대로 읽히게 질감 대비를 낮춰. paused 타임라인으로 구동해.

Make a texture flow inside the letters of <title>. Use font-weight 800 at 220px with background-clip text and a sunset texture image at background-size 150%, and move background-position-x from 0 to -320px over 2s, linear. Keep the outline fixed and lower texture contrast so the text stays readable. Drive it from a paused timeline.

Codex

<파일>의 <제목>에 texture-fill-motion을 적용해. 굵기 800, 220px, 배경 150%, 이동 320px, 2000ms linear. 0초, 1초, 2초를 캡처해 질감만 이동하고 글자 윤곽은 고정인지, background-clip이 렌더에 적용되는지, 글자가 읽히는지 확인해.

Apply texture-fill-motion to <title> in <file>: weight 800, 220px, background 150%, shift 320px, 2000ms linear. Capture at 0s, 1s, and 2s to verify only the texture moves while letter outlines stay fixed, background-clip text renders, and the text is readable.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
background-clip text는 캡처 렌더러에서 지원되는지 스냅샷으로 먼저 확인한다. 위치 보간은 paused 타임라인의 선형 tween 하나면 충분하다
ReelForgeBRIEF TO VIDEO
브리프에 textureSrc, shiftPx, durationMs, fontWeight를 싣는다. 질감이 영상이면 프레임 시크로 교체한다
Scrolline DeckSCROLL SCRUB
진행률을 background-position에 선형 매핑한다. ease는 none이 스크럽에서 가장 예측 가능하다
06

잘 맞는 조합Pairs well with

마스크 리빌 · Mask Reveal
Nº 091마스크 리빌Mask RevealMask Reveal
렌더 추가 예정CLIP COMING
액체 금속Liquid Metal
453
Nº 453액체 금속Liquid MetalLiquid Metal
렌더 추가 예정CLIP COMING
조명 애니메이션Animated Lighting
555
Nº 555조명 애니메이션Animated LightingAnimated Lighting
키네틱 비트 · Kinetic Beats
Nº 090키네틱 비트Kinetic BeatsKinetic Beats
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo