Make your first
motion video.

A little timing changes everything.

A box splits into four pieces. The pieces spring back together. Then the same movement plays again, this time with sound. That’s the whole example—and enough to explore three things that make a motion video feel deliberate.

The skill gives your coding agent instructions and tools for making a short narrated video. You can open the finished example, see how it works, and change it. Start with a colour or a shape before trying a new script.

Start with the words you actually hear.

Write the narration, record it, then build the movement around the recording’s word timings. A guessed pause in a script is different from the pause a voice actually takes.

In this example, “split” is the cue for the box to separate. The word and the action explain the same thing at the same moment. The download includes the narration and its word timings, so you can try this without a voice account.

For a new script, generate the voice first and ask your agent to use its actual word alignment. If the recording changes, update the timings too.

Give the movement something to say.

The pieces separate so you can see them. They spring back so you can feel them become one object again. Each movement follows the idea being spoken.

Try asking your agent to change the return from a spring to a gentle settle. Keep the narration and the destination the same. Watch how much the feel changes when you alter only the way the pieces travel.

Keep the same word cues. Make the pieces return with a soft settle instead of a spring. Show me the difference.

Then compare the silent and sounded versions in the demo. The contact sound marks the moment the pieces meet. It doesn’t need to fill every second; the quiet around it helps you notice it.

Your first render, step by step.

1. Download and unzip the starter.

   Get the free ZIP above, then extract the motion-video-starter folder.

2. Open the folder with your coding agent.

   Use Claude Code or Codex in that folder. Give it this prompt:

   Read SKILL.md. Render the bundled example first, then help me make my own short motion video.

   Copy

3. Let it check your setup.

   The renderer needs Node.js 22 or newer, FFmpeg, and Playwright’s Chromium. The agent can install the pinned JavaScript dependencies with npm ci and the browser with npx playwright install chromium. Installing dependencies needs an internet connection.

4. Render the example, then change one thing.

   The included voice is ready to use. Ask for a different colour, a new shape, or a softer movement. Keep the first change small so you can see what it does.

You don’t need the ReelFactory app to use this starter. Your coding-agent usage is separate. Creating new narration with the included ElevenLabs helper needs your own key and uses voice credits.

Bring your own idea.

Choose one idea that can be shown with a simple visual action. Write a short script and ask your agent:

Review the draft with three questions: does the action land on the right word, is the movement easy to follow, and does the sound make the important moment clearer?

This is a starting point for learning and making short videos. The skill supplies a method and rendering tools; you and your agent still make the creative choices.