HeyGen's HyperFrames gives video creators an editable starting point: a scene built with HTML, CSS and JavaScript, previewed in a browser and rendered to MP4. Its Canopy Part Title block makes that approach easy to understand. Leaves move across the frame, part around a headline, then introduce a second title. The scene comes with source code and controls for making your own version.
For teams producing product videos, the interesting idea is repeatability. A title sequence can become part of a production workflow, with text and visual settings that can be changed between versions. Here is what this particular block offers, and where we would put it in a demo.
What HyperFrames brings to video creation
The official HyperFrames repository describes a framework for composing video with web technologies. Timing and tracks are expressed in HTML, animations can be evaluated at a chosen point in time, and the result can be exported as a video. The project also provides instructions for coding agents to work with compositions.
That gives an editor or developer a concrete artifact to inspect and revise. Changing a headline can be a targeted edit to an existing composition. A useful production habit follows: keep the reviewed scene, its text and its settings together, so the next version starts from something the team understands.
Canopy Part Title in detail
The block's official guide describes a 12-second, 1920 × 1080 composition at 30 frames per second. Textured leaves cross a scene with shallow depth of field, reveal the first title, then move through another reveal for the second. A few leaves remain in gentle motion around the text.
The catalogue exposes eleven variables. These include both headlines, font, weight, size, letter spacing, background colour and four controls for the leaves. For example:
| Control | What it changes |
|---|---|
headline1 and headline2 |
The two pieces of title text |
leafCount |
Leaves per sweep, with a declared range of 40–320 |
stayCount |
Leaves left behind after a sweep |
sweepSpeed |
The speed of the sweeping movement |
retainedBreeze |
The movement of the remaining leaves |
These are settings declared in the published composition source. The most useful first edit is usually the copy: choose two short lines whose relationship is clear before adjusting the animation.
Try the block in a small project
The documented workflow starts with a HyperFrames project and adds the composition from the catalogue:
npx hyperframes init my-video
cd my-video
npx hyperframes add canopy-part-title
Next, mount the installed block in the project's host index.html, following the block guide, and run npx hyperframes preview. Adding the files and placing the scene in the project are separate steps.
The project README lists Node.js 22 or later and FFmpeg as prerequisites and documents npx hyperframes render for exporting a project. Change the two titles and inspect the complete sequence before adding it to a longer video.
Two examples rendered with the HyperFrames API
We rendered the two silent examples below using the official HyperFrames producer API. Both use Canopy Part Title, with different headlines and visual settings. They illustrate title sequences; the product workflow would follow in a separate screen recording.
These web previews use a 640 × 360 adaptation of the composition at 15 frames per second, preserving its complete 16:9 frame and 12-second duration.
The generation uses the producer's createRenderJob and executeRenderJob functions, passing headline and animation variables to the same composition. This makes the relationship between the source and the rendered variants explicit.
Where we would use it in a product demo
For a dense software workflow, we would try it as a chapter break. Keep the actual interface visible during the explanation, then use the title sequence to mark a meaningful change of task. Watch the complete cut to decide whether twelve seconds earns its place. A short demo may need a much simpler introduction.
Our SaaS demo planning checklist starts with one viewer, one task and one useful outcome. Apply the same test to motion design: the title should help someone understand the next scene. Review long headlines, contrast and readability at the size where the video will actually play.
HyperFrames is worth exploring as a way to make motion compositions editable and reusable. Canopy Part Title is a tangible example to start with. For a DemoBro video, choose the product story first, then decide whether this kind of introduction makes that story easier to follow. Explore the DemoBro examples to plan the explanation that follows the title.