# Plotbeat

Build deterministic, editable data-visualization videos from local CSV/JSON or data...

- Repository: https://github.com/Unclecheng-li/AI_Animation (1689 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Unclecheng-li/AI_Animation --skill plotbeat -g -a claude-code -y`
Codex: `npx skills add Unclecheng-li/AI_Animation --skill plotbeat -g -a codex -y`
Cursor: `npx skills add Unclecheng-li/AI_Animation --skill plotbeat -g -a cursor -y`
Gemini CLI: `npx skills add Unclecheng-li/AI_Animation --skill plotbeat -g -a gemini-cli -y`

## Description

Build deterministic, editable data-visualization videos from local CSV/JSON or data fetched from a user-approved URL, API, or public source by adapting native HyperFrames templates and selectable visual-style presets. Requires the HyperFrames AI skill. Use when a user wants a line-chart story, multi-series ranking, animated chart, data-driven motion graphic, or a new reusable data-video template in HyperFrames. This is a HyperFrames templating workflow, not a standalone video generator or renderer.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Plotbeat

Turn user-supplied data into a local HyperFrames composition. Start from a proven template, compile the data before playback, then use HyperFrames for timing, preview, validation, and rendering.

## Require HyperFrames

Treat this as a fail-closed dependency gate. Before acquiring data, listing templates, scaffolding, editing, previewing, validating, or rendering:

1. Resolve and read the installed `hyperframes` AI skill.
2. If it is unavailable, stop and ask the user to install it with:

   ```bash
   npx skills add heygen-com/hyperframes --all
   ```

3. Do not approximate the missing skill from general knowledge, use Plotbeat as a standalone generator, or continue with only the HyperFrames npm CLI.
4. After the dependency is installed, resume through the `hyperframes` skill, then use Plotbeat for the data-video template workflow.

## Preserve the product boundary

- Treat HyperFrames as the composition and rendering engine.
- Start through the main `hyperframes` skill and load its `hyperframes-core`, `hyperframes-animation`, and `hyperframes-cli` guidance as required.
- Do not add a competing render loop, video encoder, scene scheduler, or standalone animation runtime.
- Keep the output editable as an ordinary HyperFrames HTML project.
- Use one paused, seek-safe timeline per scene. Derive visual state from timeline progress.
- Keep the bundled music as a separate local `<audio>` element. Let HyperFrames own playback and use the registered GSAP timeline for volume fades; never call `play()`, `pause()`, or set `currentTime` yourself.
- The bundled master covers the quick, standard, and deliberate presets (up to 56 seconds). For a longer exact duration, resolve or ingest a longer local BGM asset before previewing.
- Compile CSV or JSON into a frozen local `generated/data.js`. Do not fetch live data during playback.
- Do not use `requestAnimationFrame`, timers, D3 transitions, or nondeterministic randomness as playback clocks.

## Acquire the dataset

The rest: https://github.com/Unclecheng-li/AI_Animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/single-line-story/SKILL.md