크로매틱 와이프Chromatic Wipe
색 채널이 벌어지며 화면이 밀려 나가고 새 화면에서 다시 합쳐지는 전환Color channels split apart as the frame slides away, then recombine on the new frame.
무엇을 전하나What it tells
- 기술 제품이나 사이버 톤의 영상에서 빠르게 장면을 넘길 때
- 와이프에 한 겹 더 질감을 얹고 싶을 때
- Move quickly between scenes in a tech or cyber-toned video.
- Add an extra layer of texture on top of a wipe.
- 채널 변위 최대 80px 초과 금지(1920px 기준)
- 글자 장면은 변위 정점을 0.1초 이내로 끊는다
좋은 예와 나쁜 예Good and bad use
빨강 복사본이 왼쪽으로 최대 80px, 파랑 복사본이 오른쪽으로 80px 벌어지며 화면이 밀리고, 0.5초 안에 새 화면에서 채널이 합쳐진다
변위를 200px 넘게 벌려 세 화면이 따로 보이거나, 밝은 글자가 색 번짐으로 읽히지 않는다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 지속 | 0.5s | 0.35~0.8s | 와이프와 변위가 함께 |
| 최대 채널 변위 | 80px | 30~100px | R는 음의 x, B는 양의 x |
| 와이프 방향 | 좌에서 우 | 4방향 | 변위 방향과 맞춘다 |
| 합성 | screen 또는 plus-lighter | 채널 복사본 합성 |
tl.to('.r', { x: -80, duration: 0.25, ease: 'power2.out' }, 0)
.to('.b', { x: 80, duration: 0.25, ease: 'power2.out' }, 0)
.to('.clip', { clipPath: 'inset(0 0 0 100%)', duration: 0.5, ease: 'power3.inOut' }, 0)
.to(['.r', '.b'], { x: 0, duration: 0.25, ease: 'power2.in' }, 0.25);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상A>에서 <대상B>로 크로매틱 와이프를 만들어줘. A의 빨강 복사본을 -80px, 파랑 복사본을 +80px로 0.25초 동안 벌리면서 왼쪽에서 오른쪽으로 0.5초 동안 와이프하고, 뒤 절반 0.25초에 채널이 0으로 합쳐지게 해. 이징 power3.inOut, mix-blend-mode screen, paused 타임라인 하나.
Build a chromatic wipe from <targetA> to <targetB>. Split A's red copy to -80px and blue copy to +80px over 0.25 seconds while wiping left to right over 0.5 seconds, then bring the channels back to 0 in the last 0.25 seconds. Use power3.inOut, mix-blend-mode screen, one paused timeline.
<파일>에 chromatic wipe를 넣어. R 복사본 x -80px, B 복사본 x +80px (각 0.25s power2.out), 동시에 inset clipPath 와이프 0.5s power3.inOut, 이후 채널 x를 0으로 복귀 (0.25s). 0.25초 시점 캡처에서 색 분리가 보이는지, 0.5초에 분리가 사라졌는지, 텍스트 가독성이 유지되는지 확인해.
Add a chromatic wipe in <file>. R copy x to -80px, B copy x to +80px (0.25s each, power2.out), with an inset clipPath wipe over 0.5s power3.inOut, then return channels to x 0 (0.25s). Capture at 0.25 seconds to confirm visible color separation, at 0.5 seconds to confirm it has closed, and check text legibility.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- heygen-com/hyperframesApache-2.0
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/transitions/css-distortion.md)unknown