등장·움직임 · 7초

도장 쾅 + 별 터뜨리기

크게 기울어진 도장이 내려와 쾅 찍히고 좌우로 덜덜 떨려요. 그 순간 브랜드 색 별이 둘레로 튀었다가 사라집니다. 별 위치는 매번 똑같이 나오는 난수로 정해서, 영상을 몇 번 뽑아도 같은 그림이 나와요.

이럴 때 쓰세요

퀴즈 정답 공개
「참 잘했어요」 칭찬 화면
오늘의 핵심 한 마디

「여기만 고치세요」 칸

위글자: — 도장 위 안내 문장
도장: — 도장 안 글자 (짧을수록 힘 있어요)
도장색: — 테두리·글자 색
별개수 · 별색: — 튀는 별 개수와 색 목록

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

첨부한 도장 레시피로 퀴즈 정답 장면을 만들어 줘. 위글자: "정답은?" 도장: "③ 글자 크기" 도장색은 초록(#22989E)으로. 별은 20개로 늘려 줘.

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

알아 두면 좋은 점

Math.random() 은 쓰지 마세요. 프레임마다 값이 달라져 화면이 깜빡입니다. 파일 안 seeded() 처럼 «같은 씨앗이면 같은 값» 난수를 써요.
도장은 한 영상에 한두 번. 자주 찍으면 힘이 빠져요.

원본 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

이 연출을 쓴 스마택트 영상

내 생애 첫 AI 교실 1편 — AI, 챗GPT, 생성형 AI는 같은 말일까?