SVG Mask Reveal (SVG 마스크 리빌)
다른 이름 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
마스크 도형이 쓸고 지나가거나 포인터를 따라가며 아래 콘텐츠를 드러냅니다.
쓰는 곳
이미지·콘텐츠 드러내기
변형
- circle follows cursor
- clip-path inset wipe
- SVG clipPath animation
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 SVG 마스크 리빌(SVG Mask Reveal) 호버 효과를 넣어 줘. 클립 패스 리빌(clip-path reveal), 스포트라이트 마스크(spotlight mask)라고도 불러.
포인터를 올린 동안 원형 마스크가 가운데서 커지며 아래 콘텐츠를 드러내고, 포인터가 벗어나면 다시 닫히게 해 줘. 부드럽고 꽤 빠르게.
아무것도 밀리지 않게 두 레이어를 정확히 같은 크기로 두고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.비슷한 모션
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
포인터를 움직여 보세요
Cursor Spotlight (커서 스포트라이트)
다른 이름 Flashlight cursor, Spotlight effect
포인터 주변의 빛의 원이 콘텐츠를 드러내고, 나머지는 어둡게 남습니다.
쓰는 곳
히어로 섹션, 드러내기 효과
[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.ABCDEFGHIJKL
포인터를 움직여 보세요
Text Reveal Card (텍스트 리빌 카드)
다른 이름 Spotlight Text Reveal
카드 위로 포인터를 움직이면 마스크 경계나 스포트라이트 아래에 숨은 텍스트가 드러납니다.
쓰는 곳
기능 소개 카드
[적용할 곳]에 텍스트 리빌 카드(Text Reveal Card) 효과를 넣어 줘. 스포트라이트 텍스트 리빌(spotlight text reveal)이라고도 불러.
포인터가 카드 위를 움직이면 세로 경계선이 바짝 따라가며 한쪽에 숨은 텍스트를 드러내게 해 줘. 지연 없이 부드럽고 바로 반응하게.
따라갈 포인터가 없는 터치 기기에서는 드래그나 탭으로 숨은 텍스트가 보이게 하고, 숨은 텍스트도 스크린 리더가 읽을 수 있게 해 줘.A
Clip Reveal (클립 리빌)
다른 이름 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path나 마스크가 가장자리나 한 점에서 넓어지며 이미지나 텍스트를 차츰 드러냅니다.
쓰는 곳
이미지, 헤드라인 등장
[적용할 곳]에 클립 리빌(Clip Reveal) 등장 효과를 넣어 줘. 마스크 리빌(mask reveal), 와이프 리빌(wipe reveal), 이미지 리빌(image reveal)이라고도 불러.
잘라 내는 경계선이 왼쪽에서 오른쪽으로 쓸고 지나가며, 내용은 가만히 있는 채로 차츰 드러나게 해 줘. 매끄럽게, 시작과 끝은 부드럽게.
아무것도 밀리지 않게 처음부터 요소 자리를 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전부 드러난 상태로 보여 줘.안에서 스크롤해 보세요
Image Reveal Wipe (이미지 리빌 와이프)
다른 이름 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
덮개가 줄어들거나 마스크 가장자리가 넓어지면서 이미지가 드러납니다.
쓰는 곳
스크롤로 드러나는 에디토리얼 이미지
[적용할 곳]에 이미지 리빌 와이프(Image Reveal Wipe)를 넣어 줘. 마스크 리빌(mask reveal), 클립 패스 리빌(clip-path reveal)이라고도 불러.
이미지가 스크롤로 화면에 들어오면 덮개가 한쪽에서 걷히며 스크롤에 맞춰 부드럽게 이미지를 드러내게 해 줘. 화면을 벗어나기 한참 전에 완전히 보이도록.
레이아웃이 튀지 않게 이미지 자리를 미리 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 처음부터 다 보여 줘.SVG & Shape의 다른 모션
Blob Morph (블롭 모프)
다른 이름 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
유기적인 블롭이 윤곽을 끊임없이 바꿉니다.
쓰는 곳
배경, 아바타, 버튼
[적용할 곳]에 블롭 모프(Blob Morph) 반복 애니메이션을 넣어 줘. 모핑 블롭(morphing blob), 애니메이티드 블롭(animated blob)이라고도 불러.
유기적인 블롭이 천천히 돌면서 윤곽을 계속 바꾸게 해 줘. 모서리 없이 매끄럽고 부드럽게.
모양이 튀지 않게 이음매 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.마우스를 올려 보세요
Gooey Effect (메타볼 효과)
다른 이름 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
블러와 대비 필터로 가까운 도형끼리 액체 방울처럼 서로 녹아 붙습니다.
쓰는 곳
메뉴, 커서, 페이지네이션
[적용할 곳]에 메타볼 효과(Gooey Effect)를 넣어 줘. 구 이펙트(goo effect), 메타볼(metaballs)이라고도 불러.
포인터를 올리면 작은 방울들이 본체에서 액체처럼 늘어나다 떨어져 나가고, 포인터가 벗어나면 흘러 돌아와 부드럽게 합쳐지게 해 줘.
블러·대비 필터는 페이지 전체가 아니라 작은 도형 묶음에만 걸고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.클릭해 보세요
Icon Morph (아이콘 모프)
다른 이름 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
햄버거 메뉴 같은 아이콘이 막대의 회전과 이동으로 다른 아이콘(X)으로 바뀝니다.
쓰는 곳
메뉴 열기·닫기 버튼
[적용할 곳]에 아이콘 모프(Icon Morph)를 넣어 줘. 햄버거 투 엑스(hamburger to X), 메뉴 아이콘 모프(menu icon morph)라고도 불러.
누를 때마다 위아래 막대가 먼저 가운데로 모인 다음 회전해 X가 되고 가운데 막대는 사라지며, 다시 누르면 반대로 돌아가게 해 줘. 빠르고 경쾌하게.
접근성 레이블과 펼침 상태가 함께 바뀌는 진짜 토글 버튼으로 만들고, 주변이 밀리지 않게 아이콘 크기는 고정해 줘.