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

에너지 오브Energy Orb

Energy Orb

에너지 오브

다른 이름Also known as · Breathing Energy Orb · 에너지 구체

599

렌더 추가 예정CLIP COMING에너지 오브Energy Orb정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 599. 에너지 오브 · Energy Orb · none

빛나는 구체의 가장자리가 부드럽게 변형되고 내부 빛이 순환한다.A luminous orb gently deforms while light circulates inside.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

집중된 에너지와 대기 상태를 보여 준다.Suggests focused energy and an idle listening state.

언제 쓰나Use whenUSE WHEN

음성 입력 대기 상태를 보여 줄 때
집중할 중심 오브젝트가 필요할 때

Show an idle voice-input state.
Give a composition a single visual focal point.

과용 주의AvoidAVOID

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

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

음성 입력 대기 화면 중앙에 반경 120px 오브를 둔다.

과용 · 나쁜 사례OVERUSE

응답 완료 뒤에도 오브를 크게 진동시켜 처리 상태를 혼동시킨다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	5s	3~8s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
반경	120px	80~180px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
변형 폭	10%	4~12%	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
흐름 속도	0.25	0.1~0.4	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const state = { phase: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(state, { phase: Math.PI * 2, duration: 5, ease: 'none',
  onUpdate: () => { uniforms.uPhase.value = state.phase; renderer.render(scene, camera); } });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 에너지 오브을 구현해. 주기 5s, 반경 120px, 변형 폭 10%, 흐름 속도 0.25, 이징 none을 적용해. WebGL 원형 거리장에 시간 노이즈와 색 흐름을 합성한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Energy Orb on <target>. Use period 5s; radius 120px; deformation 10%; flow speed 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

<파일>의 에너지 오브 장면 레이어에 적용해. 주기 5s, 반경 120px, 변형 폭 10%, 흐름 속도 0.25, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Energy Orb to the scene layer in <file>. Use period 5s; radius 120px; deformation 10%; flow speed 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.