캐릭터 · 8초

가만히 서서 숨 쉬는 캐릭터 + 감정 표시

가만히 서 있어도 살아 있어 보이게, 숨쉬기·좌우 살랑·위아래 둥실 세 가지 아주 작은 움직임을 서로 다른 박자로 겹쳤어요. 머리 위에는 감정 표시가 차례로 떠오르고, 감정마다 깜짝 뛰기·고개 갸웃·하트 뿅뿅 같은 몸짓이 따라갑니다.

이럴 때 쓰세요

설명 영상 옆에 띄워 둘 마스코트
퀴즈 직전 «궁금하죠?» 분위기 만들기
수강 후기·감사 인사 장면

「여기만 고치세요」 칸

캐릭터그림: — 내 캐릭터 PNG 경로(배경 투명 권장). 비워 두면 파일 안에서 그린 동글이
몸색: — 동글이 몸 색
배경색: — 바탕 색
감정목록: — [표시, 색] 을 차례로. !·?·♥ 에는 몸짓이 붙고, 다른 글자도 넣을 수 있어요
문구: — 아래 한 줄. 비우면 안 나옴

파일을 건네며 AI에게 이렇게 말해 보세요

첨부한 HTML은 하이퍼프레임즈 영상 레시피야. 맨 아래 「여기만 고치세요」 칸만 바꿔 줘. 감정목록: [["?", "#4C7BF4"], ["!", "#FF7A45"], ["♥", "#FF4F86"]] 문구: "모르는 버튼이 나오면 손 들어 주세요" 배경색: "#DFF3E8" 몸색: "#7CCBA2" 바꾼 다음 npx hyperframes render 로 mp4까지 뽑아 줘.

Claude Code·Codex·안티그래비티처럼 파일을 고치고 명령을 실행할 수 있는 AI에게 건네세요.

알아 두면 좋은 점

감정은 2~4개가 알맞아요. 많으면 하나하나가 너무 짧게 지나가요.
움직임이 일부러 아주 작아요. 키우면 «대기»가 아니라 «춤»처럼 보여요.

원본 HTML

로그인하면 이 영상을 만든 HTML 파일을 그대로 받을 수 있어요.
회원가입은 무료예요.

로그인하고 원본 받기

내 컴퓨터에서 직접 돌려 보기

AI에게 맡기지 않고 직접 해 보려면 터미널에서 아래 순서대로 하세요. 하이퍼프레임즈(HyperFrames)는 HTML을 영상으로 바꿔 주는 무료 도구예요.

# 1) 처음 한 번만: Node.js 설치 (nodejs.org 에서 LTS)
#    + FFmpeg 설치 (맥: brew install ffmpeg / 윈도우: winget install Gyan.FFmpeg)
#    준비됐는지 확인: npx hyperframes doctor  → FFmpeg·Chrome 줄이 ✓ 면 OK
# 2) 영상 폴더 만들기
npx hyperframes init 내영상
cd 내영상
# 3) 받은 레시피 파일을 이 폴더의 index.html 자리에 덮어쓰기
# 4) 미리 보기 → 영상 뽑기
npx hyperframes preview
npx hyperframes render -o 결과.mp4