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

자연 성장 루프Nature Growth Loop

Nature Growth Loop

자연 성장 루프

다른 이름Also known as · Nature Growth Loader · 자연 성장 로더

611

렌더 추가 예정CLIP COMING자연 성장 루프Nature Growth Loop정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 611. 자연 성장 루프 · Nature Growth Loop · ease-in-out

식물이나 해와 같은 작은 자연 도형이 자라거나 떠오르며 반복한다.Natural shapes grow in stages and return to their starting size.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

편안하고 유기적인 대기를 만든다.Creates a calm and organic waiting atmosphere.

언제 쓰나Use whenUSE WHEN

환경 서비스의 대기 표시에서 지속 활동을 표시할 때
짧은 반복으로 편안하고 유기적인 대기를 만든다 때

Use a small growing plant in an environmental service waiting state.
Use a short repeating motion to communicate creates a calm and organic waiting atmosphere.

과용 주의AvoidAVOID

반복 성장 애니메이션을 실제 환경 성과 수치 옆에 증거처럼 놓는다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

환경 서비스의 대기 표시에서 줄기와 잎이 자란 뒤 천천히 작아진다

과용 · 나쁜 사례OVERUSE

반복 성장 애니메이션을 실제 환경 성과 수치 옆에 증거처럼 놓는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2400ms	1800~3600ms	한 번의 반복에 걸리는 시간이다
성장 비율	0에서 1	0~1	줄기와 잎의 scale을 조절한다
부위 시간차	160ms	100~240ms	줄기 다음에 잎이 자란다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx .stem,.fx .leaf { transform-box:fill-box; transform-origin:50% 100%; animation:grow 2.4s ease-in-out infinite; }
.fx .leaf { animation-delay:160ms; }
@keyframes grow {
  0%,100% { transform:scale(0); opacity:0; }
  40%,80% { transform:scale(1); opacity:1; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 자연 성장 루프를 적용해. 주기 2400ms, 성장 비율 0에서 1, 부위 시간차 160ms, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Nature Growth Loop to <target>. Use a 2.4-second cycle, scale from 0 to 1 with the leaves following the stem by 160ms, 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

<파일>의 대기 표시 또는 배경 영역에 자연 성장 루프를 적용해. 주기 2400ms, 성장 비율 0에서 1, 부위 시간차 160ms, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1.2초, 2.4초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Nature Growth Loop in the waiting indicator or background region of <file>. Use a 2.4-second cycle, scale from 0 to 1 with the leaves following the stem by 160ms, and ease-in-out 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.