# Create animated explainer videos with Framefields and AI

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](/docs/guides/animation/). 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](/docs/guides/scenes-and-transitions/), 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](/docs/getting-started/).

For Codex or Cursor, install the [Framefields skills](/docs/agents/install/):

```bash
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](https://framefields.dev/docs/llms.txt), 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](/docs/agents/workflow/) covers inspection and QA. Check portrait layouts against the destination app's current controls before uploading.

## Prompt your assistant

```text
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](/blog/saas-product-demo-videos/).