Skip to content
DemoVexa

Animate

Plan the scenes, approve the plan and let Claude build the animated video from your app's code, then review and refine it.

The Animate step is where Claude builds the video. It plans the scenes, then reads your app's code and recreates the real screens as animation, timed to your voiceover. This step is for the animated types (Product Intro, Feature Demo and Feature Launch); Event Recaps use a storyboard instead.

#Before you start

The Animate step needs two things:

  • An approved script.
  • A voiceover that matches the current script. If the voiceover is out of date, generate it again in the Voice step first.

#Plan the scenes

  1. Click Plan the scenes. Claude drafts a scene plan, which usually takes 1 to 3 minutes.
  2. Review the Scene plan (see below) and change what you need.
  3. Click Approve & build.

If you'd rather not review a plan, click Skip and build now to go straight to the build.

#The scene plan

The plan lists each scene in order. For every scene you can edit:

FieldWhat it holds
TitleA short name for the scene
LinesWhich script lines play during the scene
ScreenWhich screen of your app is shown
What happensThe action on screen: clicks, typing, scrolling, what appears
Caption (word = blue)The on-screen caption. Wrap a word in asterisks to highlight it

You can reorder, merge and remove scenes. Two more settings apply to the whole video:

  • Look: a short description of the overall look of the video.
  • Sample data: the example names, numbers and records to show in your app's screens.

To change the plan with a note instead of editing it by hand, use Revise: type what you want, such as "Spend less time on the settings screen", and Claude updates the plan.

Tip

The plan is the cheapest place to make changes. Fixing a scene here takes a minute; changing it after the build means more building time.

#The build

When you click Approve & build, the step shows "Claude is building the video. Usually 15 to 30 minutes."

#What Claude does

The build agent:

  1. Reads your app's code to see how the real screens look and work.
  2. Recreates those screens in code (React, rendered with Remotion).
  3. Times the cursor clicks and screen changes to the words in the voiceover.
  4. Adds the captions and the end card.
  5. Checks its code for errors.
  6. Renders still frames and looks at them to check its own work.
  7. Renders a half-resolution preview.

Builds run in the background. You can leave the project, start other work, or close the browser tab; the Activity page and the project card show progress.

#The build log

While Claude works, the log shows the current stage: Starting, Preparing, Claude is building, Rendering preview, then Ready or Failed. It also lists the files Claude read and wrote, and what the build cost.

When you use your Claude login, the cost is an API-equivalent estimate rather than a charge. See Plans and usage.

#Stills and timing

Under Stills Claude checked you can see the frames Claude rendered to review its work. They're a quick way to spot a problem before you watch the whole preview.

The timing of every scene comes from the voiceover: each cursor click lands on the word that names the action. That's why a new voiceover needs a re-sync (see below).

#Retries and usage limits

DemoVexa handles two common interruptions for you:

  • Crashes: if the build crashes, it's retried automatically, up to 2 times.
  • Claude usage limits: if your Claude usage limit is reached, the build waits and tries again every 15 minutes, for up to 2 hours. The log shows "Claude's usage limit was reached. Trying again at HH:MM (wait N of 8)."

#If the build fails

When a build fails, you have three options:

ButtonWhen to use it
RetryRun the same request again. Good for a one-off error
Rebuild from scratchThrow away what was built and start again
Ask ClaudeDescribe the problem and let Claude fix it

If the studio was closed or the worker crashed mid-build, the project shows "Stopped unexpectedly (the studio was closed or the worker crashed). Start it again." Click Restart. See Troubleshooting.

#Ask for changes

When the build is ready, watch the preview. To change something, click Ask Claude for changes and describe it in plain words, for example:

  • "Zoom in closer on each click"
  • "Hold the dashboard a second longer"
  • "Use our sample customer names from the brief"

Claude edits the animation and renders a new preview.

#Re-sync after a voice change

If you change the voice or regenerate the voiceover after the video is built, the timings no longer match the words. Click Re-sync to the new voice and Claude retimes the animation to the new audio.

#Next

When you're happy with the preview, click Go to export.

Last updated · View as Markdown

Something unclear or missing on this page? Tell us