HyperFrames
HyperFrames quickstart: verify a six-second title before adding effects
Use the documented CLI workflow, understand clip attributes and a paused timeline, and check specific timestamps before attempting a richer video.
What you will learn
- Begin with text and a background to isolate timing.
- Clip start, duration and track attributes do not load missing assets.
- Inspect the exported file as well as the browser preview.
Before you start
- Basic HTML, CSS and JavaScript
- Node.js 22+ and FFmpeg for the local exercise
Explain the chapter boundary and use its checklist to evaluate a repeatable video workflow.
Key takeaways
- Begin with text and a background to isolate timing.
- Clip start, duration and track attributes do not load missing assets.
- Inspect the exported file as well as the browser preview.
Start with the local CLI workflow
The README lists Node.js 22 or newer and FFmpeg as requirements. Its manual workflow creates a project with hyperframes init, starts a preview and renders an MP4. Begin there with a short title composition. Agent skills are an alternative authoring aid, not a prerequisite for understanding the file that will be rendered.
The npx commands below resolve package versions at execution time. Record the resolved version and environment when the exercise succeeds. Review the generated project and install prompts before running it; this chapter documents the workflow but does not claim a video was rendered in the reader’s environment.
Give each clip an explicit place in time
The README example places a six-second video on track zero, a title starting at second one for four seconds on track one, and audio on track two. A composition identifier ties the root to its registered animation timeline. These attributes describe scheduling; they do not supply missing media files or guarantee that a font has loaded.
For your first variation, use text and a fixed background before adding external footage or music. Inspect the composition at the start, during the title entrance and just before its end. Write down what should be visible at each time. This makes a timing error easier to distinguish from a missing asset.
Keep animation under the renderer’s clock
The documented GSAP pattern creates a paused timeline and stores it in window.__timelines under the composition ID. A title animation can then be positioned at a known time instead of advancing independently. If you add another animation library, use the corresponding seekable adapter contract rather than assuming requestAnimationFrame alone is sufficient.
After previewing the intended states, render and inspect the exported file as well. Browser preview and final encoding can expose different problems, including font timing, audio duration and missing media. Save the source, environment and acceptance timestamps together so another developer can reproduce the exercise.
Implementation steps
- 1
Check Node.js and FFmpeg in the intended environment.
- 2
Initialize a small project using the documented CLI.
- 3
Preview known timestamps in a six-second title scene.
- 4
Render, inspect the exported file and record versions.
Copy-ready example
node --version
ffmpeg -version
npx hyperframes init my-video
cd my-video
npx hyperframes preview
# Stop the preview process when finished, then render.
npx hyperframes renderFrequently asked questions
Do I have to install agent skills?
No. The README also documents a manual CLI route. Skills help author compositions but do not replace understanding their timing and assets.
Why can preview look correct while export fails?
Capture and encoding involve additional environment and readiness conditions. Check fonts, media availability, animation state and audio in the actual export.
Sources
- Fixed READMESource checked 2026-09-07
- GSAP adapterSource checked 2026-09-07
- Seek dispatcherSource checked 2026-09-07
- Three.js adapterSource checked 2026-09-07
- GSAP testsSource checked 2026-09-07
- Seek dispatcher testsSource checked 2026-09-07