Build before-and-after transformation videos in Framefields

Oct 31, 2026

A before-and-after video works when the viewer can compare the same thing under understandable conditions. Match the viewpoint, show the important process and explain what changed. Framefields can turn that into a repeatable reveal or split-screen comparison.

This format fits room makeovers, repaired objects, design revisions and restored furniture. It also works as a filmmaking exercise: the impact comes from matching shots as much as from the transition between them.

Record comparable states

For a 24-second desk makeover, capture the messy and finished desk from the same camera position. Lock exposure where possible, and note any lighting or equipment changes. Record two process clips that explain how you reached the result.

Time	Shot	Message
0–3 s	Before and after together	Establish the comparison
3–7 s	Before	Show the starting point
7–15 s	Two process steps	Explain the work
15–21 s	Matched after shot	Reveal the result
21–24 s	Labeled comparison	Let viewers inspect it

A costume or decoration transformation is a seasonal variation. Google Trends featured Frightgeist 2026 on its homepage when checked on October 31; check local timing before borrowing a seasonal angle.

Build the comparison

Use the same dimensions and crop for the before and after media. Make two full-frame scene boxes and use Transition.wipe for a moving reveal, or place both images in labeled side-by-side boxes for a static comparison. The scene guide explains the supported transitions.

Keep the “before” and “after” labels visible during the comparison. A dramatic grade on only the final shot can obscure what the work actually changed. If lighting differs, explain that difference rather than treating it as part of the result.

Store media paths, labels, durations and the change description as inputs. You can then reuse the same composition for the next makeover without rebuilding its typography and timing.

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 the assistant

Build a 24-second Framefields desk transformation at 1080x1920,
30 fps. Use the matched before and after images plus two supplied
process clips. Start with a labeled comparison, show the process,
then make a wipe reveal and hold the final comparison for 3 seconds.
Use identical crops and neutral treatment for both states.
Use assets/change-notes.md for factual labels. Do not exaggerate
results or generate a replacement “before.” Inspect the reveal's
start, middle and end, then show a preview before export.

Inspect the transition carefully

At the middle of the wipe, the object should stay aligned. If it jumps, fix the crop or choose a split screen instead. Check that the final frame gives enough time to see the result without replaying the video.

For design transformations, annotate the actual decisions: contrast, spacing or navigation. For DIY, show the action that produced the result. A visible process makes the video useful beyond the surprise of its reveal.

To explain a longer process, expand the sequence into a tutorial.