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

격자 펄스Grid Pulse

Grid Pulse

격자 펄스

다른 이름Also known as · Grid Pulse Loader · 격자 맥동 로더

605

렌더 추가 예정CLIP COMING격자 펄스Grid Pulse정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 605. 격자 펄스 · Grid Pulse · ease-in-out

격자의 칸들이 대각선이나 행 순서로 줄어들고 다시 커진다.Grid cells shrink and grow with diagonal phase offsets.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

여러 작업 단위가 계속 처리됨을 보여 준다.Suggests multiple work units being processed continuously.

언제 쓰나Use whenUSE WHEN

일괄 처리 카드에서 지속 활동을 표시할 때
짧은 반복으로 여러 작업 단위가 계속 처리됨을 보여 준다 때

Represent ongoing batch processing with a compact grid.
Use a short repeating motion to communicate suggests multiple work units being processed continuously.

과용 주의AvoidAVOID

완료된 작업 칸까지 사라지게 해 완료 상태가 불분명하다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 순서·흐름Sequence 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

일괄 처리 카드에서 3x3 칸이 대각선 순서로 작아졌다 커진다

과용 · 나쁜 사례OVERUSE

완료된 작업 칸까지 사라지게 해 완료 상태가 불분명하다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1300ms	975~1950ms	한 번의 반복에 걸리는 시간이다
격자	3x3	2x2~4x4	정사각 칸을 일정 간격으로 배치한다
위상차	100ms	60~150ms	행과 열 인덱스 합으로 지연한다
최소 크기	0	0~0.4	scale 기준이다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { display:grid; grid-template-columns:repeat(3,12px); gap:4px; }
.fx i { height:12px; background:currentColor; animation:grid 1.3s ease-in-out infinite; animation-delay:calc((var(--row) + var(--col))*-100ms); }
@keyframes grid {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(0); opacity:0; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 격자 펄스를 적용해. 주기 1300ms, 격자 3x3, 위상차 100ms, 최소 크기 0, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Grid Pulse to <target>. Use a 1.3-second cycle, a 3 by 3 grid, 100ms diagonal offsets, and scale from 0 to 1, 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

<파일>의 대기 표시 또는 배경 영역에 격자 펄스를 적용해. 주기 1300ms, 격자 3x3, 위상차 100ms, 최소 크기 0, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 0.65초, 1.3초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Grid Pulse in the waiting indicator or background region of <file>. Use a 1.3-second cycle, a 3 by 3 grid, 100ms diagonal offsets, and scale from 0 to 1, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 0.65, and 1.3 seconds to verify the intermediate change and the return to the starting frame.