Create animated explainer videos with Framefields and AI

Oct 31, 2026

An explainer needs a visible chain of reasoning. A viewer should be able to connect the problem, the mechanism and the result. With Framefields, you can turn that chain into scene functions and revise one explanation without rebuilding the whole film.

This is a useful workflow for YouTube video creation when your subject is easier to draw than to film: an API request, a delivery route, a scientific process or a business metric.

Choose one question

For a first project, explain “What happens after you click Buy?” in 60 seconds. Gather the approved facts before asking an assistant to write narration. Decide which parts are simplified and keep the simplification consistent.

Time	Scene	Visual idea
0–6 s	The question	Button and receipt
6–20 s	Payment	Request moving between two boxes
20–38 s	Fulfillment	Order passing through three stages
38–52 s	Delivery	Route and status changes
52–60 s	Recap	All stages in one diagram

Record or generate the approved narration before locking timing. A script that sounds short on paper can need more time when spoken.

Compose diagrams that explain

Make a 1920×1080 composition at 30 fps. Use boxes, paths and text for the diagram, with one visual vocabulary: for example, a yellow dot always means the order. Put persistent identifiers on layers so feedback can refer to a specific element.

Animate the order between stages with LayerAnimation. Keep text stable while the viewer reads it. If you use Layer.chart, supply your real data and label its units; a chart should add evidence, not act as decoration.

Join scenes with Layer.sequence, deriving the composition length from totalFrames. Add the narration with Layer.audio and an explicit durationFrames. Match scene boundaries to the recorded explanation rather than stretching the voice to fit a preset template.

Use Codex, ChatGPT, Claude, Cursor or Grok Bot

You can use Codex, ChatGPT, Claude, Cursor, or Grok Bot to plan the edit and write Framefields TypeScript. In a coding environment with project and terminal access, ask the assistant to implement the brief and run the checks. In a chat-only environment, ask for the source files, save them locally and run them in your Framefields project. Rendering needs Node.js 22+ and a supported WebGPU environment; see getting started.

For Codex or Cursor, install the Framefields skills:

npx skills add gatewai-dev/framefields -a codex -a cursor

For Claude Code, use /plugin install framefields. With ChatGPT or Grok Bot, supply the agent reference, your brief and asset list; available execution tools depend on your environment. The workflow does not require a native integration in every assistant.

Create a project with npx framefields init my-video --install --pm npm, then work inside my-video. Use the generated font setup and put your source media under assets/. Run npm run typecheck, inspect comp.lint() findings, render selected frames and a grid, then run npm run preview before npm run render. The agent workflow covers inspection and QA. Check portrait layouts against the destination app’s current controls before uploading.

Prompt your assistant

Create a 60-second, 1920x1080, 30 fps Framefields explainer:
“What happens after you click Buy?” Use only assets/facts.md and
assets/audio/narration.wav. Use one yellow dot to represent the order
through payment, fulfillment and delivery. Keep each stage in a
separate scene function. Label every arrow in plain language.
Use assets/captions/narration.srt for subtitles. Flag facts that lack
support. Render a contact sheet and a preview with narration, then
wait for editorial feedback before the final export.

Review the reasoning as well as the render

Ask someone unfamiliar with the subject to explain the diagram back to you. If they misunderstand an arrow, changing its label may help more than adding another animation. Check that narration does not mention a stage before it is visible.

A Framefields project is especially useful when the same explanation needs new data or another language. Store narration, labels and timing as inputs. Allow different text lengths instead of forcing every translation into the original box.

For a software walkthrough with real interface footage, use the product demo workflow.