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:

   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