Make behind-the-scenes videos and short vlogs with Framefields

Oct 31, 2026

A behind-the-scenes video becomes a story when something changes. You try an approach, encounter a problem and show what happened next. Framefields can organize that story while leaving the real process visible.

TikTok’s 2026 outlook highlights process and unfiltered stories. For this workflow, use that as a creative direction: show a specific decision or setback instead of filming only the polished outcome.

Film the change

For a 40-second studio vlog, document the process of making a small product photograph. Capture the initial setup, the lighting problem, an adjustment and the result. Record a few seconds of room sound, too.

Time	Footage	Story beat
0–4 s	Failed shot beside final shot	Set up the question
4–12 s	First lighting setup	Establish the attempt
12–22 s	Glare or shadow problem	Show the obstacle
22–34 s	Changed light position	Explain the decision
34–40 s	Final photograph	Pay off the opening

A beginning-to-end record is useful even if the final edit opens on the result. Keep the order of cause and effect understandable.

Edit with a light touch

Create a 1080×1920 composition at 30 fps. Use Layer.video for the recorded moments and scene functions to separate each beat. Use short text labels for facts the footage cannot explain on its own: time of day, setup number or the adjustment you made.

Keep a visual distinction between a timestamp and spoken captions. Use the audio guide to add a quiet music bed while preserving room sound or narration. Set audio layer durations explicitly so the soundtrack covers the intended film.

Simple cuts often keep process footage believable. If a transition draws more attention than the change you are explaining, simplify it. Keep a few moments long enough to see hands, tools or expressions doing their work.

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 the story notes

Create a 40-second behind-the-scenes Framefields vlog, portrait,
1080x1920 at 30 fps. Use assets/shots.json: failed photo, initial
setup, glare problem, lighting adjustment, final photograph.
Use only real footage and the provided factual labels. Preserve
cause and effect. Add the supplied voiceover and clip-relative SRT.
Keep music below speech. Use cuts and restrained text entrances.
Show a contact sheet and playback preview before the MP4 export.

Keep the series recognizable

Store the opening label, date, scene notes and media paths in a per-episode record. Share the typography, spacing and closing frame across episodes. That gives the series a recognizable identity without forcing every day into an identical narrative.

Before export, ask whether the viewer can identify the obstacle and the decision that resolved it. If they cannot, another caption may be less useful than a clearer shot. Keep the final result on screen long enough to compare it with the opening.

For a closer comparison between two states, use the before-and-after guide.