무료
Ember & Bun · 16:9
이 Skill로 렌더링한 결과
바 차트 레이스 v1.0.0
달이 바뀔 때마다 순위 막대가 자라며 서로 추월하고, 숫자가 커지면 축도 함께 늘어납니다.
아직 평가 없음 0 다운로드
- 포맷
- 영상 · 16:9
- 길이
- 0:12
작은 표를 바 차트 레이스로 바꾸는 무료 HyperFrames 블록입니다. 기간과 항목을 일반 텍스트로 붙여 넣으면, 막대가 기간마다 자라고 순위를 바꾸며 서로 추월하고, 옆의 숫자는 올라가며 축은 값에 맞춰 늘어납니다. 제목, 부제, 데이터, 막대 개수, 속도, 숫자 형식, 강조색은 변수입니다.
2026년 11월 3일 업데이트
받게 되는 것
- 1920×1080 MP4 차트 레이스, 기본 기간당 2초
- 추월, 올라가는 숫자 라벨, 자동으로 늘어나는 축
- 스프레드시트 도구 없이 일반 텍스트로 넣는 데이터
잘 맞는 경우
- 매출, 성장, 순위 이야기
- 연말 결산과 마일스톤 게시물
- 데이터 저널리즘과 수업용 설명 영상
맞지 않는 경우
- 수십 개 항목이나 아주 긴 기간
- 천천히 읽어야 하는 정확한 수치
이 Skill에 대하여
이렇게 말하세요
/bar-chart-race "Ember & Bun: burgers sold by month"라는 제목으로 6월부터 11월까지 바 차트 레이스를 만들어 줘. 값은 천 단위로, Double Stack 12, 18, 26, 35, 47, 61, Classic Cheese 22, 25, 28, 30, 32, 33, 그리고 메뉴 네 개 더. 강조색은 오렌지.
시간에 따라 바뀌는 순위는 그 자체로 이야기이고, 바 차트 레이스는 그 이야기를 몇 초 만에 전합니다. Bar Chart Race에 기간 몇 개와 항목 몇 개를 일반 텍스트로 넣으면, 상승과 추월, 선두를 깔끔한 에디토리얼 타이포그래피와 맨 앞 막대에만 쓰는 강조색 하나로 애니메이션합니다.
작동 방식
- 요청: 제목, 기간, 항목별 값을 일반 텍스트로, 단위와 함께 에이전트에게 알려 줍니다.
- 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
- 렌더링:
npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다. - 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.
팁
- 항목 4~8개, 기간 4~8개일 때 가장 잘 읽힙니다.
- 시청자가 지켜봤으면 하는 항목에 강조색을 주세요.
- $, k, % 같은 단위는 접두사와 접미사로 넣으세요.
- 기간 길이를 늘리면 더 차분하고 읽기 쉬운 레이스가 됩니다.
오픈소스
HyperFrames 레지스트리 블록입니다. HeyGen과 HyperFrames 기여자들이 만들어(heygen-com/hyperframes) Apache License 2.0으로 공개했습니다. 다운로드에는 에셋이 포함된 블록과 Reelity가 작성한 SKILL.md가 들어 있어 에이전트가 바로 채우고 렌더링할 수 있으며, HyperFrames 자체는 npm에서 실행됩니다.
시작 전에 필요한 것
- 준비물
- 기간과 항목별 값, 제목, 단위.
- 의존성
- Node.js 22 이상 — 필수 · FFmpeg — 필수
- 외부 비용
- 없습니다. HyperFrames는 무료 오픈소스이며 내 컴퓨터에서 렌더링됩니다.
- 마지막 테스트
- v1.0.0 —
사용자 리뷰
아직 리뷰가 없습니다. Skill을 설치하고 첫 평가를 남겨 보세요.
자주 묻는 질문
데이터는 어떤 형식인가요?
항목 하나에 한 줄입니다. 이름, 콜론, 그리고 기간 순서대로 쉼표로 구분한 값을 씁니다. 스프레드시트를 이 형식으로 바꾸는 일은 에이전트에게 맡기면 됩니다.
영상 길이는 얼마나 되나요?
기본은 기간당 2초라서 기간 여섯 개면 약 12초입니다. 기간 길이는 변수입니다.
왜 무료인가요?
HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Ember & Bun으로 만든 샘플을 함께 올렸습니다.
