효과Effects / 질감·스타일Texture & Style / Nº 492

속도 기반 스큐Velocity Skew

Velocity Skew

속도 기반 스큐

다른 이름Also known as · Scroll velocity skew · 스크롤 속도 기울임 · Text Speed Skew Arrival · 텍스트 속도 기울임 등장

492

렌더 추가 예정CLIP COMING속도 기반 스큐Velocity Skew정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 492. 속도 기반 스큐 · Velocity Skew · power3.out

스크롤이 빨라질수록 글자와 카드가 기울고 멈추면 원래 모양으로 돌아오는 효과The faster you scroll, the more letters and cards skew; when it stops they return to their shape.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

움직임의 속도를 물질의 변형으로 보여준다. 스크롤이나 이동에 물리적 관성감을 준다Shows speed as material deformation and gives scroll or movement a physical sense of inertia.

언제 쓰나Use whenUSE WHEN

스크롤 속도에 반응하는 카드나 타이틀을 만들 때
빠른 이동 뒤 관성으로 늘어지는 느낌을 줄 때

For cards or titles that react to scroll speed
To give a stretched feel of inertia after fast movement

과용 주의AvoidAVOID

skew ±12도 제한
복귀 300ms 이하, 정지 시 반드시 0도

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

스크롤 속도에 비례해 카드가 최대 ±12도 기울고 정지하면 300ms 안에 0도로 돌아온다

과용 · 나쁜 사례OVERUSE

기울기 제한이 없어 30도 이상 기울어 글자를 읽을 수 없거나, 복귀가 느려 멈춘 뒤에도 기울어 있다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
최대 skew	±12도	6~15도	속도에 비례하되 clamp
복귀 시간	300ms	200~500ms	정지 후
속도 계수	0.02도/(px/s)	0.01~0.03	진행값 미분
이징	power3.out	power2~power4	복귀
대상	제목과 카드	글자 굵게	본문에는 쓰지 않음

GSAP

const set=gsap.quickSetter('.card','skewY','deg'); let last=0,sk=0;
function tick(p){ const v=(p-last)*fps; last=p;
 const target=gsap.utils.clamp(-12,12,v*400);
 sk+=(target-sk)*.3; set(sk); }
// 복귀: tl.to('.card',{skewY:0,duration:.3,ease:'power3.out'}) 를 정지 시점에 실행

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<카드>에 속도 기반 스큐를 넣어줘. 스크롤 진행값의 시간 미분(속도)에 0.02도/(px/s)를 곱해 skewY를 ±12도로 clamp하고, 매 프레임 30%씩 목표에 접근시켜 부드럽게 해. 스크롤이 멈추면 300ms power3.out으로 0도로 복귀. 본문에는 걸지 않고 제목과 카드에만 적용해.

Add velocity skew to <card>. Multiply the time derivative of scroll progress (speed) by 0.02 deg/(px/s), clamp skewY to +/-12 degrees, and ease toward the target by 30% each frame. When scrolling stops, return to 0 degrees over 300ms with power3.out. Apply only to titles and cards, not body text.

Codex

<파일>의 <카드>에 velocity-skew를 구현해. 최대 ±12도, 복귀 300ms power3.out, 계수 0.02도/(px/s). 빠르게 스크롤할 때와 멈춘 뒤 0.4초를 캡처해 빠를 때 기울고 정지 후 0도인지, 기울기가 12도를 넘지 않는지, 글자가 읽히는지 확인해.

Implement velocity-skew on <card> in <file>: max +/-12 degrees, release 300ms power3.out, coefficient 0.02 deg/(px/s). Capture during a fast scroll and 0.4s after stopping to verify it tilts when fast, returns to 0 at rest, never exceeds 12 degrees, and stays readable.