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

벤드Bend

Bend

벤드

다른 이름Also known as · Bend and Bend It · 굽힘 변형 · CC Bend It

414

렌더 추가 예정CLIP COMING벤드Bend정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 414. 벤드 · Bend · sine.inOut

대상이 한쪽 끝을 축으로 휘어졌다가 흔들리며 복원되는 굽힘An object is anchored at one end, bends and sways, then springs back.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

유연한 물체의 탄성과 무게를 전달한다. 딱딱한 판이 아니라 휘어지는 재질이라는 인상을 준다Conveys the elasticity and weight of a flexible object. It reads as a bending material, not a stiff plate.

언제 쓰나Use whenUSE WHEN

식물, 리본, 얇은 종이, 안테나 같은 유연한 물체를 보일 때
한쪽이 고정된 요소가 바람이나 충격을 받는 장면을 만들 때
강조할 때 대상을 가볍게 휘게 하고 복원시킬 때

Plants, ribbons, thin paper or antennas.
A fixed-end element hit by wind or impact.
Emphasize by bending an object lightly and restoring it.

과용 주의AvoidAVOID

굽힘 각은 ±30도 이하로 한다
고정단에서 멀수록 곡률 지연을 준다
한쪽 고정단은 움직이지 않는다

분류TagsTAGS

도형·패스Shape & Path 설명Explain 피드백Feedback 설명 영상Explainer video 제품 시연Product demo 숏폼Short-form 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

한쪽 끝을 고정한 리본이 1초 동안 ±20도 곡률로 휘어졌다 돌아오며 끝부분일수록 늦게 따라온다

과용 · 나쁜 사례OVERUSE

전체가 뻣뻣하게 회전만 해서 굽힘이 아니라 기울기로 보이거나, 곡률이 커서 형태가 접힌다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시간	1.0s	0.6~1.6s	왕복 1회
굽힘 각	±20deg	±10~30deg	끝단 기준
곡률 지연	0.05s	0.03~0.1s	분절별
분절 수	12	8~20	메시 세로 분할
이징	sine.inOut	sine~power2

GSAP

// 메시를 N개 분절로 나누고 분절 i가 누적 각을 받는 순수 함수
const N = 12, o = { a: 0 };
tl.to(o, { a: 20, duration: 0.5, ease: 'sine.inOut', yoyo: true, repeat: 1, onUpdate: () => {
  segs.forEach((s, i) => s.rotation = (o.a / N) * (i + 1) * Math.min(1, 0.4 + i * 0.05));
} }, 0.3);
// WebGL이면 정점 셰이더에서 y 위치에 비례해 곡률 적용

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP과 WebGL이나 SVG로 <리본>의 한쪽 끝을 고정하고 굽히는 연출을 만들어 줘. 12분절로 나눠 고정단에서 멀수록 각을 더 받게 하고, 0.3초부터 0.5초 동안 sine.inOut으로 최대 20도까지 굽혔다가 yoyo로 복원해. 끝부분이 0.05초씩 늦게 따라오게 하고 고정단은 움직이지 않게 해. paused 타임라인으로 작성해.

Use GSAP with WebGL or SVG to bend <ribbon> with one end anchored. Split it into 12 segments so segments farther from the anchor take more angle; from 0.3 seconds over 0.5 seconds bend up to 20 degrees with sine.inOut and yoyo back. The tip lags by 0.05 seconds per segment and the anchor never moves. Paused timeline.

Codex

<파일>의 대상에 bend를 적용해. 분절 12개에 각 rotation=(a/12)*(i+1)*min(1,0.4+i*0.05)를 주고 tween 객체 a를 position 0.3, duration 0.5, ease sine.inOut, yoyo true, repeat 1로 0→20 왕복한다. 0.3초는 직선, 0.8초는 최대 굽힘이며 끝단이 더 많이 휘었는지, 1.3초에 직선으로 복원됐는지 캡처로 확인해.

Apply bend to the subject in <file>. Give each of 12 segments rotation=(a/12)*(i+1)*min(1,0.4+i*0.05) and tween object a 0 to 20 at position 0.3, duration 0.5, ease sine.inOut, yoyo true, repeat 1. Capture 0.3s (straight), 0.8s (maximum bend, tip bent most) and 1.3s (restored to straight).