AWESOME AI MOTION
효과Effects / 원리 도해Explainer / Nº 380

노드 연결망 구축Node-link Build

Node-link Build
노드 연결망 구축
다른 이름Also known as · Avatar network · 아바타 연결망 · Flowchart build · 흐름도 구축 · Avatar Hub · 아바타 허브 연결 · avatar-cloud-network · Relation Traverse · 관계 도해 탐색 · Graph port linking · 그래프 포트 연결
380
도판Fig. 380. 노드 연결망 구축 · Node-link Build · power2.out
재생 속도Speed

노드가 순서대로 나타나고 연결선이 각 노드 사이에 그려진다. 선택 경로의 노드와 선을 차례로 강조한다.Reveal eight service nodes before their connecting edges.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
구성요소 사이의 관계와 처리 순서를 보여준다.Shows relationships and processing order.
언제 쓰나Use whenUSE WHEN
  • 서비스 8개의 의존 관계를 입력 노드부터 공개한다.
  • 구성요소 사이의 관계와 처리 순서를 보여준다. 기준값과 대상을 함께 표시할 때.
  • Explain dependencies between services.
  • Keep the encoded values, labels, and visual state synchronized.
과용 주의AvoidAVOID
  • 복잡한 교차선은 분리한다.
분류TagsTAGS
원리 도해Explainer설명Explain순서·흐름Sequence설명 영상Explainer video제품 시연Product demo스크롤덱Scroll deck난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

서비스 8개의 의존 관계를 입력 노드부터 공개한다.

과용 · 나쁜 사례OVERUSE

연결선을 먼저 모두 켜 관계 순서를 읽기 어렵게 만든다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
노드 수83~12노드 간 120px 이상 확보
등장 간격200ms100~300ms관계 순서로 공개
연결선 지속400ms250~700ms노드 등장 뒤 시작
활성 유지700ms400~1200ms선택 경로만 강조
GSAP
const tl = gsap.timeline({paused:true});
tl.fromTo('.node',{opacity:0},{opacity:1,duration:0.3,stagger:0.2},0);
document.querySelectorAll('.edge').forEach((e,i)=>{
  const L=e.getTotalLength();
  tl.fromTo(e,{strokeDasharray:L,strokeDashoffset:L},{strokeDashoffset:0,duration:0.4},0.3+i*0.2);
});
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 노드 연결망 구축을 적용해. SVG 노드와 연결선을 순서대로 공개하고 동일 시간표에서 선택 경로의 색을 갱신한다. 노드 수 8; 등장 간격 200ms; 연결선 지속 400ms; 활성 유지 700ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Implement Node-link Build on <target> in <file>. Reveal 8 nodes at 200ms intervals, draw each connector over 400ms, and hold an active node for 700ms. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.

Codex

<파일>의 설명 장면에서 <대상>에 노드 연결망 구축을 적용해. SVG 노드와 연결선을 순서대로 공개하고 동일 시간표에서 선택 경로의 색을 갱신한다. 노드 수 8; 등장 간격 200ms; 연결선 지속 400ms; 활성 유지 700ms을 적용한다. 0초, 1.25초, 2.5초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Node-link Build on <target> in <file>. Reveal 8 nodes at 200ms intervals, draw each connector over 400ms, and hold an active node for 700ms. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 1.25s, and 2.5s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 노드 연결망 구축 상태를 넣고 seek 시 2.5초의 좌표와 색을 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 노드 수 8; 등장 간격 200ms; 연결선 지속 400ms; 활성 유지 700ms을 싣고 서비스 8개의 의존 관계를 입력 노드부터 공개한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 2.5초 구간에 매핑한다. scrub에서는 스프링 대신 power2.out을 쓰고 역방향에서도 라벨과 도형을 함께 갱신한다.
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
경로 신호 빔Path Beam
387
Nº 387경로 신호 빔Path BeamPath Beam
상태 전이 순회 · State Transition Walk
Nº 398상태 전이 순회State Transition WalkState Transition Walk
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo