Confetti (컨페티)
다른 이름 Confetti burst, Celebration
알록달록한 종이 조각이 터져 나와 흩날리며 성공을 축하합니다.
쓰는 곳
구매 완료, 목표 달성
변형
- canvas-confetti
- Confetti on click button
- fireworks
- burst
- side cannons
- rain
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 컨페티(Confetti) 축하 효과를 넣어 줘. 컨페티 버스트(confetti burst)라고도 불러.
알록달록한 작은 종이 조각이 버튼에서 빠르게 터져 나온 뒤, 뒤집히며 흩날려 떨어지다 사라지게 해 줘. 짧고 경쾌하게.
반복하지 말고 성공할 때마다 한 번만 터뜨리고, 페이지 클릭을 막지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.비슷한 모션
클릭해 보세요
Like / Heart Burst (좋아요 / 하트 버스트)
다른 이름 Heart animation, Twitter heart, Favorite toggle
하트 아이콘을 클릭하면 색이 채워지며 작은 입자가 터지거나 두근거립니다.
쓰는 곳
좋아요·즐겨찾기 버튼
[적용할 곳]에 좋아요 / 하트 버스트(Like / Heart Burst) 애니메이션을 넣어 줘. 하트 애니메이션(heart animation), 즐겨찾기 토글(favorite toggle)이라고도 불러.
좋아요를 누르면 하트가 색으로 채워지며 통통 튀듯 커지고, 링과 작은 점들이 바깥으로 터졌다가 사라지게 해 줘. 전체적으로 빠르고 경쾌하게, 좋아요를 취소하면 하트만 조용히 비워지게.
눌림 상태를 가진 진짜 토글 버튼으로 만들고, 버스트는 켤 때만 재생해 줘.Particles (파티클)
다른 이름 Floating particles, Particle field
작은 점 여러 개가 배경을 떠다니며 서로 이어지거나 포인터에 반응합니다.
쓰는 곳
히어로·섹션 배경
[적용할 곳]에 파티클(Particles) 배경을 넣어 줘. 플로팅 파티클(floating particles), 파티클 필드(particle field)라고도 불러.
크기가 제각각인 작은 점들이 저마다의 속도로 부드럽게 이리저리 떠돌며 천천히 흘러가게 해 줘. 차분하고 가볍게.
느린 기기에서도 가볍도록 점 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.ABC
Sparkles (스파클)
다른 이름 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
작고 밝은 반짝임이 텍스트나 섹션 주변에서 나타났다 사라집니다.
쓰는 곳
헤드라인, 프리미엄 포인트
[적용할 곳]에 스파클(Sparkles) 효과를 넣어 줘. 글리터(glitter), 트윙클 파티클(twinkle particles)이라고도 불러.
작은 별 모양 반짝임이 텍스트 주변 여기저기에서 무작위 순간에 톡 나타나 반짝이고 사라지게 해 줘. 가볍고 빠르게.
반짝임은 장식으로 두고 스크린 리더에서는 숨기고, 텍스트 자체는 절대 가리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.ABCDEF
마우스를 올려 보세요
Letter Scatter (레터 스캐터)
다른 이름 Explosive Letter Burst, Scatter Gather Letters
호버하면 글자가 흩어졌다 돌아오거나, 등장할 때 바깥으로 터져 나갑니다.
쓰는 곳
재미있는 링크
[적용할 곳]에 레터 스캐터(Letter Scatter) 호버 효과를 넣어 줘. 스캐터 개더 레터(scatter gather letters), 익스플로시브 레터 버스트(explosive letter burst)라고도 불러.
포인터가 글자 위로 오면 글자마다 제각각의 방향으로 살짝 회전하며 조금씩 날아가고, 포인터가 떠나면 부드럽게 다시 모여 단어가 되게 해 줘.
글자가 움직이는 동안 레이아웃에서 단어가 차지하는 자리는 고정하고, 스크린 리더는 한 단어로 읽게 하고, 키보드 포커스에도 같은 효과를 보여 줘.Micro-interaction의 다른 모션
클릭해 보세요
Copy-to-Clipboard Feedback (클립보드 복사 피드백)
다른 이름 Copied state, Copy icon to checkmark
복사 아이콘이 체크 표시로 바뀌고, 라벨이 잠시 「복사됨」으로 바뀝니다.
쓰는 곳
코드 블록, 공유 링크
[적용할 곳]에 클립보드 복사 피드백(Copy-to-Clipboard Feedback) 애니메이션을 넣어 줘. 복사됨 상태(copied state), 복사 아이콘에서 체크 표시로(copy icon to checkmark)라고도 불러.
복사 버튼을 누르면 복사 아이콘이 빠르게 작아지며 사라지고 체크 표시가 그려지면서 라벨이 「복사됨」으로 바뀌고, 잠시 뒤 모두 부드럽게 원래대로 돌아오게 해 줘.
바뀌는 동안 버튼 크기를 그대로 두어 아무것도 밀리지 않게 하고, 복사된 상태를 스크린 리더에 알려 줘.A
끌어 보세요
Drag (드래그)
다른 이름 Draggable, Drag constraints
드래그하면 요소가 포인터를 따라오며, 움직일 영역이나 축을 제한할 수 있습니다.
쓰는 곳
슬라이더, 정렬 가능한 카드
[적용할 곳]에 드래그(Drag) 인터랙션을 넣어 줘. 드래거블(draggable), 드래그 제약(drag constraints)이라고도 불러.
드래그하는 동안 요소가 포인터를 바로 따라오고, 허용된 영역의 가장자리에서 멈추며, 놓으면 살짝 튕기면서 원래 자리로 돌아오게 해 줘.
마우스뿐 아니라 터치로도 아래 페이지가 스크롤되지 않고 동작하게 하고, 키보드로 옮기는 방법도 마련해 줘.ABC
Floating Label (플로팅 라벨)
다른 이름 Float label, Animated placeholder
입력란에 포커스가 가거나 값이 들어가면, 플레이스홀더 라벨이 위로 올라가며 작아집니다.
쓰는 곳
폼, 로그인 입력란
[적용할 곳]에 플로팅 라벨(Floating Label)을 넣어 줘. 플로트 라벨(float label), 애니메이티드 플레이스홀더(animated placeholder)라고도 불러.
입력란에 포커스가 가거나 값이 있으면, 안에 있던 라벨이 부드럽고 빠르게 위로 미끄러지며 작아져 입력란 위쪽 가장자리에 걸치고, 입력란이 비어 있고 포커스도 없을 때만 다시 내려오게 해 줘.
입력란과 연결된 진짜 라벨로 유지하고, 입력란 높이가 바뀌지 않게 해서 폼이 밀리지 않게 해 줘.