픽셀 정렬Pixel Sorting
밝기 순으로 픽셀 줄을 밀어 세로 또는 가로 줄무늬로 늘어뜨리는 글리치 아트 효과Pixel rows are pushed by brightness into stretched vertical or horizontal streaks, a glitch-art effect.
무엇을 전하나What it tells
- 이미지 전환에서 화면이 데이터처럼 흘러내리게 할 때
- 음악 영상이나 실험적 타이틀에서 강한 질감을 줄 때
- To let an image dissolve into data-like streaks during a transition
- For strong texture in music videos or experimental titles
- 인물 얼굴에는 정렬 마스크를 걸지 않는다
- 지속 1.2초 초과 금지(효과가 지루해짐)
좋은 예와 나쁜 예Good and bad use
이미지가 0.6초 동안 세로 8px 줄 단위로 밝은 픽셀부터 아래로 60px 밀려 늘어난 뒤 다음 이미지로 넘어간다
임계값 없이 전체 픽셀을 정렬해 이미지가 알아볼 수 없이 뭉개진다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 지속 | 600ms | 400~1000ms | 정렬 진행 |
| 줄 폭 | 8px | 4~16px | 세로 줄 단위 |
| 최대 변위 | 60px | 30~120px | 밝기에 비례 |
| 밝기 임계 | 0.55 | 0.4~0.7 | 이 이상만 이동 |
| 방향 | 아래 | 아래/오른쪽 | 전환 방향과 일치 |
// fragment: 열 단위 밝기 비례 샘플 오프셋
float lum=dot(texture2D(tex,vec2(uv.x,uv.y)).rgb,vec3(.299,.587,.114));
float k=step(.55,lum)*lum*uProg*60./1080.;
vec2 u=vec2(floor(uv.x*240.)/240.,uv.y-k);
gl_FragColor=texture2D(tex,u);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<이미지>에 픽셀 정렬 효과를 넣어줘. WebGL fragment shader에서 8px 폭 세로 줄마다 밝기 0.55 이상인 픽셀만 밝기에 비례해 최대 60px까지 아래로 밀어줘. 진행값은 0.6초 동안 power2.in으로 0에서 1로 올리고, 끝에 다음 이미지로 0.15초 교차해. 난수 없이 결정론으로, paused 타임라인으로 seek 가능하게 해.
Add a pixel-sort effect to <image>. In a WebGL fragment shader, for each 8px-wide vertical stripe, push only pixels with brightness above 0.55 downward in proportion to brightness, up to 60px. Ramp progress from 0 to 1 over 0.6s with power2.in, then cross-fade to the next image over 0.15s. Deterministic, no randomness, seekable via a paused timeline.
<파일>에 pixel-sort 셰이더 전환을 구현해. 줄 폭 8px, 최대 변위 60px, 임계 0.55, 지속 600ms, ease power2.in. 0초, 0.3초, 0.6초, 0.8초를 캡처해 밝은 부분만 아래로 늘어나는지, 어두운 영역이 제자리인지, 0.8초에 다음 이미지가 온전한지 확인해.
Implement a pixel-sort shader transition in <file>: stripe width 8px, max shift 60px, threshold 0.55, duration 600ms, ease power2.in. Capture at 0s, 0.3s, 0.6s, and 0.8s to verify only bright regions stretch downward, dark regions stay put, and the next image is intact at 0.8s.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/adapters/html-in-canvas-patterns.md)unknown - local/HyperFrames-skills (
claude-skill:music-to-video/references/motion-primitive-catalog.md)unknown - fand/vfx-jsMIT