효과Effects / 데이터Data / Nº 273

구간 막대 확장Interval Expansion

Interval Expansion

구간 막대 확장

다른 이름Also known as · Floating interval expansion

273

렌더 추가 예정CLIP COMING구간 막대 확장Interval Expansion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 273. 구간 막대 확장 · Interval Expansion · power2.inOut

점이나 짧은 막대가 양 끝으로 벌어져 최솟값과 최댓값의 구간이 된다.A point expands in both directions to reveal the endpoints of an interval.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

단일 추정값과 값의 범위를 구분한다.Distinguishes a single estimate from its range of possible values.

언제 쓰나Use whenUSE WHEN

추정값 주변의 신뢰구간을 공개할 때
중앙 표식을 유지하며 최솟값과 최댓값을 보여줄 때

Reveal a confidence interval around an estimate.
Show minimum and maximum values while preserving the central marker.

과용 주의AvoidAVOID

범위와 신뢰구간의 의미를 라벨로 구분한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

중앙 700px에서 시작해 왼쪽 520px와 오른쪽 980px로 0.65초 동안 벌어진다.

과용 · 나쁜 사례OVERUSE

중앙값을 구간 중점으로 강제로 옮겨 원래 추정값을 바꾼다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
확장 시간	650ms	450~950ms	양 끝을 동시에 움직인다.
왼쪽 거리	180px	60~300px	자료 척도로 산출한다.
오른쪽 거리	280px	60~400px	대칭을 강제하지 않는다.
끝 표식 높이	16px	12~24px	양 끝을 읽을 수 있게 한다.
이징	power2.inOut	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
tl.fromTo('.interval',{attr:{x1:700,x2:700}},{attr:{x1:520,x2:980},duration:0.65,ease:'power2.inOut'},0);
tl.fromTo('.cap-left',{attr:{x1:700,x2:700}},{attr:{x1:520,x2:520},duration:0.65,ease:'power2.inOut'},0);
tl.fromTo('.cap-right',{attr:{x1:700,x2:700}},{attr:{x1:980,x2:980},duration:0.65,ease:'power2.inOut'},0);
gsap.set('.estimate',{attr:{cx:700}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 구간 막대 확장를 구현해. 점이나 짧은 막대가 양 끝으로 벌어져 최솟값과 최댓값의 구간이 된다. 확장 시간 650ms, 왼쪽 거리 180px, 오른쪽 거리 280px, 끝 표식 높이 16px, 이징 power2.inOut를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 범위와 신뢰구간의 의미를 라벨로 구분한다.

Implement Interval Expansion for <target> in <file>. A point expands in both directions to reveal the endpoints of an interval. Use expansion duration: 650ms; leftward distance: 180px; rightward distance: 280px; end-cap height: 16px; easing: power2.inOut in a single paused GSAP core timeline that supports seeking. Label whether the range is a minimum-to-maximum range or a confidence interval; preserve the estimate position.

Codex

<파일>의 <대상> 장면에 구간 막대 확장를 적용해. 확장 시간 650ms, 왼쪽 거리 180px, 오른쪽 거리 280px, 끝 표식 높이 16px, 이징 power2.inOut를 사용하고 다음 동작을 구현해: SVG 선의 양 끝 좌표와 중앙 표식을 독립적으로 보간한다. 플러그인과 Math.random 없이 작성하고 0.16초·0.39초·0.65초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 중앙 700px에서 시작해 왼쪽 520px와 오른쪽 980px로 0.65초 동안 벌어진다.

Apply Interval Expansion to the <target> scene in <file> using expansion duration: 650ms; leftward distance: 180px; rightward distance: 280px; end-cap height: 16px; easing: power2.inOut. A point expands in both directions to reveal the endpoints of an interval. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.16, 0.39, 0.65 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Label whether the range is a minimum-to-maximum range or a confidence interval; preserve the estimate position.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인 하나에 구간 막대 확장 상태를 넣고 seek(t)로 0.65초 구간을 재현한다. 현재 시간에서 도형을 계산해 프레임 누적을 피한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 확장 시간 650ms, 왼쪽 거리 180px, 오른쪽 거리 280px, 끝 표식 높이 16px, 이징 power2.inOut를 싣고 입력 자료와 초기 도형 좌표를 고정한다. 중앙 700px에서 시작해 왼쪽 520px와 오른쪽 980px로 0.65초 동안 벌어진다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 0.65초 구간에 매핑해 같은 타임라인을 scrub한다. 시간량은 none, 시각 전환은 power2.out을 쓰고 스프링 대신 끝점을 넘지 않는 ease-out을 쓴다.