Create recipe and cooking videos with Framefields

Oct 31, 2026

A recipe video should make the next action clear. Show the texture a cook is aiming for, put quantities where they are needed and distinguish elapsed cooking time from the duration of the edit. Framefields can keep those details consistent across a cooking series.

Use your tested recipe as the source of truth. An assistant can organize the footage and labels, but quantities, temperatures and doneness cues should come from the recipe you actually cooked.

Plan a short recipe edit

For a 35-second roasted vegetable video, film the finished plate, ingredients, preparation, tray going into the oven and the final texture. Capture the labels on measuring tools or keep a written record alongside the footage.

Time	Shot	On-screen information
0–3 s	Finished dish	Recipe name
3–8 s	Ingredients	Exact quantities
8–17 s	Chop and season	Size and seasoning
17–25 s	Tray and oven	Tested temperature and duration
25–31 s	Finished texture	Doneness cue
31–35 s	Plate and recap	Where to find the full recipe

Shortening the edit does not shorten the cooking. A clear “roast for …” label helps viewers understand a jump cut over the oven stage.

Assemble the recipe

Use Layer.video for each action and Layer.text for ingredient quantities. Make a scene for each recipe stage and join them with cuts using Layer.sequence. Put the step label away from the hands and utensils so it does not cover the action.

Keep quantities in a recipe data file and format them into the scene. Do not ask the composition to guess amounts from the footage. If you offer metric and imperial variants, have both checked before exporting the versions.

Preserve useful kitchen sound where it supports the action. If there is narration, use a proofread SRT with Layer.caption. An ingredient card can remain visible longer than a spoken caption; it needs enough time to be read and followed.

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

Build a 35-second Framefields cooking video, 1080x1920 at 30 fps.
Use assets/recipe.json as the only source for quantities, temperature,
cooking duration and doneness. Use assets/shots.json for the footage.
Show the dish first, then ingredients, preparation, oven stage and
final texture. Keep hands and food clear of text. Distinguish edit
time from elapsed cooking time. Do not invent substitutions or
nutrition claims. Preview ingredient-heavy frames and playback with
sound before exporting the MP4.

Check the video while following the recipe

Pause at each stage and ask whether someone could perform the action using the information shown. Check all numbers against the written recipe, especially an oven temperature and its unit. Make sure a cut has not hidden a necessary step.

For content creation at scale, keep the visual theme shared and the recipe facts separate. You can reuse title cards and timing patterns while giving a more complicated recipe the extra screen time it needs.

See media layers for footage and caption options, or the tutorial workflow for longer lessons.