화면보다 큰 따뜻한 빛 덩어리가 프레임을 가로질러 번졌다가 사라지는 필름 질감 효과Large warm light blobs drift across the frame and fade out, like a film leak.
컷 직전 0.35초에 주황 빛이 왼쪽에서 번져 컷 순간 정점에 이르고, 다음 장면 위에서 0.35초 동안 걷힌다
빛 레이어를 불투명도 0.8 이상으로 올려 피사체를 가리거나, 모든 컷마다 같은 빛을 반복한다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 지속 | 700ms | 500~1000ms | 정점은 중간 지점 |
| 빛 레이어 수 | 3개 | 2~3개 | 크기와 색을 다르게 |
| 최대 opacity | 0.35 | 0.25~0.5 | screen 혼합 |
| 시작차 | 60ms | 40~90ms | 레이어마다 어긋나게 |
| 이동 거리 | -40vw에서 +40vw | 30~60vw | 화면 밖에서 시작 |
const L=gsap.utils.toArray('.leak');
L.forEach((el,i)=>tl.fromTo(el,{xPercent:-60,opacity:0},{xPercent:40,duration:.7,ease:'sine.inOut'},t+i*.06)
.to(el,{opacity:.35,duration:.35,yoyo:true,repeat:1,ease:'sine.inOut'},t+i*.06));
/* .leak{mix-blend-mode:screen;background:radial-gradient(circle,#ff9a3c,#ff4d2e 55%,transparent 70%)} */그대로 붙여 넣는다Paste as is
<대상> 장면 전환에 빛샘을 넣어줘. 화면보다 큰 radial gradient 레이어 3개(주황, 빨강, 노랑)를 mix-blend-mode screen으로 얹고, 0.7초 동안 왼쪽 밖에서 오른쪽으로 옮기면서 opacity를 0에서 0.35로 올렸다 되돌려. 레이어 시작차는 0.06초, 이징은 sine.inOut. 컷 시각에 정점이 오게 하고 paused 타임라인 하나로 seek 가능하게 해.
Add a light leak transition to <target>. Overlay three oversized radial-gradient layers (orange, red, yellow) with mix-blend-mode screen. Move them from off-screen left to the right over 0.7s while opacity rises from 0 to 0.35 and back. Stagger layers by 0.06s, ease sine.inOut, and peak exactly on the cut. Use one paused GSAP timeline that can be seeked.
<파일>의 컷 지점에 light-leak 오버레이를 추가해. 레이어 3개, duration 0.7s, peak opacity 0.35, stagger 0.06s, ease sine.inOut. Math.random 없이 위치를 고정값으로 쓰고, 컷 -0.35초, 컷 시점, 컷 +0.35초를 캡처해 정점에서 피사체 대비가 유지되는지, 종료 후 오버레이가 opacity 0인지 확인해.
Add a light-leak overlay at the cut in <file>: 3 layers, duration 0.7s, peak opacity 0.35, stagger 0.06s, ease sine.inOut. Use fixed positions, no Math.random. Capture at cut -0.35s, at the cut, and at cut +0.35s to check that subject contrast holds at the peak and that overlay opacity returns to 0 afterward.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/transitions/css-light.md)unknowngongnyang/reelforge:skills/reelforge/references/grammar/07-stylize-time.md#light-leak-film-burn)Apache-2.0