챕터 인터스티셜Chapter Interstitial

Chapter Interstitial

챕터 인터스티셜

다른 이름Also known as · Demo chapter interstitial · 시연 챕터 전환 카드

150

도판Fig. 150. 챕터 인터스티셜 · Chapter Interstitial · power2.out

재생 속도Speed

장면 사이에 단계 제목 카드가 나타나 잠시 유지된 뒤 다음 장면으로 넘어간다A step-title card appears between scenes, holds briefly, then hands off to the next scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

장면 사이에 단계 제목 카드가 잠깐 나와 긴 시연이나 설명의 경계를 분명히 한다Makes the boundaries of long demos or explanations clear.

언제 쓰나Use whenUSE WHEN

긴 시연이나 튜토리얼을 단계 1, 단계 2처럼 나눌 때
챕터가 바뀌는 지점에서 지금 어디인지 알릴 때

To split a long demo or tutorial into step 1, step 2, and so on
At chapter changes to show where the viewer is

과용 주의AvoidAVOID

카드 유지는 1.0~1.5초
단계 번호와 제목을 함께 넣는다(예: 02 설정하기)

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목 카드가 250ms 동안 y +24px에서 올라오며 나타나 1200ms 머물고, 250ms 동안 위로 빠지며 다음 장면으로 이어진다

과용 · 나쁜 사례OVERUSE

카드가 2초 이상 머물러 흐름이 끊기거나, 단계 번호가 없어 어디까지 왔는지 알 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
카드 유지	1200ms	1000~1500ms	읽는 시간
등장	250ms	200~350ms	y +24에서 0, opacity
퇴장	250ms	200~350ms	y 0에서 -24
이징	power2.out / power2.in		등장 out, 퇴장 in
번호 크기	제목의 1.6배		왼쪽 정렬

GSAP

tl.fromTo('.chapter', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.25, ease: 'power2.out' }, 0);
tl.to('.chapter', { y: -24, opacity: 0, duration: 0.25, ease: 'power2.in' }, 1.45);
tl.set('.prev', { autoAlpha: 0 }, 0.25).set('.next', { autoAlpha: 1 }, 1.7);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 영상의 단계 경계에 챕터 인터스티셜을 넣어줘. .chapter(번호와 제목)가 y +24px, opacity 0에서 0.25초 power2.out으로 나타나 1.2초 머물고, 1.45초부터 0.25초 동안 y -24px, opacity 0으로 power2.in으로 빠지게 해. 카드가 사라진 뒤 1.7초에 다음 장면을 표시해. 제목은 변수로 받아줘.

Add a Chapter Interstitial between steps in <target>. .chapter (number and title) enters from y +24px, opacity 0 over 0.25s with power2.out, holds 1.2s, then exits from 1.45s over 0.25s to y -24px, opacity 0 with power2.in. Show the next scene at 1.7s. Take the title as a variable.

Codex

<파일>에 챕터 인터스티셜을 구현해. .chapter y 24에서 0, opacity 0에서 1 (0.25초 power2.out), 1.45초부터 0.25초 y -24 opacity 0 (power2.in), 1.7초에 .next 표시. 0.15초, 0.8초, 1.55초, 1.8초 시점을 캡처해 0.8초에 번호와 제목이 잘 읽히는지, 1.8초에 카드가 없는지 확인해.

Implement Chapter Interstitial in <file>. .chapter y 24 to 0 and opacity 0 to 1 (0.25s power2.out); from 1.45s, y 0 to -24 and opacity 1 to 0 (0.25s power2.in); show .next at 1.7s. Capture at 0.15s, 0.8s, 1.55s, and 1.8s to confirm the number and title are legible at 0.8s and the card is gone at 1.8s.