데이터·도형 · 8초

네온 진행 링 세 개

어두운 남색 바탕에 링 자리가 하나씩 톡 나타나고, 네온 선이 12시 방향에서 시계 방향으로 차오릅니다. 가운데 퍼센트 숫자가 선과 함께 굴러 멈추고, 아래 이름이 붙은 뒤 세 링이 차례로 한 번 더 반짝입니다.

이럴 때 쓰세요

수료율·만족도·출석률 같은 성과 지표를 보여 줄 때
기관 결과 보고나 제안서 영상의 숫자 장면
과정 소개 영상의 「믿을 만한 숫자」 한 컷

「여기만 고치세요」 칸

제목 · 작은제목: — 맨 위 큰 글과 작은 글
링: — [이름, 퍼센트(0~100), 네온 색] 목록. 2~4개

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

이 레시피 파일로 우리 과정 성과 영상을 만들어 줘. - 제목: 2026 가을학기 AI 활용반 - 작은제목: 수강생 28명 · 8주 과정 결과 - 링: 출석률 95 #3DF5FF, 만족도 98 #FF4FD8, 과제 완성 81 #B6FF3B

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

알아 두면 좋은 점

네온 색은 밝고 쨍한 색(하늘·분홍·연두·노랑)이 어두운 바탕에서 잘 빛나요
링이 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