퍼커 앤 블로트Pucker and Bloat

Pucker and Bloat

퍼커 앤 블로트

429

렌더 추가 예정CLIP COMING퍼커 앤 블로트Pucker and Bloat정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 429. 퍼커 앤 블로트 · Pucker and Bloat · power2.inOut

꼭짓점과 곡선이 서로 반대 방향으로 당겨져 도형이 별이나 꽃처럼 바뀌는 변형Vertices and curves are pulled in opposite directions, turning a shape into a star or flower.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

도형의 성격이 날카롭게 또는 유연하게 바뀐다. 하나의 규칙으로 별과 꽃 사이를 오갈 수 있다Shifts a shape's character between sharp and soft. One rule moves between star and flower.

언제 쓰나Use whenUSE WHEN

원이 별로 변하며 반짝임을 표현할 때
꽃잎처럼 부풀어 오르는 아이콘 등장을 만들 때
상태가 활성화되면 도형이 날카로워지는 UI 표현을 할 때

A circle sharpening into a star to suggest a sparkle.
A petal-like swelling icon entrance.
A UI cue where an activated shape becomes sharper.

과용 주의AvoidAVOID

amount 절댓값 40% 이하로 한다
꼭짓점 수는 5~12개로 한다
퍼커와 블로트를 한 번에 섞지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

원이 700ms에 amount 0에서 -35%로 당겨져 뾰족한 별이 되고, 반대로 +35%면 부푼 꽃이 된다

과용 · 나쁜 사례OVERUSE

amount가 50%를 넘어 도형이 자기 자신과 교차하거나, 점 수가 적어 각진 다각형처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시간	0.7s	0.4~1.0s	변형
amount	0→-35%	-40~+40%	음수 퍼커, 양수 블로트
꼭짓점	8	5~12	별의 가지
회전	15deg	0~30deg	선택
이징	power2.inOut	power1~power3

GSAP

const n = 8, R = 100;
const path = (a) => Array.from({ length: n * 2 }, (_, i) => {
  const t = (i / (n * 2)) * Math.PI * 2, r = R * (i % 2 ? 1 + a : 1 - a);
  return `${i ? 'L' : 'M'}${(Math.cos(t) * r).toFixed(1)},${(Math.sin(t) * r).toFixed(1)}`;
}).join('') + 'Z';
const o = { a: 0 };
tl.to(o, { a: 0.35, duration: 0.7, ease: 'power2.inOut', onUpdate: () => el.setAttribute('d', path(o.a)) }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP과 SVG로 <원>을 퍼커 앤 블로트로 별이 되게 만들어 줘. 반지름 100의 16점 원에서 짝수 점은 바깥으로, 홀수 점은 안쪽으로 amount만큼 이동한 path를 만들고, 0.3초부터 0.7초 동안 power2.inOut으로 amount를 0에서 0.35까지 키워 뾰족한 별로 만들어. 점 수 고정, 교차 금지, paused 타임라인으로 작성해.

Use GSAP and SVG to pucker <circle> into a star. On a 100 radius circle with 16 points, move even points outward and odd points inward by amount, and grow amount from 0 to 0.35 starting at 0.3 seconds over 0.7 seconds with power2.inOut into a pointed star. Fixed point count, no self intersection, paused timeline.

Codex

<파일>의 도형에 pucker-bloat를 적용해. path(a)는 16점을 반지름 100*(1±a)로 교대 배치하고, tween 객체 a를 position 0.3, duration 0.7, ease power2.inOut으로 0→0.35, onUpdate에서 setAttribute('d', path(a)). 0.3초는 원, 0.65초는 중간, 1.2초는 8각 별이며 경로 자기교차가 없는지 캡처로 확인해.

Apply pucker-bloat to the shape in <file>. path(a) alternates 16 points at radius 100*(1+/-a); tween object a 0 to 0.35 at position 0.3, duration 0.7, ease power2.inOut and setAttribute('d', path(a)) in onUpdate. Capture 0.3s (circle), 0.65s (midway) and 1.2s (8-point star with no self-intersection).