Scene blocks

A block is a ready-made piece of an HTML scene: a lower third, a chart, a code panel, a chat card, an overlay, a background, or a transition. vfrey ships 38 of them. They are ingredients, not templates. The scene around them is still the agent’s own, and one or two blocks in a short is plenty. Blocks are for HTML scenes, which run on vfrey-framey or hyperframes. For a shader effect between two shots of your own, see Shader transitions instead. A React scene (index.tsx) gets a Fix: line, so write that piece in React instead. See Scenes.

Find a block

npx vfrey scene blocks
npx vfrey scene blocks --category chart
npx vfrey scene blocks --json

Each row is the block’s name, category, size, duration, and a short description. The categories are lower-third, chart, diagram, chat, code, overlay, background, title, and transition. --json prints the same list for a machine.

Add a block

npx vfrey scene add lt-clean-bar scenes/my-idea

This copies the block’s folder into the scene and prints a snippet. Paste the snippet’s <div> inside #root, after your own content so it paints on top, or before it for a background. Running it twice changes nothing. An edited copy is not overwritten unless you pass --force. --json prints the result for a machine. Each block can be mounted once per scene.

Fit modes

The snippet places the block in the 1080×1920 frame according to the block’s fit. You can move or resize it freely.

Fit	What it does
`native`	At most 1080 wide, centered as drawn.
`crop`	The 1920×1080 canvas at full size, with only its left 1080 pixels showing. For pieces anchored left or at the bottom, like lower thirds.
`scale`	The canvas is scaled to the frame width, as a band across the middle.
`cover`	Scaled to the frame height and cropped at the sides. For backgrounds and full-frame overlays.

Time it with `vfrey.block`

A block has its own timeline. Without a call it starts at second 0. Start it when you want it, after const tl = vfrey.timeline():

vfrey.onLine(1, (tl, t) => vfrey.block("#block-lt-clean-bar", t));
vfrey.at(3.5, (tl, t) => vfrey.block("#block-data-chart", t, 4));
vfrey.onWord(5, (tl, t) => vfrey.block("#block-snow", t));

The third argument is how long it plays. Without it, the block plays for its own length. Do not start a block after the film ends, which is the voice length plus 0.3 seconds.

Restyle it

A block is plain HTML, CSS, and a GSAP timeline. Replace its placeholder text with words from the script, and swap its colors and fonts for your scene’s. Keep it self-contained: no CDN script, no remote font or image, because a render has no network. Look at a frame with --frame a little after the cue, and one before it, to check the block shows when it should.

Credits

The blocks come from the Framey library, which is a fork of HyperFrames by HeyGen, and are licensed under Apache-2.0.

Getting Started

Commands

Concepts

Paid features

Teams and cloud

Reference

Resources

Scene blocks

Find a block

Add a block

Fit modes

Time it with `vfrey.block`

Restyle it

Credits

​Find a block

​Add a block

​Fit modes

​Time it with vfrey.block

​Restyle it

​Credits

Find a block

Add a block

Fit modes

Time it with `vfrey.block`

Restyle it

Credits