Particles (파티클)
다른 이름 Floating particles, Particle field
작은 점 여러 개가 배경을 떠다니며 서로 이어지거나 포인터에 반응합니다.
쓰는 곳
히어로·섹션 배경
변형
- floating
- connected lines
- pointer-repel
- 3D floating
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 파티클(Particles) 배경을 넣어 줘. 플로팅 파티클(floating particles), 파티클 필드(particle field)라고도 불러.
크기가 제각각인 작은 점들이 저마다의 속도로 부드럽게 이리저리 떠돌며 천천히 흘러가게 해 줘. 차분하고 가볍게.
느린 기기에서도 가볍도록 점 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.비슷한 모션
Starfield (스타필드)
다른 이름 Stars background, Twinkling stars
우주 같은 어두운 배경 위에서 작은 별들이 반짝이거나 떠다닙니다.
쓰는 곳
우주·밤 테마 히어로
[적용할 곳]에 스타필드(Starfield) 배경을 넣어 줘. 별 배경(stars background), 반짝이는 별(twinkling stars)이라고도 불러.
크기가 제각각인 작은 별들이 저마다의 속도로 은은하게 반짝이고, 별밭 전체는 아주 천천히 흘러가게 해 줘. 고요하고 차분하게.
가볍도록 별 개수는 적당히 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반짝임과 흐름을 멈춰 줘.ABC
Sparkles (스파클)
다른 이름 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
작고 밝은 반짝임이 텍스트나 섹션 주변에서 나타났다 사라집니다.
쓰는 곳
헤드라인, 프리미엄 포인트
[적용할 곳]에 스파클(Sparkles) 효과를 넣어 줘. 글리터(glitter), 트윙클 파티클(twinkle particles)이라고도 불러.
작은 별 모양 반짝임이 텍스트 주변 여기저기에서 무작위 순간에 톡 나타나 반짝이고 사라지게 해 줘. 가볍고 빠르게.
반짝임은 장식으로 두고 스크린 리더에서는 숨기고, 텍스트 자체는 절대 가리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Vortex (보텍스)
다른 이름 Swirling particles
입자들이 소용돌이처럼 중심 주위를 나선형으로 돕니다.
쓰는 곳
극적인 히어로 배경
[적용할 곳]에 보텍스(Vortex) 배경을 넣어 줘. 소용돌이 파티클(swirling particles)이라고도 불러.
작은 입자들이 소용돌이처럼 중심점 주위를 나선형으로 안쪽으로 돌고, 가장자리에서 서서히 나타나 가운데에 다다르면 사라지는 부드럽고 끊김 없는 회오리로 만들어 줘.
입자 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회오리를 멈춰 줘.A
클릭해 보세요
Confetti (컨페티)
다른 이름 Confetti burst, Celebration
알록달록한 종이 조각이 터져 나와 흩날리며 성공을 축하합니다.
쓰는 곳
구매 완료, 목표 달성
[적용할 곳]에 컨페티(Confetti) 축하 효과를 넣어 줘. 컨페티 버스트(confetti burst)라고도 불러.
알록달록한 작은 종이 조각이 버튼에서 빠르게 터져 나온 뒤, 뒤집히며 흩날려 떨어지다 사라지게 해 줘. 짧고 경쾌하게.
반복하지 말고 성공할 때마다 한 번만 터뜨리고, 페이지 클릭을 막지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 생략해 줘.Background & Ambient의 다른 모션
ABCDEFGHIJKL
안에서 스크롤해 보세요
Progressive Blur (프로그레시브 블러)
다른 이름 Gradient blur edge
가장자리로 갈수록 흐림 강도가 점점 세져 콘텐츠가 부드럽게 사라집니다.
쓰는 곳
스크롤 컨테이너 가장자리, 헤더
[적용할 곳]에 프로그레시브 블러(Progressive Blur) 가장자리를 넣어 줘. 그라디언트 블러 엣지(gradient blur edge)라고도 불러.
가장자리로 스크롤되는 콘텐츠가 딱 잘리는 선 없이, 점점 더 흐리고 부드러워지게 매끄럽게 이어지게 해 줘.
블러는 너머에 콘텐츠가 더 남아 있는 가장자리에만 보여 주고, 흐린 영역이 클릭이나 스크롤을 막지 않게 해 줘.Retro Grid (레트로 그리드)
다른 이름 Perspective grid, Synthwave grid
기울어진 원근 격자가 신스웨이브 바닥처럼 보는 사람 쪽으로 흘러옵니다.
쓰는 곳
레트로·미래풍 히어로
[적용할 곳]에 레트로 그리드(Retro Grid) 배경을 넣어 줘. 원근 그리드(perspective grid), 신스웨이브 그리드(synthwave grid)라고도 불러.
원근감 있게 뒤로 기울어진 격자 바닥이 보는 사람 쪽으로 일정하게 흘러오고, 지평선 쪽으로 서서히 사라지게 해 줘. 부드럽고 끝없이.
선이 튀지 않게 이음매 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 흐름을 멈춰 줘.A
Ripple Rings (리플 링)
다른 이름 Background ripple, Concentric ripples
동심원이 중심점에서 바깥으로 퍼져 나가며 사라집니다.
쓰는 곳
히어로 중앙 요소, 오디오·페어링 비주얼
[적용할 곳]에 리플 링(Ripple Rings) 효과를 넣어 줘. 배경 리플(background ripple), 동심원 물결(concentric ripples)이라고도 불러.
고리가 중심점에서 바깥으로 계속 퍼져 나가며 커질수록 사라지게 하고, 일정한 간격으로 하나씩 이어지게 해 줘. 느리고 꾸준하게.
가운데 요소는 제자리에 가만히 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.