Claude로 모션 그래픽 만들기
발표 자료, 앱 소개 영상, 랜딩 페이지에 넣을 짧은 움직임을 Claude에게 코드로 만들어 달라고 할 수 있어요. 장면마다 미리보기와 프롬프트가 있고, [대괄호] 안만 바꿔서 Claude에 붙여 넣으면 HTML 파일 하나로 받아요.
01타자기 제목
제목이 한 글자씩 찍히고 커서가 깜빡여요.
어두운 배경 가운데에 "[보여 줄 문장]"이 한 글자씩 타자기처럼 찍히는 제목 애니메이션을 만들어 주세요. 글자는 [글자 색]이고 굵게, 끝에는 막대 모양 커서가 0.5초 간격으로 깜빡여요. 다 찍히면 [멈추는 시간]초 기다렸다가 지우고 처음부터 다시 해요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.02숫자 세기
큰 숫자가 0에서 목표까지 빠르게 올라가요.
0에서 [목표 숫자]까지 [걸리는 시간]초 동안 올라가는 숫자 카운터를 만들어 주세요. 처음엔 빠르고 끝에서 천천히 멈추게 해 주세요. 숫자는 천 단위 쉼표를 넣고, 아래에 작게 "[단위나 이름]"을 붙여요. 멈추고 2초 뒤 다시 0부터 세요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.03자라는 막대
막대그래프가 왼쪽부터 차례로 솟아요.
막대 [막대 개수]개짜리 그래프가 바닥에서 왼쪽부터 차례로 자라는 애니메이션을 만들어 주세요. 높이는 [값 목록]의 비율로, 막대 사이 지연은 0.12초예요. 가장 높은 막대만 [강조 색]이고 나머지는 흐린 색이에요. 다 자라면 잠시 멈췄다가 다시 해요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.04물결 선
가는 선 세 줄이 서로 다른 속도로 흘러요.
화면 아래쪽에 사인 곡선 [선 개수]줄이 옆으로 끝없이 흐르는 배경을 SVG로 만들어 주세요. 줄마다 속도와 투명도가 달라서 깊이가 느껴지게, 색은 [색 1]에서 [색 2]로 이어지게 해 주세요. 끊기는 곳 없이 이어져야 해요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.05궤도 점
가운데 원 둘레를 점들이 각자 다른 궤도로 돌아요.
가운데에 [가운데 글자나 기호]가 들어간 원이 있고, 둘레에 궤도 [궤도 개수]개가 있는 장면을 만들어 주세요. 궤도마다 점이 하나씩 다른 속도로 돌고, 안쪽일수록 빨라요. 궤도 선은 아주 흐리게, 점은 [점 색]으로 해 주세요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.06펼쳐지는 카드
겹쳐 있던 카드가 부채처럼 펼쳐졌다 모여요.
카드 [카드 개수]장이 한 자리에 겹쳐 있다가 부채처럼 펼쳐지고 다시 모이는 애니메이션을 만들어 주세요. 카드마다 [카드에 적을 짧은 낱말 목록]을 하나씩 적고, 펼칠 때 바깥 카드일수록 더 많이 기울어요. 움직임은 부드럽게 튕기듯 멈춰요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.07채워지는 체크리스트
할 일 네 줄이 위에서부터 하나씩 체크돼요.
체크리스트 [항목 목록]이 위에서부터 하나씩 체크되는 애니메이션을 만들어 주세요. 네모 칸이 [체크 색]으로 차면서 체크 표시가 그려지고, 글자에는 가운데 줄이 지나가요. 항목 사이 간격은 0.6초, 다 끝나면 모두 비우고 다시 해요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.08진행 링
원형 막대가 차오르며 가운데 퍼센트가 함께 올라가요.
원형 진행 표시가 0%에서 [목표 퍼센트]%까지 차오르는 애니메이션을 만들어 주세요. 링은 [링 색]이고 끝이 둥글어요. 가운데 숫자도 링과 같은 속도로 올라가고, 아래에 "[이름]"을 작게 적어요. 다 차면 링이 한 번 살짝 커졌다 돌아와요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.09반짝이는 밤하늘
작은 별들이 제각각 반짝이며 천천히 흘러가요.
canvas로 별 [별 개수]개가 있는 밤하늘을 만들어 주세요. 별마다 크기와 반짝이는 주기가 다르고, 전체가 아주 천천히 [흐르는 방향]으로 흘러요. 가끔 별똥별 하나가 대각선으로 지나가요. 배경은 [위쪽 색]에서 [아래쪽 색]으로 이어지는 그라데이션이에요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.10말풍선 대화
두 사람의 말풍선이 번갈아 톡톡 올라와요.
메신저처럼 말풍선이 번갈아 나타나는 대화 장면을 만들어 주세요. 대화 내용은 [대화 목록]이고, 왼쪽은 회색, 오른쪽은 [내 말풍선 색]이에요. 말풍선은 아래에서 살짝 튀어 오르며 나타나고, 다음 말풍선 전에 점 세 개가 깜빡이는 입력 중 표시가 잠깐 보여요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.