01DATA02STORY03TIMELINE04MOTION05VIDEO
PlotbeatFor HyperFrames
스킬 설치 ↘

오픈소스 모션 템플릿 · v0.1 미리보기

데이터를프레임에 맞게

입력 · CSV / JSONSCRUB · ANY FRAMEBUILT FOR HYPERFRAMES

데이터를 편집 가능한 영상으로

AI 에이전트를 위해 만들고 HyperFrames로 구동합니다.

Give your AI agent a CSV, JSON, URL, API, or named public data source. Plotbeat retrieves or maps the data into a reusable, editable HyperFrames video project instead of an opaque export.

스킬 설치 ↘템플릿 보기 ↗GitHub ↗
single-line-story18 sec
01 · Signal NoirOne template shown in one of eight light and dark styles.
36ROWS MAPPED

여기서 시작

스킬 하나
어떤 데이터든

Plotbeat를 설치하고 파일을 첨부하거나 데이터 소스를 지정하세요. 검색, 템플릿 선택, 매핑, 속도, 검증, HyperFrames 프로젝트를 처리합니다.

Plotbeat 설치
$npx skills add DbgKinggg/plotbeat --skill plotbeat
샘플 프롬프트

$plotbeat를 사용해 FRED에서 지난 10년간 미국 월별 실업률 데이터를 가져오고, 시리즈와 조회 날짜를 명시한 뒤 빠르고 편집 가능한 HyperFrames 추세 영상으로 만들어 주세요. 시각 스타일 선택을 도와주고 렌더링 전에 확인받아 주세요.

하나의 문법 · 다양한 비주얼 시스템

느낌을
선택하세요

같은 데이터, 다른 연출.

직접 만들기 ↗
FilterEvery thumbnail is a real HyperFrames capture.
HyperFrames-rendered frame in the Signal Noir style
HyperFrames capture00:13.5 / 00:18.0

데이터 룸을
소개합니다

행 입력.
차트 프레임 출력.

Rows enter as structured cells. A visible timing machine turns them into motion, then releases finished chart frames.

CODE-NATIVE / 01Live data → timeline → chart frames

모션 문법 · 8 ready

플롯을
선택하세요

모션 문법을 고르세요.

Every template is a real HyperFrames composition with frozen sample data, a clear input contract, seek-safe motion, eight visual styles, and a polished finale.

LIBRARY / 01
01
Rendered motion preview of the Single-line Story HyperFrames template
렌더링 샘플

wide data · date + value

Single-line Story

A single time series grows across the frame with a live endpoint readout and a decisive final lockup.
  • Linear trace
  • Smooth trace
02
Rendered motion preview of the Multi-line Rank HyperFrames template
렌더링 샘플

long data · date + series + value

Multi-line Rank

Multiple time series grow together while a live legend glides through rank changes, followed by a final table.
  • Full field
  • Top five
03
Rendered motion preview of the Bar Race HyperFrames template
렌더링 샘플

long data · date + series + value

Bar Race

Ranked horizontal bars trade places over time while the scale and current-period readout update continuously.
  • Absolute values
  • Leader indexed
04
Rendered motion preview of the Stacked-area Story HyperFrames template
렌더링 샘플

long data · date + series + value

Stacked-area Story

Multiple time series accumulate into a flowing stacked-area composition with absolute and percentage views, live mix readouts, and a polished finale.
  • Absolute total
  • 100% composition
05
Rendered motion preview of the Scatter Journey HyperFrames template
렌더링 샘플

long data · date + series + x + y

Scatter Journey

Entities move through two-dimensional space over time with connected trails, live coordinates, and optional bubble sizing.
  • Connected trail
  • Bubble trail
06
Rendered motion preview of the Animated Map HyperFrames template
렌더링 샘플

location rows data · location + latitude + longitude + value

Animated Map

Locations pulse across a stylized world map while optional connection flows and live intensity readouts build the geographic story.
  • Location pulse
  • Connection flow
07
Rendered motion preview of the KPI Dashboard HyperFrames template
렌더링 샘플

metric rows data · metric + value + target + change

KPI Dashboard

A cinematic performance board stages multiple KPIs, target progress, and direction of change without feeling like a static dashboard.
  • Metric cards
  • Radial progress
08
Rendered motion preview of the Milestone Timeline HyperFrames template
렌더링 샘플

event rows data · date + title

Milestone Timeline

Events reveal across a continuous timeline with alternating chapter cards, a moving playhead, and a focused live milestone readout.
  • Continuous line
  • Chapter cards

한눈에 보이는 제작 과정

행 입력
비트 출력

DATA → STYLE → TIMELINE
01

Map the rows

The skill inspects dates, series, units, missing values, and the story your data can honestly support.

02

Pick a grammar

Start from a proven chart composition instead of rebuilding the same motion language every time.

03

Choose the style

Select a polished light or dark visual system, or build your own palette, typography, and composition tokens.

04

Preview in HyperFrames

Your data is compiled locally into an ordinary, editable HyperFrames HTML project.

05

Approve + render

Check arbitrary seeks, tune the pacing in Studio, then let HyperFrames produce the final video.

엔진은 계속 보입니다

HyperFrames
위에 구축

Remove HyperFrames and the product stops working. That is the point: the skill specializes the engine instead of quietly rebuilding its timeline, preview, or renderer.

CORE ENGINE
HyperFrames 알아보기 ↗HyperFrames GitHub ↗
AI skillIntent → template + mappings
Template systemComposition + chart runtime
Prepared dataCleaned and ready to animate
HyperFrames engineTimeline · Studio · Check · Render

모션 디렉팅

중요한 것을
말하세요

Choose the data and the narrative. The skill handles the repeatable setup, while you keep control of pacing, styling, and final Studio approval.

01추세 스토리

“$plotbeat를 사용해 FRED에서 지난 10년간 미국 월별 실업률 데이터를 가져오고 시리즈와 조회 날짜를 명시한 뒤 Studio Blueprint 스타일의 빠른 단일 라인 HyperFrames 영상으로 만들어 주세요.”

02순위 스토리

“$plotbeat를 사용해 cohorts.csv를 Paper Cut 스타일의 다중 라인 순위 영상으로 만들어 주세요. 시간에 따른 지역별 활성 사용자 순위를 매기고 상위 8개를 보여 준 뒤 깔끔한 최종 표로 마무리해 주세요.”

03지도 스토리

“$plotbeat를 사용해 USGS GeoJSON 피드에서 최근 30일간 규모 5 이상 지진을 가져오고 규모를 값으로 사용해 Signal Noir 스타일의 빠른 HyperFrames 애니메이션 지도로 만들어 주세요.”