HyperFrames: make a video without filming, with example

Get the example

• →Watch or download the MP4.
• →Read the transcript.
• →Download the HTML source.
• →Use the storyboard worksheet.

The supplied video and transcript are in French. They show a requested meeting date becoming an unsupported confirmation, then restore the missing uncertainty. The final screen directs viewers to the interactive verification challenge.

What HyperFrames does

The official introduction describes HTML compositions rendered into video. This does not validate the factual accuracy of AI-written text. The rendering guide explains frame-by-frame capture; inspect both preview and exported file.

An assistant can help adapt the composition from a checked storyboard. Text cards do not require a generated presenter, voice or filmed scene to teach this particular lesson.

Step 1: one mistake and a reference answer

Choose one idea: “a proposed date is not a confirmed date”. Do not compress an entire article into 16 seconds. The capsule motivates practice; the article retains detail, sources and exceptions.

Write the reference answer before animating. If the case is ambiguous, preserve that ambiguity rather than inventing certainty. Every scene should serve the same idea.

Step 2: use four scenes

Our example shows the source at 0–4 seconds, the incorrect summary at 4–8, the correction at 8–12 and an activity invitation at 12–16. This is the supplied composition’s timing, not an experimentally proven optimum.

Read the cards on a phone at actual size. Longer wording may require more time. Keep the key difference visible instead of adding effects that compete with it.

Step 3: adapt the HTML source

Extract the archive into a working folder and retain the original. Ask for a limited change: replace the case, preserve the four stages and keep the text readable. Use fictional examples rather than client notes for a prototype.

Adapt the supplied HTML composition into a 16-second vertical capsule with four scenes: source, error, correction and activity. Use fictional data, one message, large readable text and an explanation that works without sound. Do not generate paid media. List changes to verify before rendering.

Step 4: preview and export

The CLI reference documents preview, diagnostic and export commands. Check the installed version’s help before reusing options. In the LearnIA project, the actual render command was:

npx hyperframes@0.8.161 render docs/capsule-verification --output public/resources/capsule-verification.mp4 --fps 24 --quality standard --workers 1

After extracting the ZIP, adjust the input folder containing index.html and the output path for your machine. On PowerShell, use npx.cmd if the script policy blocks npx.ps1. Local rendering can take time and disk space. The supplied text cards do not require hosted rendering or a paid media-generation add-on.

Step 5: inspect the actual MP4

Check the beginning, scene changes and last screen. Look for clipped text, accents, reading time, factual changes and the displayed destination. Keep a transcript alongside the video so its information is also available as text.

The supplied case’s correction must preserve a proposed date and identify “confirmed” as unsupported. If the animation hides that distinction, it fails educationally even when the export is technically valid. Do not add invented approval or a client outcome claim.

Step 6: evaluate the next action

Link to a relevant activity with a stable campaign source when distribution is authorised. Observe visits, activity starts and completions, then qualitative feedback. Views alone do not establish learning or commercial demand.

Our video workflow comparison covers other approaches. Read the Lyria guide if there is an explicit audio need; begin with the silent version and add sound when it serves comprehension.