캐릭터 · 10초

AI 에이전트 여러 명이 함께 일하는 연결망

어두운 남색 바탕에 동그란 얼굴 노드들이 차례로 톡톡 나타나요. 노드 사이로 번지는 빛과 밝은 심, 두 겹 선이 하나씩 그려지고, 그 선 위로 빛 알갱이가 왔다 갔다 합니다. 마지막에 «여러 명이 함께 일해요» 같은 한 줄이 빛나며 떠요.

이럴 때 쓰세요

AI 에이전트·멀티 에이전트 개념 설명
강의에서 «역할 나누기» 협업 구조 보여 주기
팀 소개·운영진 소개 장면

「여기만 고치세요」 칸

노드이름: — 얼굴 아래 이름표. 6~8개가 보기 좋고, 개수에 맞춰 둥글게 자리 잡아요
색: — 노드마다 차례로 쓰는 네온 색 목록
바탕색: — [가운데, 가장자리] 두 색 원형 그라데이션
마지막문구: — 끝에 빛나며 뜨는 한 줄

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

첨부한 HTML은 하이퍼프레임즈 영상 레시피야. 맨 아래 「여기만 고치세요」 칸만 바꿔 줘. 노드이름: ["강사", "보조강사", "수강생 A", "수강생 B", "수강생 C", "AI 비서"] 마지막문구: "우리 반은 이렇게 연결돼 있어요" 바탕색: ["#2A1240", "#0C0614"] 바꾼 다음 npx hyperframes render 로 mp4까지 뽑아 줘.

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

알아 두면 좋은 점

이름은 다섯 글자 안쪽으로. 길면 옆 선과 겹쳐요.
노드가 9개를 넘으면 선이 너무 많아져요. 두 장면으로 나누세요.

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