Animated Beam (빔 애니메이션)
다른 이름 Connecting beam
두 요소를 잇는 선을 따라 빛나는 펄스가 이동합니다.
쓰는 곳
연동 구조도, 데이터 흐름도
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 빔 애니메이션(Animated Beam) 효과를 넣어 줘. 커넥팅 빔(connecting beam)이라고도 불러.
두 요소를 잇는 선을 따라 짧게 빛나는 펄스가 한쪽 끝에서 다른 쪽 끝으로 일정하게 이동하고 다시 시작하게 해 줘. 부드럽고 차분하게.
연결선 자체는 항상 보이게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 펄스를 멈춰 줘.비슷한 모션
Background Beams (배경 빔)
다른 이름 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
가늘게 빛나는 선이 경로를 따라 이동하고, 때로는 표면에 부딪혀 터집니다.
쓰는 곳
히어로 배경
[적용할 곳]에 배경 빔(Background Beams) 효과를 넣어 줘. 라이트 빔(light beams), 배경 라인(background lines)이라고도 불러.
흐린 곡선 경로들을 배경에 깔고, 그 위로 짧게 빛나는 줄기가 하나씩 차분하고 일정한 속도로 지나가게 해 줘.
빔들은 시차를 둬서 절대 한꺼번에 움직이지 않게 하고, 콘텐츠 뒤에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.A
Border Beam (보더 빔)
다른 이름 Shine border, Animated border, Glowing effect, Moving Border
밝은 하이라이트가 카드 테두리를 따라 돌아갑니다.
쓰는 곳
추천 카드, CTA
[적용할 곳]에 보더 빔(Border Beam) 효과를 넣어 줘. 샤인 보더(shine border), 무빙 보더(moving border)라고도 불러.
짧고 밝은 하이라이트가 카드 테두리를 따라 일정하고 느긋한 속도로 돌고, 튀는 부분 없이 반복되게 해 줘.
효과 때문에 카드 내용이나 크기가 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빔을 멈춰 줘.Animated Map Arcs (맵 아크 애니메이션)
다른 이름 World Map Animated Lines, Globe Arcs
지도나 지구본 위의 지점 사이로 선과 점이 움직입니다.
쓰는 곳
글로벌 규모를 보여 주는 비주얼
[적용할 곳]에 맵 아크 애니메이션(Animated Map Arcs)을 넣어 줘. 글로브 아크(globe arcs)라고도 불러.
점으로 된 지도 위 지점 사이에 곡선이 하나씩 차례로 그려진 뒤 목적지 쪽으로 거둬지고, 목적지에서는 부드러운 고리가 맥박치듯 퍼지게 해 줘. 차분하고 일정하게.
호들이 한꺼번에 움직이지 않게 시차를 두고, 반복은 끊김 없이 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.Motion Path (모션 패스)
다른 이름 Animate Along Path, Offset Path Animation
요소가 직접 정한 곡선 경로를 따라 이동하며, 경로에 맞춰 방향을 돌릴 수도 있습니다.
쓰는 곳
경로 위를 움직이는 비행기·점, 장식용 이동 요소
[적용할 곳]에 모션 패스(Motion Path) 애니메이션을 넣어 줘. 애니메이트 얼롱 패스(animate along path)라고도 불러.
작은 요소가 직접 정한 곡선 경로를 따라 느리고 일정한 속도로 이동하면서, 나아가는 방향을 바라보도록 돌게 해 줘.
반복이 튀지 않게 닫힌 경로를 쓰고, 경로는 고정 크기가 아니라 컨테이너 크기에 맞춰 늘고 줄게 해 줘.Background & Ambient의 다른 모션
Animated Gradient (그라디언트 애니메이션)
다른 이름 Gradient animation, Moving gradient, Background gradient animation
그라디언트 배경의 색이 천천히 바뀌거나 흐르거나 회전합니다.
쓰는 곳
히어로 배경, 버튼
[적용할 곳]에 그라디언트 애니메이션(Animated Gradient) 배경을 넣어 줘. 무빙 그라디언트(moving gradient), gradient animation이라고도 불러.
그라디언트 색이 영역을 가로질러 천천히, 부드럽게 끊김 없이 흘러가고, 루프가 다시 시작될 때 튀는 부분이 보이지 않게 해 줘.
위에 올라간 글자가 어느 색 위에서도 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.Animated Grid Pattern (그리드 패턴 애니메이션)
다른 이름 Flickering grid, Grid background
선이나 사각형으로 된 격자에서 칸들이 나타났다 사라지거나 깜빡입니다.
쓰는 곳
테크·SaaS 히어로
[적용할 곳]에 그리드 패턴 애니메이션(Animated Grid Pattern) 배경을 넣어 줘. 플리커링 그리드(flickering grid), 그리드 배경(grid background)이라고도 불러.
흐린 선으로 된 격자는 그대로 두고, 여기저기 흩어진 몇 칸만 서로 다른 때에 천천히 나타났다 사라지게 해 줘. 조용하고 은은하게, 한꺼번에 켜지지 않게.
콘텐츠 뒤에 두고 클릭을 가로채지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 깜빡임을 멈춰 줘.Aurora Background (오로라 배경)
다른 이름 Northern lights gradient
흐릿하고 부드러운 색 띠가 오로라처럼 콘텐츠 뒤에서 일렁입니다.
쓰는 곳
히어로 섹션
[적용할 곳]에 오로라 배경(Aurora Background)을 넣어 줘. 노던 라이츠 그라디언트(northern lights gradient)라고도 불러.
흐릿하고 부드러운 색 띠들이 콘텐츠 뒤에서 천천히 떠다니고 흔들리며, 서로 겹치고 섞여 북극광처럼 보이게 해 줘. 아주 느리고 몽환적으로.
위에 있는 글자는 잘 읽히게 하고, 부드럽게 돌아가도록 매 프레임마다 띠에 블러를 다시 걸지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.