AWESOME AI MOTION
효과Effects / 입자·생성Generative / Nº 514

가지 성장Branch Growth

Branch Growth
가지 성장
다른 이름Also known as · Recursive Growth · 재귀 가지 성장 · Recursive Branch Growth · Space Colonization Branch Growth · 공간 점유 가지 성장 · Space colonization · Leaf venation growth
514
렌더 추가 예정CLIP COMING가지 성장Branch Growth정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 514. 가지 성장 · Branch Growth · power2.out

한 줄기에서 가지가 갈라지고 작은 가지가 다시 갈라지며 구조가 자라나는 효과A trunk splits into branches, smaller branches split again, and the structure grows.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
성장, 확장, 계층 구조를 직관적으로 보여준다. 나무나 네트워크가 뻗어 나가는 은유를 만든다Shows growth, expansion, and hierarchy intuitively, a metaphor for a tree or network reaching outward.
언제 쓰나Use whenUSE WHEN
  • 조직, 지식, 기능이 갈라지는 계층 구조를 설명할 때
  • 성장이나 확장의 은유로 배경 도해를 그릴 때
  • To explain hierarchies where organizations, knowledge, or features branch out
  • To draw a background diagram as a metaphor for growth or expansion
과용 주의AvoidAVOID
  • 깊이 7 초과 금지
  • 깊이 순서대로 시간차를 두어 성장을 보이게 한다
분류TagsTAGS
입자·생성Generative설명Explain순서·흐름Sequence분위기Mood설명 영상Explainer video발표Presentation스크롤덱Scroll deck난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

줄기에서 깊이 5까지 가지가 4초 동안 길이 비 0.618, 분기 각 28도로 순서대로 자라난다

과용 · 나쁜 사례OVERUSE

깊이를 9 이상으로 잡아 가지가 뭉치거나, 모든 가지가 동시에 나타나 성장의 순서가 안 보인다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
총 지속4000ms2500~6000ms깊이별 순차
깊이54~7분기 단계
길이 비0.6180.55~0.75자식/부모
분기 각28도20~40도좌우 대칭
선 굵기8px에서 1px6~10px에서 1px깊이별 감소
GSAP
// 깊이별 path를 사전 생성(시드 고정), stroke-dashoffset로 순차 draw
const D=5;
for(let d=0;d<D;d++){ const g=gsap.utils.toArray('.d'+d+' path');
 tl.fromTo(g,{strokeDashoffset:(i,e)=>e.getTotalLength()},{strokeDashoffset:0,duration:.8,ease:'power2.out'},t+d*.65); }
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<도해>로 가지 성장을 만들어줘. 재귀로 깊이 5, 길이 비 0.618, 분기 각 ±28도의 SVG path를 시드 고정으로 미리 생성하고 깊이별 그룹으로 나눠, stroke-dashoffset으로 깊이 d번째 그룹을 0.8초 power2.out으로 draw하되 깊이마다 0.65초씩 늦게 시작해. 선 굵기는 깊이마다 8px에서 1px로 줄여. paused 타임라인으로 구동해.

Build a branch growth diagram in <diagram>. Pre-generate SVG paths recursively with a fixed seed at depth 5, length ratio 0.618, and branch angle +/-28 degrees, grouped by depth. Draw each group with stroke-dashoffset over 0.8s with power2.out, each depth starting 0.65s later. Thin the stroke from 8px to 1px by depth. Drive from a paused timeline.

Codex

<파일>에 branch-growth를 구현해. 깊이 5, 길이 비 0.618, 분기 각 28도, 총 4000ms, 깊이별 시작차 650ms, seed 고정. 0.5초, 1.5초, 2.5초, 4.2초를 캡처해 깊이 순서로 자라는지, 최종 프레임에서 모든 가지가 그려졌는지, 가지가 겹쳐 뭉치지 않는지 확인해.

Implement branch-growth in <file>: depth 5, length ratio 0.618, angle 28 degrees, total 4000ms, depth stagger 650ms, fixed seed. Capture at 0.5s, 1.5s, 2.5s, and 4.2s to verify growth proceeds by depth, all branches are drawn in the final frame, and branches do not clump together.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
가지 path를 깊이별 그룹으로 미리 만들고 dashoffset만 paused 타임라인에서 보간한다. 스크립트가 실행 중 생성하는 재귀는 seed 고정
ReelForgeBRIEF TO VIDEO
브리프에 depth, lengthRatio, angleDeg, totalMs, seed를 싣고 시작 위치와 줄기 굵기를 명시한다
Scrolline DeckSCROLL SCRUB
진행률을 깊이 0~D에 매핑해 스크롤로 성장 단계를 앞뒤로 볼 수 있게 한다. dashoffset은 선형 ease-out
06

잘 맞는 조합Pairs well with

선 그리기 · Line Draw
Nº 244선 그리기Line DrawLine Draw
렌더 추가 예정CLIP COMING
자연 성장 루프Nature Growth Loop
611
Nº 611자연 성장 루프Nature Growth LoopNature Growth Loop
렌더 추가 예정CLIP COMING
트리 펼침과 접힘Tree Expand and Collapse
300
Nº 300트리 펼침과 접힘Tree Expand and CollapseTree Expand and Collapse
렌더 추가 예정CLIP COMING
확산 제한 성장Diffusion Limited Aggregation
518
Nº 518확산 제한 성장Diffusion Limited AggregationDiffusion Limited Aggregation
07

출처Sources

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