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

앰비언트 입자 유영Ambient Particle Drift

Ambient Particle Drift

앰비언트 입자 유영

593

렌더 추가 예정CLIP COMING앰비언트 입자 유영Ambient Particle Drift정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 593. 앰비언트 입자 유영 · Ambient Particle Drift · none

작고 옅은 입자가 서로 다른 속도로 떠다닌다.Small, faint particles drift at different speeds.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

공간에 생기를 주면서 본문보다 낮은 시각적 무게를 유지한다.Adds life and depth without competing with text.

언제 쓰나Use whenUSE WHEN

빈 공간에 잔잔한 생기를 넣을 때
배경의 깊이를 암시할 때

Bring quiet life to empty space.
Suggest depth in a background.

과용 주의AvoidAVOID

본문과 겹치는 영역의 대비를 낮춘다.
동작 감소 설정에서는 정적인 대표 상태를 보여 준다.

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

설명 영상 여백에 작은 입자 70개를 옅게 유영시킨다.

과용 · 나쁜 사례OVERUSE

큰 입자를 본문 위에 겹쳐 문장 대비를 낮춘다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	8s	6~16s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
입자 수	70	30~100	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
크기	1~4px	1~6px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
속도	5~18px/s	3~20px/s	궤도 최대 속도. 8초 주기의 닫힌 유영 궤도로 경계를 잇는다.
불투명도	0.25	0.1~0.3	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const state = { t: 0 };
const tl = gsap.timeline({ paused: true });
const particles = gsap.utils.toArray('.particle');
tl.to(state, { t: 8, duration: 8, ease: 'none', onUpdate: () => {
  particles.forEach((el, i) => {
    const a = 2 * Math.PI * (state.t / 8 + (i * 37 % 70) / 70);
    gsap.set(el, { x: 8 * Math.cos(a), y: (5 + i * 17 % 14) * 8 / (2 * Math.PI) * Math.sin(a), opacity: 0.25 });
  });
} });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 앰비언트 입자 유영을 구현해. 주기 8s, 입자 수 70, 크기 1~4px, 속도 5~18px/s, 불투명도 0.25, 이징 none을 적용해. canvas에서 시드별 속도와 위상으로 입자 위치를 계산하고 경계를 순환한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Ambient Particle Drift on <target>. Use period 8s; particle count 70; size 1~4px; speed 5~18px/s; opacity 0.25; use none easing. Drive the effect with a paused GSAP timeline and absolute time, and reproduce the same state on every seek without Math.random. Keep foreground text readable.

Codex

<파일>의 앰비언트 입자 유영 장면 레이어에 적용해. 주기 8s, 입자 수 70, 크기 1~4px, 속도 5~18px/s, 불투명도 0.25, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Ambient Particle Drift to the scene layer in <file>. Use period 8s; particle count 70; size 1~4px; speed 5~18px/s; opacity 0.25 and none easing. Capture at 0, 0.4, and 1.2 seconds to check the initial state, motion progression, and foreground readability; seek to each time again to verify identical output.