HyperFrames
Build a HyperFrames motion system with a frame acceptance gallery
Design a small reusable motion-graphics project with fixed assets, named states and reviewable outputs; add Three.js only when spatial explanation benefits the viewer.
What you will learn
- Separate reviewed facts from motion and layout code.
- A frame gallery makes visual acceptance discussable.
- Use 3D only when spatial relationships improve the explanation.
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
- Separate reviewed facts from motion and layout code.
- A frame gallery makes visual acceptance discussable.
- Use 3D only when spatial relationships improve the explanation.
Turn a brand system into a small motion system
The README introduces frame.md as a bridge from web design rules to video composition. A useful practice project is to define a small set of title, caption and data-card scenes with shared typography, colors and spacing. This chapter proposes a project around those ideas; it does not claim an upstream validation dashboard already exists.
Keep factual content separate from visual behavior. Store a title, a caption and any numeric values as reviewed inputs, then feed them into the composition. A video generator should not silently invent a statistic because a chart layout looks better with another number. The content source remains authoritative even when an agent authors the animation.
Review states rather than only watching a loop
Create an acceptance gallery of selected frame times: an initial state, a completed entrance, a hold state and an exit boundary. Each tile should link to the composition revision and explain what must be visible. This makes missing text, unloaded fonts and surprising motion easier to discuss than an unannotated MP4 alone.
For asynchronous GPU scenes, use the inspected hf-seek completion contract when appropriate and retain a timeout outside the composition. Register pending work during the event callback, then let the promise represent completion. A frame gallery should show a failed capture as a failure, not quietly substitute an older successful image.
Use Three.js for a spatial question, not decoration
A Three.js scene can be justified when the lesson concerns spatial relationships, camera movement or a three-dimensional object. The inspected adapter supplies a time handoff and a loading-manager integration, but the scene still needs deterministic state derived from that time. An endlessly rotating object driven only by elapsed wall time does not establish repeatable capture.
Finish the small project when another author can change reviewed content, regenerate expected states, explain a failed check and export a traceable video. Later add more scenes, interactive previews or cloud execution as separate capabilities. Keep a static diagram or selected-frame view available when animation would otherwise hide the explanation.
Implementation steps
- 1
Define a small set of shared visual rules and scene types.
- 2
Create reviewed input data and named frame states.
- 3
Capture and review those states with revision links.
- 4
Add spatial animation only for an explicit learning objective.
Copy-ready example
const frameChecks = [
{ time: 0, expected: "background ready" },
{ time: 1.8, expected: "title entrance complete" },
{ time: 3, expected: "title held and readable" },
{ time: 5, expected: "title no longer scheduled" },
];
console.table(frameChecks);
// Proposed acceptance data; the application must implement capture and review.Frequently asked questions
Is the frame gallery included in HyperFrames?
This chapter proposes an application-level review project. The converter, adapters and CLI are upstream capabilities; the gallery and acceptance rules are additions.
When is Three.js worth the extra complexity?
When a spatial object, relationship or camera movement is part of what the viewer must understand, and the scene can be controlled by explicit time.
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