프레임 테두리 전환Frame Border Transition

Frame Border Transition

프레임 테두리 전환

다른 이름Also known as · Frame border transition

160

렌더 추가 예정CLIP COMING프레임 테두리 전환Frame Border Transition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 160. 프레임 테두리 전환 · Frame Border Transition · power3.inOut

두꺼운 프레임이나 테두리가 이동하거나 커져 컷을 가리고 새 화면을 둘러싼다A thick frame or border moves or grows to hide the cut and enclose the new screen.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

두꺼운 테두리가 움직이거나 커져 컷을 가리고 새 화면을 감싼다. 브랜드 프레임 안에서 장면이 바뀐다Makes viewers feel scenes change inside a branded frame.

언제 쓰나Use whenUSE WHEN

브랜드 색 프레임이 화면을 채우다 열리며 다음 장면이 들어올 때
시리즈 영상에서 같은 프레임 모티프로 코너 전환을 통일할 때

When a brand-colored frame fills the screen and opens onto the next scene
To unify corner transitions in a series with one frame motif

과용 주의AvoidAVOID

컷 시점에 테두리가 화면을 완전히 덮게 한다
브랜드 색 하나만 쓴다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

80px 두께의 브랜드 색 테두리가 650ms 동안 안쪽으로 조여들어 중앙 컷을 가린 뒤, 다시 바깥으로 벌어지며 새 장면을 감싼다

과용 · 나쁜 사례OVERUSE

테두리가 컷 시점에 화면을 덮지 못해 컷이 그대로 보이거나, 두께가 20px 미만이라 프레임으로 읽히지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	650ms	500~850ms	easeInOutCubic
두께	80px	60~120px	최종 프레임 두께
컷 시점	325ms		테두리 덮음
색	브랜드 단색		대비 확보
모서리 반경	0 또는 24px		브랜드 문법

GSAP

tl.fromTo('.frame-fill', { scale: 1.6, opacity: 1 }, { scale: 1, duration: 0.325, ease: 'power3.in' }, 0);
tl.set('.prev', { autoAlpha: 0 }, 0.325).set('.next', { autoAlpha: 1 }, 0.325);
tl.to('.frame-fill', { scale: 1.6, duration: 0.325, ease: 'power3.out' }, 0.325);
tl.to('.frame-ring', { borderWidth: 80, duration: 0.325, ease: 'power3.out' }, 0.325);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면 전환에 프레임 테두리 전환을 넣어줘. 브랜드 색 사각 테두리(.frame-fill)가 scale 1.6에서 1로 0.325초 power3.in으로 조여들어 화면을 덮고, 0.325초에 장면을 교체한 뒤 다시 scale 1.6으로 0.325초 power3.out으로 벌어져 새 화면을 감싸게 해. 최종 테두리 두께는 80px. paused 타임라인으로 seek 가능하게 해.

Add a Frame Border Transition to <target>. A brand-colored rectangular border (.frame-fill) closes in from scale 1.6 to 1 over 0.325s with power3.in, covering the frame. Swap scenes at 0.325s, then expand it back to scale 1.6 over 0.325s with power3.out, leaving an 80px border around the new scene. Paused, seekable timeline.

Codex

<파일>에 프레임 테두리 전환을 구현해. .frame-fill scale 1.6에서 1 (0.325초 power3.in), 0.325초에 장면 교체, scale 1에서 1.6 (0.325초 power3.out), .frame-ring borderWidth 80. 0.16초, 0.325초, 0.49초, 0.65초 시점을 캡처해 0.325초에 화면이 완전히 덮이는지, 0.65초에 80px 프레임이 남는지 확인해.

Implement Frame Border Transition in <file>. .frame-fill scale 1.6 to 1 (0.325s power3.in), swap scenes at 0.325s, then scale 1 to 1.6 (0.325s power3.out); .frame-ring borderWidth 80. Capture at 0.16s, 0.325s, 0.49s, and 0.65s to confirm full coverage at 0.325s and an 80px frame left at 0.65s.