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

회전 패턴 루프Hypnotic Pattern

Hypnotic Pattern

회전 패턴 루프

다른 이름Also known as · Hypnotic Pattern Loader · 최면 무늬 로더

607

렌더 추가 예정CLIP COMING회전 패턴 루프Hypnotic Pattern정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 607. 회전 패턴 루프 · Hypnotic Pattern · linear

동심원이나 반복 줄무늬가 회전 또는 신축하며 시각적 진동을 만든다.Repeated geometric bands rotate to create a rhythmic visual pattern.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

강한 몰입과 추상적 진행감을 준다.Creates abstract momentum and concentrated visual attention.

언제 쓰나Use whenUSE WHEN

추상적인 음악 전환 화면의 96px 패턴이 일정하게 돈다에서 지속 활동을 표시할 때
짧은 반복으로 강한 몰입과 추상적 진행감을 준다 때

Use a small abstract pattern in a music transition.
Use a short repeating motion to communicate creates abstract momentum and concentrated visual attention.

과용 주의AvoidAVOID

고대비 패턴으로 화면 전체를 덮어 본문 읽기를 방해한다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

추상적인 음악 전환 화면의 96px 패턴이 일정하게 돈다

과용 · 나쁜 사례OVERUSE

고대비 패턴으로 화면 전체를 덮어 본문 읽기를 방해한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2400ms	1800~3600ms	한 번의 반복에 걸리는 시간이다
무늬 수	8겹	4~8겹	작은 영역 안에 반복한다
회전각	360deg	180~360deg	한 주기에 회전하는 각도다
이징	linear	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { width:96px; height:96px; border-radius:50%; background:repeating-conic-gradient(#334155 0deg 22.5deg,#64748b 22.5deg 45deg); animation:pattern 2.4s linear infinite; }
@keyframes pattern {
  to { transform:rotate(360deg); }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 회전 패턴 루프를 적용해. 주기 2400ms, 무늬 수 8겹, 회전각 360deg, 이징 linear로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Hypnotic Pattern to <target>. Use a 2.4-second cycle, eight radial bands and a 360 degree rotation inside a 96px circle, and linear 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

<파일>의 대기 표시 또는 배경 영역에 회전 패턴 루프를 적용해. 주기 2400ms, 무늬 수 8겹, 회전각 360deg, 이징 linear를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1.2초, 2.4초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Hypnotic Pattern in the waiting indicator or background region of <file>. Use a 2.4-second cycle, eight radial bands and a 360 degree rotation inside a 96px circle, and linear easing; derive loop phase from absolute time. Capture at 0, 1.2, and 2.4 seconds to verify the intermediate change and the return to the starting frame.