프롬프트 한 장으로 만드는 모션그래픽

가운데 작은 원에서 테두리만 있는 고리 3개가 0.8초 간격으로 커지며 사라지는 "신호" 모션그래픽을 만들어 줘. 고리는 scale 0.2→2.4, opacity 0.9→0 으로 2.4초 동안 ease-out. 가운데 원은 1.2초마다 살짝(1→1.12) 숨 쉬듯 커졌다 작아져. 색은 짙은 남색 배경에 하늘색 고리. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

높이가 다른 막대 5개가 바닥에서 왼쪽부터 0.12초 간격으로 솟아오르는 막대 그래프 모션그래픽을 만들어 줘. transform-origin 을 아래로 두고 scaleY 0→1 로 0.6초, 살짝 튕기는 cubic-bezier(.34,1.56,.64,1). 다 오른 뒤 1.2초 멈췄다가 함께 내려가며 반복(한 바퀴 3.2초). 마지막 막대만 강조색, 나머지는 같은 계열의 옅은 색. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

"유틸픽" 처럼 짧은 한글 제목을 글자마다 span 으로 나눠서, 각 글자가 아래 24px 에서 위로 올라오며 나타나는 키네틱 타이포그래피를 만들어 줘. 글자 사이 시차 0.08초, 한 글자 0.5초, ease-out. 글자가 다 나온 뒤 아래에 굵은 밑줄이 왼쪽에서 오른쪽으로 scaleX 0→1 로 그어지고, 1초 뒤 전체가 위로 흐려지며 사라졌다 반복(한 바퀴 3초). 글꼴은 굵은 고딕. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

가운데 원 하나와 그 둘레를 도는 점 3개를 만들어 줘. 점마다 보이지 않는 회전 틀(div)을 두고 그 틀을 rotate 0→360deg 로 돌려서 궤도를 그려. 궤도 반지름은 60·90·120px, 한 바퀴는 각각 2초·3초·4초 linear, 가장 바깥 점은 반대 방향. 궤도 선은 1px 점선 원으로 옅게. 따뜻한 주황·분홍 계열. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

가로로 늘어선 점 7개가 왼쪽부터 0.1초 시차로 위로 18px 튀어 올랐다 내려오는 물결 로딩 모션을 만들어 줘. 한 번 1.6초, ease-in-out, 올라갈 때 점이 1.25배 커지고 투명도도 0.5→1. 점 색은 왼쪽 초록에서 오른쪽 청록으로 조금씩 바뀌게. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

SVG 로 원과 체크 표시를 그리고, stroke-dasharray·stroke-dashoffset 으로 선이 그려지는 "완료" 모션을 만들어 줘. 먼저 원 배경이 scale 0→1 로 0.4초 동안 튀어나오고, 이어서 체크 선이 0.5초 동안 그려져. 1.2초 머문 뒤 함께 작아지며 사라졌다 반복(한 바퀴 2.6초). 초록 원에 흰 체크, 선 끝은 둥글게(stroke-linecap: round). 이 작품만 SVG 선 그리기를 허용해. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

카드 3장을 조금씩 어긋나게 겹쳐 놓고(뒤로 갈수록 translateY -10px, scale 0.94), 맨 앞 카드가 오른쪽으로 기울며 밀려나 사라지면 뒤 카드들이 한 칸씩 앞으로 나오는 카드 스택 모션을 만들어 줘. 카드마다 animation-delay 를 1.6초씩 다르게 줘서 계속 순환하게(한 바퀴 4.8초). 카드 안에는 둥근 사각형 아이콘 하나와 회색 글줄 두 개만. 그림자는 옅게. 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.

둥근 버튼 위로 비스듬한 흰 빛줄기가 왼쪽에서 오른쪽으로 스쳐 지나가는 모션을 만들어 줘. 버튼에 overflow: hidden 을 주고, 안에 기울인(skewX -20deg) 반투명 흰 그라데이션 막대를 두어 translateX -150%→250% 로 0.9초에 지나가게 한 뒤 1.9초 쉬어(한 바퀴 2.8초). 빛이 지나갈 때 버튼 전체가 1→1.03 으로 아주 살짝 커졌다 돌아와. 보라 버튼에 흰 글씨 "지금 시작". 조건: HTML 파일 하나에 CSS 만 써 줘(자바스크립트 없이). transform·opacity 만 움직여서 휴대폰에서도 끊기지 않게 하고, prefers-reduced-motion 이 켜져 있으면 움직임을 멈추고 마지막 장면을 보여 줘. 화면 가운데 400×300 영역에 놓고 무한 반복해 줘.