Motion design

Watch the featured motion example, then learn to brief, preview, revise, and export a project. The step-by-step walkthrough uses a separate Focus practice project.

Motion design — featured example, 37 seconds. The steps below use a separate Focus project to explain the workflow.

Start with one of five built-in examples

On Home, choose Motion design beneath the prompt. Four rows are visible at once. Scroll over the example list to reveal Product Promo at the bottom.

Five built-in Motion design examples shown in a continuous scrolling capture. — Continuous scrolling capture; the app shows four rows at a time.

Find a useful direction

Bring Ideas to Life: a 20-second paper-cutout story for narrative, characters, and handmade texture.
The Future Is Already Here: a 20-second technology reel for beat-led editing, kinetic type, and chrome surfaces.
Motion Designer Showreel: a 15-second motion showcase for portfolios and introductions.
One-Shape UI Motion: a 14-second continuous interface transformation, from buttons and loading states to players and charts.
Product Promo: a 15-second fictional payments-product film for benefits, interface demonstrations, and a branded ending.

Preview first, then adapt the prompt

Click the thumbnail to open Preview. Close it, then click the title or prompt text to put the example brief into the composer. Replace the product, copy, timing, and style before you send. Opening a preview does not create your own new project.

Before you begin

Complete AI connection setup once. Choose a project small enough to inspect: the Focus example uses a green dot, task card, completion check, and a final brand message. It uses local animation and audio rather than an external paid media-generation service.

Step 1 — Choose Motion design

On Home, open the creation-type menu beneath the prompt and choose Motion design. Built-in motion examples appear below the composer. The list shows four rows at a time; scroll inside it to reach the fifth. Browse all five examples if you want a starting point.

Choose Motion design from the Home creation-type menu.

Step 2 — Describe the result

State the duration, aspect ratio, visible copy, visual direction, scene timing, audio, and final files. Ask for an editable source and a playable MP4 when you need both.

Create a 10-second product motion film called Focus, 1920×1080 at 30fps. Use paper white #fafafa, ink #262626, and a restrained green #63fe13 accent. Carry one green dot continuously through a Collect task card, a Done check, and a final Focus mark. Show Focus at 0–2s, Collect at 2–5s, Done at 5–8s, and “Make room for what matters.” at 8–10s. Add gentle original music and a few subtle sound effects, with no voiceover or paid external media services. Create the editable source and actual MP4 in this project.

An English brief draft in the Home composer. Confirm the creation type before submitting it.

Step 3 — Wait for production and rendering

The agent creates source files and assets, then renders the video. A plan or an animated source preview is not proof that the MP4 exists. Wait for the video file and the render's completion state.

Step 4 — Inspect the video

Open the MP4 artifact and play it. Check copy, motion continuity, transitions, final hold, music, and sound effects. Scrub through the timeline as well as watching from start to finish. Inspect the editable source separately when you need to continue working on it.

Original client interface with a composited blue hand-painted motion example. — Original app controls and operation positions. The player artwork is composited from the featured film for illustration.

The blue hand-painted scene at 18 seconds in the featured film.

Step 5 — Ask for one specific revision

Continue in the same project. Identify the exact change and what should stay consistent, then request a new render. In the real walkthrough, the second version changes only the final message. Open the new MP4 and confirm that the revised line is visible. Updating source does not retroactively change an already rendered video.

Change the final line from “Make room for what matters.” to “Focus on what matters.” Keep the other scenes, ten-second duration, colors, and audio. Render focus-v2.mp4 and keep the original focus.mp4 for comparison.

Step 6 — Download the checked version

Open the MP4 you intend to deliver and click Download in its upper-right toolbar. Choose a location and filename in the system save window. Confirm the local file exists, plays, and contains the latest revision. If the save window cannot complete, preserve the project and include the window's error state when asking support for help. A clicked Download control is not a completed save.

Keep the editable project

For this example, the entry file is motion-source/focus/index.html. Keep its GSAP file, fonts, and audio alongside it when moving the source. The MP4 is the playback deliverable; it does not contain the editable source project.

Make a brief easier to follow

Specify visible copy rather than asking the agent to guess it. Use time ranges for important beats and state whether the output is a film or an interactive animation. Mention music and voiceover explicitly. For revisions, name the scene or time range and identify the elements that should remain unchanged.