영상 레시피 전체로그인하고 원본 받기
등장·움직임 · 9초
3D로 기울어 들어와 뒤집히는 과정 카드
과정 소개 카드가 멀리서 기울어진 채 날아 들어와요. 빛 줄기가 앞면을 스치고, 카드가 휙 뒤집히면 뒷면에 «이렇게 배워요» 세 줄이 하나씩 나타납니다. 끝까지 살짝 흔들려 입체감이 남아요.
이럴 때 쓰세요
- 과정·특강 소개 영상
- 상세페이지 맨 위 움직이는 카드
- 수강 신청 안내의 «무엇을 배우나요» 장면
「여기만 고치세요」 칸
- 앞면태그·앞면제목·부제·앞면아래
- — 앞면 글자들. 제목은 열 글자 안쪽
- 큰숫자
- — 앞면 뒤에 흐리게 깔리는 큰 글자. 비우면 안 나옴
- 뒷면제목·뒷면목록
- — 뒤집힌 뒤 나오는 제목과 세 줄
- 색
- — 바탕·카드(앞면·강조)·글자·뒷면 색
파일을 건네며 AI에게 이렇게 말해 보세요
첨부한 HTML은 하이퍼프레임즈 영상 레시피야. 맨 아래 「여기만 고치세요」 칸만 바꿔 줘. 앞면태그: "4주 과정" 앞면제목: "키오스크 주문 연습" 부제: "카페 · 식당 · 병원 무인기까지" 앞면아래: "매주 화요일 오후 2시" 큰숫자: "04" 뒷면목록: ["화면 순서 익히기", "카드·현금 결제 해 보기", "실수했을 때 처음으로 돌아가기"] 색: { 바탕: "#101820", 카드: "#FFB547", 글자: "#101820", 뒷면: "#1F2A36" } 바꾼 다음 npx hyperframes render 로 mp4까지 뽑아 줘.
Claude Code·Codex·안티그래비티처럼 파일을 고치고 명령을 실행할 수 있는 AI에게 건네세요.
알아 두면 좋은 점
- 카드 색과 글자 색은 밝기 차이가 크게. 형광색 카드엔 거의 검정 글자가 잘 읽혀요.
- 뒷면은 세 줄이 가장 보기 좋아요. 네 줄이면 글자를 줄여야 해요.
원본 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