색 채널과 가로 조각이 순간적으로 어긋나 떨린 뒤 원래 화면으로 돌아오는 효과Color channels and horizontal slices jitter apart for a moment, then snap back to the original frame.
제목이 0.3초 동안 R 채널 -12px, B 채널 +12px로 갈라졌다 3프레임 안에 붙는다
변위 40px 이상을 1초 넘게 유지해 글자를 읽을 수 없게 하거나, 한 장면에 글리치를 여러 번 반복한다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 지속 | 300ms | 200~500ms | 양자화된 프레임 단위 |
| 채널 변위 | 12px | 8~30px | 1920x1080 기준 |
| 복사 opacity | 0.35 | 0.25~0.5 | R과 B 복사본 |
| 조각 수 | 6개 | 4~10개 | 가로 띠 높이 다르게 |
| 프레임 양자화 | 24fps | 12~30fps | 시드 기반 변위 |
for(let f=0;f<7;f++){ // 24fps 스텝, 위상은 sin 고정값(난수 없음)
tl.set('.r',{x:-12*Math.sin(f*2.1),clipPath:`inset(${f*9}% 0 ${60-f*9}% 0)`},t+f/24);
tl.set('.b',{x:12*Math.sin(f*1.7)},t+f/24);
}
tl.set('.r,.b',{x:0,clipPath:'none',opacity:0},t+7/24);그대로 붙여 넣는다Paste as is
<대상> 제목에 RGB 분리 글리치를 넣어줘. 원본 위에 빨강 복사와 파랑 복사를 mix-blend-mode screen, opacity 0.35로 얹고, 0.3초 동안 24fps 스텝으로 R은 -12px, B는 +12px 안에서 흔들며 가로 조각 6개를 clip-path로 어긋나게 해. 끝나면 두 복사를 제거하고 원본만 남겨. 난수는 시드 고정, paused 타임라인 하나로 만들어.
Add an RGB split glitch to the title in <target>. Stack a red copy and a blue copy over the original with mix-blend-mode screen at opacity 0.35. For 0.3s at 24fps steps, jitter red by -12px and blue by +12px and offset six horizontal clip-path slices. Remove both copies at the end. Seeded randomness only, one paused timeline.
<파일>의 <대상>에 glitch-rgb-split을 구현해. duration 0.3s, 채널 변위 12px, 복사 opacity 0.35, 24fps 스텝, 조각 6개, 시드 난수. 0.05초, 0.15초, 0.35초 시점을 캡처해 채널이 갈라졌다가 0.35초에 완전히 붙어 있는지, 글자 가독성이 마지막에 복구되는지 확인해.
Implement glitch-rgb-split on <target> in <file>: duration 0.3s, channel shift 12px, copy opacity 0.35, 24fps steps, 6 slices, seeded random. Capture at 0.05s, 0.15s, and 0.35s to verify the channels split then fully realign by 0.35s and that text legibility is restored at the end.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/rules/chromatic-glitch.md)unknownclaude-skill:hyperframes-animation/transitions/css-distortion.md)unknown