효과Effects / 3D·깊이3D & Depth / Nº 547

회전 지구 연결 호Rotating Globe Connections

Rotating Globe Connections

회전 지구 연결 호

다른 이름Also known as · Rotating Globe and Arcs · 회전 지구와 연결 호

547

렌더 추가 예정CLIP COMING회전 지구 연결 호Rotating Globe Connections정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 547. 회전 지구 연결 호 · Rotating Globe Connections · none

지구가 천천히 회전하고 지역 점 사이에 빛나는 호가 순서대로 나타난다.A globe rotates slowly as connection arcs appear between geographic locations.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

국제적 연결과 분포를 보여 준다.Communicates international reach and geographic connections.

언제 쓰나Use whenUSE WHEN

지역 사무소 사이의 연결을 공개할 때
국제 배송망의 출발지와 도착지를 보여줄 때

Reveal connections between regional offices.
Show a global delivery network with geographic endpoints.

과용 주의AvoidAVOID

호의 높이나 밝기를 실제 거리나 물량으로 혼동하게 하지 않는다.

분류TagsTAGS

3D·깊이3D & Depth 설명Explain 브랜딩Branding 설명 영상Explainer video 스크롤덱Scroll deck 웹 UIWeb UI 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

지구를 12초에 한 바퀴 돌리고 연결 호를 각각 1.5초 동안 공개한다.

과용 · 나쁜 사례OVERUSE

뒤쪽 호도 같은 밝기로 그려 지구 앞뒤 관계가 사라진다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
회전 주기	12000ms	10000~20000ms	한 주기에 360도 회전한다.
호 공개 시간	1500ms	900~2200ms	선의 정점 순서대로 공개한다.
지점 수	30개	8~50개	실제 좌표를 고정 배열로 둔다.
호 간격	500ms	300~900ms	연결을 순서대로 공개한다.
이징	none	none \| power2.out \| power2.inOut	데이터의 시간 진행은 none을 유지한다.

GSAP

// globe is a prepared WebGL group; arcs are prepared line meshes.
const tl=gsap.timeline({paused:true});
tl.fromTo(globe.rotation,{y:0},{y:Math.PI*2,duration:12,ease:'none'},0);
arcs.forEach((arc,i)=>{
  const state={p:0},count=arc.geometry.attributes.position.count;
  tl.fromTo(state,{p:0},{p:1,duration:1.5,ease:'none',onUpdate:()=>arc.geometry.setDrawRange(0,Math.floor(count*state.p))},i*0.5);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 회전 지구 연결 호를 구현해. 지구가 천천히 회전하고 지역 점 사이에 빛나는 호가 순서대로 나타난다. 회전 주기 12000ms, 호 공개 시간 1500ms, 지점 수 30개, 호 간격 500ms, 이징 none를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 호의 높이나 밝기를 실제 거리나 물량으로 혼동하게 하지 않는다.

Implement Rotating Globe Connections for <target> in <file>. A globe rotates slowly as connection arcs appear between geographic locations. Use rotation period: 12000ms; arc reveal duration: 1500ms; location count: 30; arc spacing: 500ms; easing: none in a single paused GSAP core timeline that supports seeking. Do not imply distance or volume through arc height or brightness.

Codex

<파일>의 <대상> 장면에 회전 지구 연결 호를 적용해. 회전 주기 12000ms, 호 공개 시간 1500ms, 지점 수 30개, 호 간격 500ms, 이징 none를 사용하고 다음 동작을 구현해: WebGL 구면 점과 곡선을 그리거나 canvas 구면 좌표를 투영한다 플러그인과 Math.random 없이 작성하고 3.0초·7.2초·12초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 지구를 12초에 한 바퀴 돌리고 연결 호를 각각 1.5초 동안 공개한다.

Apply Rotating Globe Connections to the <target> scene in <file> using rotation period: 12000ms; arc reveal duration: 1500ms; location count: 30; arc spacing: 500ms; easing: none. A globe rotates slowly as connection arcs appear between geographic locations. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 3.0, 7.2, 12 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Do not imply distance or volume through arc height or brightness.