AWESOME AI MOTION
효과Effects / 도형·패스Shape & Path / Nº 416

모서리 말림Corner Peel

Corner Peel
모서리 말림
다른 이름Also known as · Skew Peel · 스티커 젖힘 · skew-pivot-peel · Corner Curl · 종이 모서리 말림
416
렌더 추가 예정CLIP COMING모서리 말림Corner Peel정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 416. 모서리 말림 · Corner Peel · power2.out

얇은 면의 한 모서리가 비스듬히 말려 올라가며 뒷면과 그림자가 드러나는 움직임One corner of a thin surface curls up at an angle, exposing its back and a soft shadow.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
종이나 스티커처럼 얇고 붙어 있던 재질이라는 느낌을 준다. 그 아래에 무언가 숨어 있다는 기대를 만든다Gives the feel of paper or a sticker that was stuck down, and hints that something lies beneath.
언제 쓰나Use whenUSE WHEN
  • 스티커를 떼어 아래 정보를 보여 줄 때
  • 종이 카드 모서리를 넘겨 다음 내용을 암시할 때
  • 쿠폰이나 스크래치 카드 같은 공개 연출을 할 때
  • Peel a sticker to show information underneath.
  • Turn a paper card corner to hint at the next content.
  • A coupon or scratch card style reveal.
과용 주의AvoidAVOID
  • 말림 크기는 카드 짧은 변의 20% 이하로 유지한다
  • 접힌 면에는 반드시 그림자를 넣는다
  • 텍스트 위에 걸치지 않게 여백 모서리에 쓴다
분류TagsTAGS
도형·패스Shape & Path분위기Mood피드백Feedback웹 UIWeb UI숏폼Short-form제품 시연Product demo난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

카드 우하단 모서리가 500ms 동안 40px 크기로 45도 방향에 말려 올라가고 뒷면 색과 옅은 그림자가 나타난다

과용 · 나쁜 사례OVERUSE

말림이 커져 카드 절반이 접힌 것처럼 보이거나, 그림자가 없어 평면 도형이 잘린 것처럼 보인다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
시간0.5s0.3~0.8s말림 진행
말림 크기40px24~80px대각선 접힘 변
접힘 방향45deg30~60deg우하단 기준
그림자 opacity0.250.15~0.35말림에 비례
이징power2.outpower1~power3
GSAP
// .peel: 우하단 삼각형(접힌 면), .shade: 그림자 삼각형
tl.fromTo('.peel', { width: 0, height: 0 }, { width: 40, height: 40, duration: 0.5, ease: 'power2.out' }, 0.3);
tl.fromTo('.shade', { opacity: 0 }, { opacity: 0.25, duration: 0.5, ease: 'power2.out' }, 0.3);
// .peel { background: linear-gradient(135deg, #ddd, #fff); clip-path: polygon(0 0, 100% 0, 0 100%) }
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <카드> 우하단 모서리를 말아 올려 줘. 0.3초부터 0.5초 동안 접힌 삼각형을 0에서 40px까지 power2.out으로 키우고, 접힌 면은 밝은 회색 그라디언트, 그림자는 opacity 0에서 0.25로 함께 올려. 말림은 카드 짧은 변의 20%를 넘지 않게 하고 paused 타임라인으로 만들어.

Use GSAP to peel the bottom-right corner of <card>. From 0.3 seconds, grow a folded triangle from 0 to 40px over 0.5 seconds with power2.out, styled with a light gray gradient, while raising its shadow opacity from 0 to 0.25. Keep the curl under 20% of the card's short side. Paused timeline.

Codex

<파일>의 카드에 corner-peel을 적용해. .peel width/height 0→40px, .shade opacity 0→0.25를 position 0.3, duration 0.5, ease power2.out으로 건다. 0.3초는 평평, 0.55초는 말림이 절반, 1.0초는 40px 말림과 그림자가 보이는지 캡처로 확인해.

Apply corner-peel to the card in <file>. Tween .peel width and height 0 to 40px and .shade opacity 0 to 0.25 at position 0.3, duration 0.5, ease power2.out. Capture 0.3s (flat), 0.55s (half curled) and 1.0s (40px curl with shadow visible).

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
모서리 삼각형의 width, height와 그림자 opacity만 paused 타임라인에서 움직인다. SVG 경로 보간 대신 CSS 삼각형이면 seek가 안정적이다
ReelForgeBRIEF TO VIDEO
브리프에 카드 크기, 말림 크기 40px, 방향 45도, 뒷면 색을 싣는다
Scrolline DeckSCROLL SCRUB
진행률 0~1을 말림 크기 0~40px에 매핑한다. 스크롤을 되돌리면 모서리가 다시 붙는다
06

잘 맞는 조합Pairs well with

마스크 리빌 · Mask Reveal
Nº 091마스크 리빌Mask RevealMask Reveal
렌더 추가 예정CLIP COMING
힌지 리빌Hinge Reveal
044
Nº 044힌지 리빌Hinge RevealHinge Reveal
페이지 턴 · Page Turn
Nº 138페이지 턴Page TurnPage Turn
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo