Starfield (스타필드)
다른 이름 Stars background, Twinkling stars
우주 같은 어두운 배경 위에서 작은 별들이 반짝이거나 떠다닙니다.
쓰는 곳
우주·밤 테마 히어로
변형
- twinkling
- warp / fly-through
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스타필드(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)를 켜 두었으면 멈춰 줘.Particles (파티클)
다른 이름 Floating particles, Particle field
작은 점 여러 개가 배경을 떠다니며 서로 이어지거나 포인터에 반응합니다.
쓰는 곳
히어로·섹션 배경
[적용할 곳]에 파티클(Particles) 배경을 넣어 줘. 플로팅 파티클(floating particles), 파티클 필드(particle field)라고도 불러.
크기가 제각각인 작은 점들이 저마다의 속도로 부드럽게 이리저리 떠돌며 천천히 흘러가게 해 줘. 차분하고 가볍게.
느린 기기에서도 가볍도록 점 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Meteors (유성)
다른 이름 Meteor shower, Shooting Stars
빛나는 꼬리를 단 사선 줄기가 카드나 섹션을 가로질러 떨어집니다.
쓰는 곳
카드와 히어로 포인트
[적용할 곳]에 유성(Meteors) 효과를 넣어 줘. 유성우(meteor shower), 별똥별(shooting stars)이라고도 불러.
사라지는 꼬리를 단 작은 줄기 몇 개가 무작위 순간에 영역을 사선으로 빠르게 가로지르고 곧 사라지게 해 줘.
포인트로만 남도록 개수는 적게 하고, 영역 가장자리에서 잘리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Noise / Grain Texture (노이즈 / 그레인 텍스처)
다른 이름 Film grain, Noise background
미세한 점무늬 질감이 페이지를 덮고, 때로는 필름 그레인처럼 깜빡입니다.
쓰는 곳
그라디언트에 촉감 있는 깊이 더하기
[적용할 곳]에 노이즈 / 그레인 텍스처(Noise / Grain Texture) 오버레이를 넣어 줘. 필름 그레인(film grain), 노이즈 배경(noise background)이라고도 불러.
미세하고 옅은 점무늬 질감을 표면 위에 얹고, 필름 그레인처럼 작게 툭툭 깜빡이게 해 줘. 은은하게, 콘텐츠가 탁해 보일 만큼 강하지 않게.
클릭은 오버레이를 통과하게 하고, 질감은 매 프레임이 아니라 한 번만 만들고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춘 상태로 둬.Background & Ambient의 다른 모션
Vortex (보텍스)
다른 이름 Swirling particles
입자들이 소용돌이처럼 중심 주위를 나선형으로 돕니다.
쓰는 곳
극적인 히어로 배경
[적용할 곳]에 보텍스(Vortex) 배경을 넣어 줘. 소용돌이 파티클(swirling particles)이라고도 불러.
작은 입자들이 소용돌이처럼 중심점 주위를 나선형으로 안쪽으로 돌고, 가장자리에서 서서히 나타나 가운데에 다다르면 사라지는 부드럽고 끊김 없는 회오리로 만들어 줘.
입자 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회오리를 멈춰 줘.Wave Background (웨이브 배경)
다른 이름 Wavy background, Animated waves
겹겹이 쌓인 물결선이나 물결 모양이 가로로 일렁입니다.
쓰는 곳
섹션 구분선, 히어로 하단
[적용할 곳]에 웨이브 배경(Wave Background)을 넣어 줘. 웨이비 배경(wavy background), 애니메이티드 웨이브(animated waves)라고도 불러.
겹쳐진 물결 몇 개가 조금씩 다른 속도로 옆으로 흘러가면서 물처럼 겹치고 움직이게 해 줘. 느리고 부드럽게.
물결마다 튀는 곳 없이 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.A
B
Animated Beam (빔 애니메이션)
다른 이름 Connecting beam
두 요소를 잇는 선을 따라 빛나는 펄스가 이동합니다.
쓰는 곳
연동 구조도, 데이터 흐름도
[적용할 곳]에 빔 애니메이션(Animated Beam) 효과를 넣어 줘. 커넥팅 빔(connecting beam)이라고도 불러.
두 요소를 잇는 선을 따라 짧게 빛나는 펄스가 한쪽 끝에서 다른 쪽 끝으로 일정하게 이동하고 다시 시작하게 해 줘. 부드럽고 차분하게.
연결선 자체는 항상 보이게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 펄스를 멈춰 줘.