효과Effects / 반복·앰비언트Loop & Ambient / Nº 618

반복 패턴 흐름Tiled Pattern Drift

Tiled Pattern Drift

반복 패턴 흐름

다른 이름Also known as · 반복 무늬 이동

618

렌더 추가 예정CLIP COMING반복 패턴 흐름Tiled Pattern Drift정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 618. 반복 패턴 흐름 · Tiled Pattern Drift · none

도형 격자와 선 무늬가 일정한 방향으로 흘러 경계에서 다시 이어진다.A tiled pattern drifts continuously and reconnects at its boundary.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

기하학적 배경에 연속 흐름을 준다.Adds directional flow to a geometric background.

언제 쓰나Use whenUSE WHEN

기하학적 배경을 움직일 때
일정한 방향성을 낮은 대비로 나타낼 때

Animate a geometric background.
Suggest steady direction with low visual contrast.

과용 주의AvoidAVOID

본문과 겹치는 영역의 대비를 낮춘다.
동작 감소 설정에서는 정적인 대표 상태를 보여 준다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 분위기Mood 브랜딩Branding 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

40px 타일 배경이 6초 동안 120px 이동해 같은 무늬로 이어진다.

과용 · 나쁜 사례OVERUSE

타일 크기와 이동 거리가 맞지 않아 반복 경계에서 튄다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	6s	3~10s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
셀 크기	40px	24~80px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
속도	20px/s	8~30px/s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
주기 이동	120px	40~240px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const tl = gsap.timeline({ paused: true });
tl.fromTo('.pattern', { backgroundPosition: '0px 0px' },
  { backgroundPosition: '120px 0px', duration: 6, ease: 'none' });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 반복 패턴 흐름을 구현해. 주기 6s, 셀 크기 40px, 속도 20px/s, 주기 이동 120px, 이징 none을 적용해. CSS 반복 배경 위치를 한 타일 길이만큼 움직이거나 canvas 도형 좌표를 모듈러 이동한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Tiled Pattern Drift on <target>. Use period 6s; cell size 40px; speed 20px/s; cycle displacement 120px; use none easing. Drive the effect with a paused GSAP timeline and absolute time, and reproduce the same state on every seek without Math.random. Keep foreground text readable.

Codex

<파일>의 반복 패턴 흐름 장면 레이어에 적용해. 주기 6s, 셀 크기 40px, 속도 20px/s, 주기 이동 120px, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Tiled Pattern Drift to the scene layer in <file>. Use period 6s; cell size 40px; speed 20px/s; cycle displacement 120px and none easing. Capture at 0, 0.4, and 1.2 seconds to check the initial state, motion progression, and foreground readability; seek to each time again to verify identical output.