효과Effects / 도형·패스Shape & Path / Nº 417

곡선 따라 휘기Curve Guided Deformation

Curve Guided Deformation

곡선 따라 휘기

다른 이름Also known as · 곡선 안내 변형

417

렌더 추가 예정CLIP COMING곡선 따라 휘기Curve Guided Deformation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 417. 곡선 따라 휘기 · Curve Guided Deformation · none

긴 물체가 구부러진 경로를 따라 미끄러지면서 경로에 맞춰 함께 휜다A long object slides along a bent path while bending to match it.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

유연한 전달 경로와 물체의 연속 이동을 보여 준다. 파이프를 따라 흐르는 것이나 리본이 감기는 모습을 자연스럽게 만든다Shows a flexible transmission path and continuous movement, such as flow along a pipe or a ribbon coiling.

언제 쓰나Use whenUSE WHEN

리본이나 케이블이 곡선 경로를 따라 이동하는 장면을 만들 때
글자나 띠가 곡선을 타고 흐르게 할 때

Move a ribbon or cable along a curved path.
Have text or a band flow along a curve.

과용 주의AvoidAVOID

곡률 반경은 물체 두께의 3배 이상
속도는 linear로 일정하게

분류TagsTAGS

도형·패스Shape & Path 설명Explain 순서·흐름Sequence 설명 영상Explainer video 제품 시연Product demo 숏폼Short-form 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

경로 길이 6단위를 1.5단위/s로 4초 동안 linear로 이동한다. 단면 12점이 경로의 접선에 맞춰 휜다

과용 · 나쁜 사례OVERUSE

경로와 무관하게 직선으로 이동하며 회전만 하거나, 곡률이 급한 곳에서 단면이 접혀 찢어진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
경로 길이	6단위	4~8	곡선 전체
속도	1.5단위/s	1~2단위/s	linear
단면 점	12	8~24	휘어짐 해상도
길이	4s	3~5s

GSAP

const u = { s: 0 };
tl.to(u, { s: 6, duration: 4, ease: 'none', onUpdate: () => mat.uniforms.uOffset.value = u.s }, 0);
// vertex: float d = position.x + uOffset; vec3 P = curve.pointAt(d/6.); vec3 T = curve.tangentAt(d/6.); pos = P + frame(T) * position.yz;

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 리본이 곡선 경로를 따라 미끄러지며 휘게 해줘. 경로 길이 6단위를 1.5단위/s, linear로 4초 동안 이동하고 단면 12점을 경로 접선 프레임에 맞춰 정점 셰이더에서 변형해. uOffset은 타임라인 tween으로만 올려.

Make the ribbon in <target> slide and bend along a curved path. Move 6 units of path length at 1.5 units/s with linear timing over 4 seconds, deforming 12 cross-section points to the path tangent frame in the vertex shader. Drive uOffset only from a timeline tween.

Codex

<파일>에 curve guided deformation을 구현해. uOffset 0→6 / 4s / ease none, 단면 12점, 경로 접선 프레임으로 정점 변형. 0초, 2초, 4초를 캡처해 리본이 경로 곡률에 맞춰 휘는지, 곡률이 큰 곳에서 단면이 접히지 않는지 확인해.

Implement curve guided deformation in <file>: uOffset 0 to 6 / 4s / ease none, 12 cross-section points, vertex deformation on the path tangent frame. Capture at 0s, 2s and 4s and verify the ribbon follows the path curvature and the cross-section does not fold at high curvature.