무료
Halden Solace · 16:9
이 Skill로 렌더링한 결과
막대·꺾은선 차트 v1.0.0
에디토리얼 스타일의 막대·꺾은선 차트가 한 달씩 쌓입니다. 막대가 솟고, 그 위로 선이 그려지며, 모든 값이 카운트업됩니다.
아직 평가 없음 0 다운로드
- 포맷
- 영상 · 16:9
- 길이
- 0:15
15초 분량의 신문 스타일 데이터 스토리텔링을 위한 무료 HyperFrames 블록입니다. 격자선과 월 레이블이 나타나고, 막대가 값과 함께 하나씩 솟은 뒤, 그 위로 퍼센트 레이블이 달린 선이 그려집니다. 위에는 세리프 헤드라인, 부제, 범례, 출처 줄이 놓입니다. 월, 두 데이터 계열, 축 범위, 레이블, 제목은 HTML에서 고칩니다.
2026년 11월 3일 업데이트
받게 되는 것
- 배경이 투명한 15초 길이 1920×1080 차트
- 순서대로 그려지는 막대, 선, 값 레이블
- 세리프 헤드라인, 범례, 출처 줄
잘 맞는 경우
- 성과와 성장 스토리
- 투자자·이사회 보고
- 설명 영상과 리포트
맞지 않는 경우
- 일곱 기간 이상
- 빽빽한 대시보드
이 Skill에 대하여
이렇게 말하세요
/data-chart 막대·꺾은선 차트를 만들어 줘. 제목은 "Halden Solace: pairs sold vs. repeat buyers", 6월부터 11월까지, 판매 켤레 수는 9천에서 2만 3천, 재구매 고객은 24%에서 44%.
함께 움직이는 두 숫자는 이야기가 됩니다. 판매량과 재구매 고객, 트래픽과 가입자, 매출과 마진처럼요. 막대·꺾은선 차트는 두 숫자를 차분한 에디토리얼 차트 하나에 담아 스스로 그려지게 해, 내레이션이 설명하기 전에 시청자가 흐름을 먼저 읽게 합니다.
작동 방식
- 요청: 6개월, 막대와 선의 값, 단위, 헤드라인을 에이전트에게 알려 줍니다.
- 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
- 렌더링:
npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다. - 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.
팁
- 레이블이 겹치지 않도록 선의 축 범위를 막대보다 높게 잡으세요.
- 부제와 범례에 단위를 적으세요.
- 배경이 투명하므로 알파 채널로 렌더링해 내 영상, 사진 또는 단색 배경 위에 얹으세요. 두 가지 명령어는 SKILL.md에 있습니다.
- 변수가 없는 블록입니다. 에이전트가 SKILL.md에 따라 HTML 안의 텍스트와 숫자를 직접 고칩니다.
오픈소스
HyperFrames 레지스트리 블록입니다. HeyGen과 HyperFrames 기여자들이 만들어(heygen-com/hyperframes) Apache License 2.0으로 공개했습니다. 다운로드에는 에셋이 포함된 블록과 Reelity가 작성한 SKILL.md가 들어 있어 에이전트가 바로 채우고 렌더링할 수 있으며, HyperFrames 자체는 npm에서 실행됩니다.
시작 전에 필요한 것
- 준비물
- 두 지표의 6개 기간 데이터, 단위, 헤드라인.
- 의존성
- Node.js 22 이상 — 필수 · FFmpeg — 필수
- 외부 비용
- 없습니다. HyperFrames는 무료 오픈소스이며 내 컴퓨터에서 렌더링됩니다.
- 마지막 테스트
- v1.0.0 —
사용자 리뷰
아직 리뷰가 없습니다. Skill을 설치하고 첫 평가를 남겨 보세요.
자주 묻는 질문
월 대신 다른 기간을 쓸 수 있나요?
네. 레이블은 스크립트 속 목록이라 분기, 연도, 주 모두 됩니다.
레이블이 겹치지 않게 하려면요?
선의 최댓값을 막대의 최댓값보다 낮게 잡으면 선이 막대 위쪽에 놓입니다. 저희 샘플도 이렇게 했습니다.
왜 무료인가요?
HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Halden Solace로 만든 샘플을 함께 올렸습니다.
