01DATA02STORY03TIMELINE04MOTION05VIDEO

Modèles de motion open source · Aperçu v0.1

Les données au rythmede chaque image

ENTRÉE · CSV / JSONSCRUB · ANY FRAMEBUILT FOR HYPERFRAMES

Transformez vos données en vidéo éditable

Conçu pour votre agent IA. Propulsé par 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.

single-line-story18 sec
01 · Signal NoirOne template shown in one of eight light and dark styles.
36ROWS MAPPED

Commencez ici

Une skill
Toutes les données

Installez Plotbeat, joignez un fichier ou indiquez la source. La skill gère la récupération, le modèle, le mapping, le rythme, la validation et le projet HyperFrames.

Installer Plotbeat
$npx skills add DbgKinggg/plotbeat --skill plotbeat
Exemple de prompt

Utilisez $plotbeat pour récupérer sur FRED les données mensuelles du chômage aux États-Unis sur les dix dernières années, citez la série et la date de consultation, puis transformez-les en une vidéo de tendance HyperFrames rapide et modifiable. Aidez-moi à choisir le style visuel et demandez mon accord avant le rendu.

Une grammaire · plusieurs systèmes visuels

Choisissez
l’ambiance

Mêmes données. Autre direction.

FilterEvery thumbnail is a real HyperFrames capture.
HyperFrames-rendered frame in the Signal Noir style
HyperFrames capture00:13.5 / 00:18.0

Découvrez le
métier à données

Lignes en entrée.
Images en sortie.

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

Grammaires de mouvement · 8 ready

Choisissez
l’intrigue

Choisissez une grammaire de mouvement.

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
Exemple rendu

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
Exemple rendu

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
Exemple rendu

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
Exemple rendu

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
Exemple rendu

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
Exemple rendu

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
Exemple rendu

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
Exemple rendu

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

Un parcours de production visible

Lignes en entrée
Beats en sortie

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.

Le moteur reste visible

Construit sur
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
AI skillIntent → template + mappings
Template systemComposition + chart runtime
Prepared dataCleaned and ready to animate
HyperFrames engineTimeline · Studio · Check · Render

Dirigez le mouvement

Dites ce qui
compte

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

01Récit de tendance

Utilisez $plotbeat pour récupérer sur FRED les données mensuelles du chômage aux États-Unis sur les dix dernières années, citez la série et la date de consultation, puis créez un récit HyperFrames rapide à une seule courbe dans le style Studio Blueprint.

02Récit de classement

Utilisez $plotbeat pour créer depuis cohorts.csv une vidéo de classement multiligne dans le style Paper Cut. Classez les régions par utilisateurs actifs au fil du temps, affichez les huit premières et terminez par un tableau final épuré.

03Récit cartographique

Utilisez $plotbeat pour récupérer dans le flux GeoJSON de l’USGS les séismes de magnitude 5 ou plus des 30 derniers jours, utilisez la magnitude comme valeur et créez une carte HyperFrames animée et rapide dans le style Signal Noir.