# Create recipe and cooking videos with Framefields

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](/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
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](/docs/guides/charts-and-media/) for footage and caption options, or the [tutorial workflow](/blog/tiktok-reels-youtube-shorts-tutorials/) for longer lessons.