효과Effects / 등장·퇴장Entrance & Exit / Nº 042

풀리시 리빌Foolish Reveal

Foolish Reveal

풀리시 리빌

다른 이름Also known as · 모서리 순환 회전 등장

042

렌더 추가 예정CLIP COMING풀리시 리빌Foolish Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 042. 풀리시 리빌 · Foolish Reveal · cubic-bezier(0.22, 1, 0.36, 1)

요소가 크기를 바꾸며 여러 모서리를 축으로 차례로 회전해 정착한다.An element scales in while rotating around successive corner pivots.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

장난스럽고 예측하기 어려운 진입을 만든다.Creates a playful, unpredictable entrance.

언제 쓰나Use whenUSE WHEN

익살스러운 캐릭터 소품을 넣을 때
장면의 주인공 한 요소에 시선을 모을 때

Introduce a comic character prop.
Focus attention on one main element in a scene.

과용 주의AvoidAVOID

모서리 변경으로 생기는 위치 점프를 확인한다.
동작 줄이기 설정에서는 정적인 최종 상태를 보여 준다.

분류TagsTAGS

등장·퇴장Entrance & Exit 주목 끌기Attention 강조Emphasis 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 고급Advancedcss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

작은 선물 상자가 네 모서리를 차례로 축 삼아 회전한다.

과용 · 나쁜 사례OVERUSE

여러 요소에 동시에 적용해 읽을 위치와 시선을 계속 바꾸게 만든다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속 시간	1000ms	700~1400ms	한 번의 동작 기준
총 회전	360deg	180~360deg	네 구간 분할
기준점	모서리 4곳	2~4곳	마지막 중앙 복원
시작 축척	0	0~0.2	최종 1

GSAP

.effect { animation: effect 1000ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes effect {
  0%{transform-origin:0 0;transform:rotate(-360deg) scale(0);opacity:0} 25%{transform-origin:100% 0;transform:rotate(-270deg) scale(.4);opacity:1} 50%{transform-origin:100% 100%;transform:rotate(-180deg) scale(.7)} 75%{transform-origin:0 100%;transform:rotate(-90deg) scale(.9)} 100%{transform-origin:50% 50%;transform:rotate(0) scale(1);opacity:1}
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 풀리시 리빌을 적용해. 지속 1000ms, 총 회전 360deg, 기준점 모서리 4곳, 시작 축척 0, 이징 cubic-bezier(0.22, 1, 0.36, 1)으로 위 키프레임을 구현하고 최종 상태를 유지해. 동작 줄이기 설정에서는 최종 상태를 바로 보여 줘.

Apply Foolish Reveal to <target> in <file>. Implement the provided keyframes with 1000ms duration, total rotation 360deg, pivot four corners, initial scale 0, easing cubic-bezier(0.22, 1, 0.36, 1). Preserve the final state and show it immediately when reduced motion is enabled.

Codex

<파일>의 <대상> 스타일에 풀리시 리빌 키프레임을 추가해. 지속 1000ms, 총 회전 360deg, 기준점 모서리 4곳, 시작 축척 0, 이징 cubic-bezier(0.22, 1, 0.36, 1)을 적용하고 0초·0.5초·1초 시점을 캡처해 시작 상태, 중간 변화, 최종 정착를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Foolish Reveal keyframes to the styles for <target> in <file> using 1000ms duration, total rotation 360deg, pivot four corners, initial scale 0, easing cubic-bezier(0.22, 1, 0.36, 1). Capture at 0, 0.5, and 1 seconds to verify the initial state, intermediate motion, and settled state. Use fixed keyframes and verify reduced-motion behavior.