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

그라디언트 드리프트Gradient Drift

Gradient Drift

그라디언트 드리프트

다른 이름Also known as · 그라디언트 이동

604

렌더 추가 예정CLIP COMING그라디언트 드리프트Gradient Drift정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 604. 그라디언트 드리프트 · Gradient Drift · ease-in-out

큰 그라디언트의 위치가 천천히 움직이며 색 영역이 흐른다.Large gradient regions drift slowly across the surface.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

부드러운 분위기와 지속 활동감을 만든다.Creates a soft atmosphere and a sense of ongoing activity.

언제 쓰나Use whenUSE WHEN

제품 소개 제목 뒤에서 지속 활동을 표시할 때
짧은 반복으로 부드러운 분위기와 지속 활동감을 만든다 때

Create a calm background behind a product introduction.
Use a short repeating motion to communicate creates a soft atmosphere and a sense of ongoing activity.

과용 주의AvoidAVOID

본문 전체의 색을 빠르게 바꿔 글자가 배경에 묻힌다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제품 소개 제목 뒤에서 청록과 보라 색 영역이 8초 동안 왕복한다

과용 · 나쁜 사례OVERUSE

본문 전체의 색을 빠르게 바꿔 글자가 배경에 묻힌다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	8000ms	6000~12000ms	한 번의 반복에 걸리는 시간이다
배경 크기	300%	200~400%	넓은 색 영역을 확보한다
이동 폭	100%	40~100%	배경 위치를 왕복한다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { background:linear-gradient(120deg,#334155,#0d9488,#818cf8); background-size:300% 300%; animation:drift 8s ease-in-out infinite; }
@keyframes drift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 그라디언트 드리프트를 적용해. 주기 8000ms, 배경 크기 300%, 이동 폭 100%, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Gradient Drift to <target>. Use a 8-second cycle, 300% background size and a 100% position sweep, and ease-in-out easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 그라디언트 드리프트를 적용해. 주기 8000ms, 배경 크기 300%, 이동 폭 100%, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 4초, 8초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Gradient Drift in the waiting indicator or background region of <file>. Use a 8-second cycle, 300% background size and a 100% position sweep, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 4, and 8 seconds to verify the intermediate change and the return to the starting frame.