Make tutorial videos for TikTok, Reels and YouTube Shorts

Oct 31, 2026

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

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.

Give your assistant this brief

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 when the lesson needs diagrams rather than a screen recording.