# Make tutorial videos for TikTok, Reels and YouTube Shorts

A useful tutorial answers one question completely. Start with the finished result, show the actions that produce it, and leave enough time to read each step. Framefields lets you keep that structure in TypeScript so the next lesson uses the same layout, typography and timing rules.

If you usually make cuts and add text in CapCut, think of this project as a reusable version of that edit: footage becomes video layers, instructions become text layers, and timing becomes frame numbers. You can still make creative decisions in a preview.

## Plan a 30-second lesson

Use a simple example: showing someone how to organize a messy desktop into three folders. Record the actual process first. A promise such as “Find any download in three clicks” gives the viewer something specific to judge.

| Time | Picture | Message |
| --- | --- | --- |
| 0–3 s | Finished, organized desktop | Show the result |
| 3–10 s | First action | Create three folders |
| 10–18 s | Second action | Sort by file type |
| 18–26 s | Third action | Save the search |
| 26–30 s | Repeat the result | One sentence recap |

These are editing targets, not a platform rule. If the task needs more explanation, make a longer lesson instead of speeding up every action.

## Build the edit in Framefields

Start at 1080×1920 and 30 fps. Put the screen recording in `assets/footage/`, then make a scene function for each step. Use `Layer.video` for the recording and `Layer.text` for the instruction. A portrait canvas can make desktop interfaces tiny; crop to the relevant control or put a readable detail view above the step label.

Use [Layer.sequence](/docs/guides/scenes-and-transitions/) to join the scenes with cuts. At 30 fps, a seven-second scene lasts 210 frames. Keep step numbers in the same place so viewers can follow the progression without searching the screen.

For spoken instructions, prepare and proofread an SRT file and add it with `Layer.caption`. Captions and step labels have different jobs: captions follow speech; the step label tells the viewer where they are. Framefields can display the supplied SRT; this workflow does not assume automatic transcription.

## 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.

## Give your assistant this brief

```text
Build a 30-second Framefields tutorial at 1080x1920, 30 fps.
Use assets/footage/desktop-demo.mp4 and the approved steps in
assets/steps.json. Show the completed result first, then three
numbered steps, then a recap. Crop each scene to its relevant control.
Use readable text and the supplied SRT. Keep footage audio audible.
Create scene functions and export buildFilm(). Inspect frames around
each cut and show a preview before rendering the final MP4.
Do not invent interface actions or omit a necessary step.
```

## Check what a beginner actually sees

Watch once with sound off and once with sound on. Pause at the most complicated step: the control, cursor and instruction should all be readable on a phone. Render frames immediately before and after cuts to catch a label appearing on the wrong action.

For the next lesson, change the clip, step text and scene durations. Keep those inputs separate from the visual theme. You get a consistent series without treating every tutorial as a new video production project.

Continue with [a longer animated explainer](/blog/animated-explainer-videos/) when the lesson needs diagrams rather than a screen recording.