움직이는 접점 주위의 픽셀이나 덩어리가 끌려갔다가 원래대로 돌아오는 왜곡Pixels or a soft blob around a moving touch point are pulled toward it, then spring back.
접점이 화면을 가로지르는 동안 반경 180px 안의 픽셀이 접점 쪽으로 끌리고 500ms에 걸쳐 원래 위치로 복구된다
강도가 0.15를 넘어 이미지가 찢어져 보이거나, 복구가 없어 화면이 영구히 일그러진다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 반경 | 180px | 120~260px | 가우시안 영향 범위 |
| 강도 | 0.06 | 0.03~0.10 | UV 이동량 |
| 복구 시간 | 500ms | 300~800ms | 접점 이탈 후 |
| 접점 속도 | 900px/s | 500~1400px/s | 경로 이동 |
| 이징 | expo.out | power3~expo | 복구 |
// 셰이더 uniform을 GSAP로 구동
const u = { x: 300, y: 540, k: 0.06 };
tl.to(u, { x: 1600, y: 500, duration: 1.4, ease: 'sine.inOut', onUpdate: () => mat.uniforms.uPoint.value.set(u.x, u.y) }, 0);
tl.to(u, { k: 0, duration: 0.5, ease: 'expo.out', onUpdate: () => mat.uniforms.uK.value = u.k }, 1.4);
// frag: uv += normalize(p - uv) * uK * exp(-dot(d,d) / (r*r))그대로 붙여 넣는다Paste as is
WebGL 셰이더로 <이미지>에 마그네틱 왜곡을 넣어줘. 접점이 (300,540)에서 (1600,500)으로 1.4초 sine.inOut으로 움직이고, 반경 180px 안의 UV가 접점 쪽으로 강도 0.06만큼 가우시안으로 끌리게 해. 1.4초에 접점이 멈추면 강도를 0.5초 expo.out으로 0으로 돌려 복구해. uniform은 GSAP 타임라인이 구동하고 paused, seek 가능하게 해.
Use a WebGL shader to add magnetic distortion to <image>. A touch point travels from (300,540) to (1600,500) over 1.4 seconds with sine.inOut; UVs within 180px are pulled toward it with a Gaussian falloff at strength 0.06. When it stops at 1.4 seconds, return strength to 0 over 0.5 seconds with expo.out. Drive uniforms from a paused, seekable GSAP timeline.
<파일>의 셰이더에 uPoint, uK, uRadius(180) uniform을 두고 uv += normalize(p-uv)*uK*exp(-d²/r²)로 왜곡해. GSAP tween으로 접점 이동 1.4초, uK 0.06에서 0으로 복구 0.5초를 건다. 0.7초에는 접점 근처만 휘고, 1.4초에 최대, 2.0초에 원본과 픽셀 차이가 0인지 캡처 대조로 확인해.
In the shader in <file>, add uniforms uPoint, uK and uRadius(180) and displace uv += normalize(p-uv)*uK*exp(-d^2/r^2). Tween the point over 1.4s and uK from 0.06 to 0 over 0.5s. Capture 0.7s (only the area near the point bends), 1.4s (maximum) and 2.0s (pixel diff against the source is 0).
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/adapters/html-in-canvas-patterns.md)unknown