Make workout videos with exercise labels and interval timers

Oct 31, 2026

A follow-along workout needs dependable timing and a clear view of the movement. Framefields can put exercise labels, progress indicators and countdowns around your recorded demonstration, with each interval defined in frames.

The same approach works for a practice drill or a movement tutorial. Keep the workout plan and coaching cues supplied by the instructor; the editing assistant’s job is to present them accurately.

Design a one-minute interval

Start with one instructor-approved exercise and two recorded work intervals. At 30 fps, a 20-second work interval lasts 600 frames and a 10-second rest lasts 300 frames. Decide whether your timer shows the time remaining at the start of each second or counts down another way, then use that convention throughout.

Time	Scene	Overlay
0–5 s	Demonstration	Exercise name and supplied cue
5–25 s	First work interval	20-second countdown
25–35 s	Rest	Next interval label
35–55 s	Second work interval	20-second countdown
55–60 s	End	Session complete

This is an editing example, not an exercise prescription. Use the actual approved plan for the final video.

Make the timing explicit

Build a 1080×1920 composition and keep the instructor’s full movement in frame. A portrait crop that cuts off feet or hands defeats the point of the demonstration. Use fit: "contain" when preserving the entire source frame is more useful than filling the canvas.

Use Layer.text for the exercise name and an overlay derived from the current interval’s local frame for the countdown. Use signals for a progress indicator; the data should come from the same interval durations as the timer so they cannot drift apart.

Separate work, rest and instruction scenes with Layer.sequence. Make hard cuts at interval boundaries unless you deliberately account for transition overlaps. A crossfade should not accidentally shorten a promised work period.

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.

Ask your assistant to build it

Build a 60-second Framefields workout layout, 1080x1920, 30 fps.
Use assets/workout.json for a 5-second demo, 20-second work,
10-second rest, 20-second work and 5-second ending. Use only the
supplied instructor footage and approved labels. Keep the complete
movement visible. Derive countdown and progress from the same frame
counts. Use cuts so intervals retain their exact lengths. Inspect
frames before and after every interval boundary and preview sound.
Do not invent coaching cues or make fitness outcome claims.

Verify the boundaries

Inspect frames 149 and 150, 749 and 750, 1049 and 1050, and 1649 and 1650 for the example above. Those pairs straddle the scene changes at 30 fps. Also play the video continuously to catch a late sound cue or a distracting timer jump.

Once one interval works, store the exercise names, clip paths, durations and approved cues in a playlist. Reusing that data keeps the timer aligned with the instruction even when the order changes.

For a shorter instructional cut, use the vertical tutorial guide.