막대 성장Bar Grow

Bar Grow

막대 성장

다른 이름Also known as · 막대 확장 · Bar reveal · Scroll Progress Indicator · 스크롤 진행 표시 · Bar grow · stat-bars-and-fills · directional-fill · Progress fill

241

도판Fig. 241. 막대 성장 · Bar Grow · power2.out

재생 속도Speed

막대가 기준점에서 값에 비례하는 길이까지 자라는 표현An animation in which bars grow from a baseline to lengths proportional to their values.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

후보별 확률의 차이와 순위Shows differences in probability and ranking among candidates.

언제 쓰나Use whenUSE WHEN

후보별 확률의 차이와 순위를 보여줄 때
다음 단어 후보 확률을 같은 척도에서 길이로 비교한다와 같은 장면을 만들 때

When showing differences in candidate probabilities and ranking
When comparing next-word candidate probabilities by length on a shared scale

과용 주의AvoidAVOID

최종 상태를 0.5초 이상 유지한다
동일 화면에서 불필요한 주홍 강조를 추가하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

다음 단어 후보 확률을 같은 척도에서 길이로 비교한다

과용 · 나쁜 사례OVERUSE

각 막대를 같은 길이로 키워 확률 차이를 숨긴다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
확률	62·21·9·5·3%	합계 100%	길이는 동일 척도로 비교
지속	1.05s	0.7~1.4s	막대 성장 시간
스태거	0.08s	0.04~0.12s	위에서 아래로 출발
척도	10px/%	6~12px/%	62% 막대 길이 620px

GSAP

tl.fromTo('.bar', {scaleX:0}, {scaleX:1,duration:1.05,stagger:.08,ease:'power2.out'},
  .3);
tl.to('.pct', {opacity:1,duration:.25,stagger:.08}, 1.4);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 막대 성장 효과를 적용해. 다음 단어 후보 확률을 같은 척도에서 길이로 비교한다. 확률 62·21·9·5·3%; 지속 1.05s; 스태거 0.08s; 척도 10px/%로 만들고 이징은 power2.out를 써. GSAP 타임라인 하나로 제어하고 2.5초부터 3초까지 완성 상태를 유지해.

Apply Bar Grow to <target>. Compare next-word candidate probabilities by bar length on a shared scale. Use these settings: probabilities 62·21·9·5·3%; duration 1.05s; stagger 0.08s; scale 10px/%; ease power2.out. Control everything with a single GSAP timeline and hold the completed state from 2.5 to 3 seconds.

Codex

<파일>의 데이터 장면에 막대 성장 효과를 구현해. 확률 62·21·9·5·3%; 지속 1.05s; 스태거 0.08s; 척도 10px/%를 적용하고 이징은 power2.out로 지정해. 0초, 0.75초, 1.75초, 2.9초를 캡처해서 시작 상태와 진행 변화, 최종 상태의 잘림과 겹침을 확인해. Math.random과 타이머 없이 타임라인으로 재생하고 마지막 0.5초 이상 정지해.

Implement Bar Grow in the data scene in <file>. Use these settings: probabilities 62·21·9·5·3%; duration 1.05s; stagger 0.08s; scale 10px/%; ease power2.out. Capture at 0, 0.75, 1.75, and 2.9 seconds to check the initial state, progression, and any clipping or overlap in the final state. Play using a timeline without Math.random or timers, and hold still for at least the final 0.5 seconds.