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

컬러 사이클Color Cycle

Color Cycle

컬러 사이클

다른 이름Also known as · Color Cycling · 색상 순환 · Animated Color Text · 색상 흐름 글자

598

렌더 추가 예정CLIP COMING컬러 사이클Color Cycle정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 598. 컬러 사이클 · Color Cycle · ease-in-out

배경이나 요소의 색이 여러 색상 사이를 천천히 바꾼다.A surface cycles slowly through a small palette.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

다양함과 계속되는 상태를 표현한다.Suggests variety and continuing activity.

언제 쓰나Use whenUSE WHEN

대기 카드의 배경이 비슷한 명도의 네 색을 6초에 걸쳐 순환한다에서 지속 활동을 표시할 때
짧은 반복으로 다양함과 계속되는 상태를 표현한다 때

Add a gentle color loop to a waiting card.
Use a short repeating motion to communicate suggests variety and continuing activity.

과용 주의AvoidAVOID

성공과 오류 상태의 색을 같은 순환에 넣어 상태 의미가 바뀐다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

대기 카드의 배경이 비슷한 명도의 네 색을 6초에 걸쳐 순환한다

과용 · 나쁜 사례OVERUSE

성공과 오류 상태의 색을 같은 순환에 넣어 상태 의미가 바뀐다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	6000ms	4500~9000ms	한 번의 반복에 걸리는 시간이다
색상 수	4개	2~4개	서로 비슷한 명도의 색을 고른다
채도	45%	20~60%	색 변화가 본문보다 강하지 않게 한다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { animation:colors 6s ease-in-out infinite; }
@keyframes colors {
  0%,100% { background-color:#334155; }
  25% { background-color:#315b63; }
  50% { background-color:#514b70; }
  75% { background-color:#65515b; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 컬러 사이클를 적용해. 주기 6000ms, 색상 수 4개, 채도 45%, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Color Cycle to <target>. Use a 6-second cycle, four colors at similar lightness, 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

<파일>의 대기 표시 또는 배경 영역에 컬러 사이클를 적용해. 주기 6000ms, 색상 수 4개, 채도 45%, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 3초, 6초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Color Cycle in the waiting indicator or background region of <file>. Use a 6-second cycle, four colors at similar lightness, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 3, and 6 seconds to verify the intermediate change and the return to the starting frame.