모션 블러Motion Blur
빠르게 움직이는 물체의 이동 방향으로 여러 샘플을 겹쳐 흐림을 더하는 효과Multiple samples along the direction of motion are blended to add blur to fast-moving objects.
무엇을 전하나What it tells
- 빠르게 튀어 들어오는 타이틀이나 아이콘에 속도감을 줄 때
- 프레임 레이트가 낮아 이동이 끊겨 보일 때
- To add speed to titles or icons that snap in quickly
- When low frame rate makes motion look choppy
- 정지 프레임에서 blur 0 보장
- 최대 blur 30px 초과 금지
좋은 예와 나쁜 예Good and bad use
제목이 0.35초 동안 1400px를 이동할 때 속도가 가장 빠른 구간에서만 최대 20px 흐려지고 정지하면 선명해진다
정지한 상태에서도 blur가 남아 글자가 흐려 보이거나, 느린 이동에도 과한 blur를 건다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 셔터각 | 180도 | 90~270도 | 샘플 시간 폭 = 셔터각/360 x 프레임 |
| 샘플 수 | 8개 | 6~16개 | 많을수록 부드럽고 무거움 |
| 최대 blur | 20px | 10~30px | 속도에 비례 |
| 이동 시간 | 350ms | 250~600ms | 빠른 이동일수록 효과 큼 |
| 방향 | 이동 벡터 | x/y | transform 방향과 일치 |
const o={x:-1400};
tl.to(o,{x:0,duration:.35,ease:'expo.out',onUpdate(){
const v=Math.abs(o.x-(o.px??o.x)); o.px=o.x;
gsap.set('.t',{x:o.x,filter:`blur(${Math.min(20,v*.4)}px)`});}},t);
// 오프라인 렌더는 tl.time 차이로 속도 계산에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상>이 왼쪽에서 1400px 이동해 들어올 때 모션 블러를 넣어줘. 이동은 0.35초 expo.out, 속도에 비례해 이동 방향으로만 최대 20px blur를 걸고 정지 프레임에서는 blur 0이 되게 해. 속도는 ease 미분이나 시간 미소 차로 계산해서 paused 타임라인을 seek해도 같은 결과가 나오게 해.
Add motion blur to <target> as it enters from the left over 1400px. Move over 0.35s with expo.out and apply blur only along the motion direction, proportional to speed up to 20px, and 0 at rest. Compute speed from the ease derivative or a small time delta so seeking a paused timeline gives identical results.
<파일>의 <대상> 진입에 motion-blur를 적용해. 이동 350ms expo.out, 거리 1400px, 최대 blur 20px, 셔터각 180도 상당. 0.05초, 0.15초, 0.4초를 캡처해 속도가 클 때 blur가 최대이고 0.4초 정지 프레임에서 blur가 0인지, 글자가 선명한지 확인해.
Apply motion-blur to the entrance of <target> in <file>: move 350ms expo.out over 1400px, max blur 20px, about a 180-degree shutter. Capture at 0.05s, 0.15s, and 0.4s to verify blur peaks at high speed and is 0 at the 0.4s rest frame with crisp text.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
쓰이는 곳Used in
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/rules/motion-blur-streak.md)unknown - motion dictionary 1-principles.md#8. 2D 속성 기본 동작own
- helpx.adobe.comunknown
- heygen-com/hyperframesApache-2.0