Make AI Product Promos and Edit Them on Screen huashu-motion

Leave revision notes directly on the picture

Once a promo is ready, asking the AI to enlarge some text or adjust a card can mean explaining exactly when and where it appears. With huashu-motion, you can click an element in the preview and leave a comment with its time, scene, and source location attached. Text, colors, and other settings with input fields can also be changed directly in the browser.

Related skills have different focuses: video-shotcraft offers shot recipes for showing product features, while huashu-art-motion builds animations around different art styles. huashu-motion focuses on making and revising product promos, so you can point at the picture to explain a change. Watch for the comment box in the creator’s introduction video at the top of this page.

Install the skill and open the demo

huashu-motion builds editable web animations with code, then renders them frame by frame in your local browser.

This tutorial uses a task-management product to plan a promo of about 30 seconds. Choose the one thing viewers should remember before arranging the shots. You do not need to show every button.

1. Prepare Node.js 22 or later, Chrome (or Chromium or Edge), and FFmpeg, then run this page’s installation command in a terminal. The project has so far only been tested by its creator on macOS.

2. Check the environment in a terminal:

   npx huashu-motion doctor

   The report marks its Node, FFmpeg, browser, and other checks with ✓ or ✗. Follow the hints beside failed checks before continuing. Installing the skill does not establish that the rendering environment is ready.

3. From the folder where you want to keep projects, run:

   npx huashu-motion demo my-motion-demo

   This copies the official demo and starts the browser studio. The terminal also prints its address. You should be able to play the animation, scrub the timeline, and inspect the scenes. Use this demo to learn the editor; create a separate project for your own product.

The first npx huashu-motion invocation may ask to download the CLI package. The skill guides the AI; the CLI handles preview, sound, and export.

Use your product and choose a direction

Start with a change viewers can understand

Give the AI your product name, audience, website or brief, logo, and two or three important interface screenshots. Explain the change in one sentence: what problem does the user face, and what improves with the product? Real interfaces, brand colors, and actual results make stronger shot material than a list of features.

The following brief is an editorial example of how to organize your materials. It is not the creator’s original prompt or a reproduced film.

Send it in Claude Code or Codex after installing the skill, attaching your own screenshots:

Use huashu-motion to make a product promo of about 30 seconds in 16:9. Name the project folder taskflow-promo.

Product: TaskFlow, a task-management tool for small teams.
Main benefit: turn meeting notes into tasks with owners and deadlines.
Materials: my attached logo, sample meeting notes, and task-list screenshots.
Audience: team leads who organize and assign work after meetings.

Read the materials first. Propose three distinct directions, each with a key frame and a short explanation.
Derive the brand colors from my materials. Do not build the full film until I choose a direction.
Use music and sound effects for the first version, with no narration.

Approve the key shot before extending the film

1. Check that the three directions tell the story differently, rather than merely changing colors. Choose the one that best expresses the product’s value, and identify the visual elements and pacing you want to keep.
2. Ask the AI to outline the shots and pacing, then build the key moment: meeting notes becoming a task list. Approve its text, product behavior, and branding before it builds the surrounding shots.
3. Ask the AI to open the studio for taskflow-promo and keep listening for comments. Open the address, watch the whole first version, then scrub to text-heavy moments.

The skill draws the animation with code rather than calling a text-to-video model. Supply your own footage when you need real people or live-action scenes.

Point at the picture to revise it

Change one thing and check the feedback

In the studio, go to the frame where the task list appears, press C, and click the text you want to change. Leave a specific comment:

The deadline on this task card is too small. Enlarge the date and increase its contrast. Keep the card position and all other shots unchanged.

The comment includes the time, scene, element, and source location. The AI needs to keep waiting for and processing comments in its session. Opening the studio alone does not start an AI worker. After submission, look for a reply and an updated preview, then check that the rest of the picture stayed the same.

Values exposed as parameters, such as titles, numbers, colors, and hold times, can be changed directly in the studio’s right panel. If there is no matching field, leave a comment instead. When extending a shot, ask the AI to shift later shots and sound with it, rather than simply freezing the picture.

Replace the product content

Explain what needs to change together:

• When replacing the logo and brand colors, check contrast on buttons, highlighted text, and backgrounds.
• When replacing screenshots, update the corresponding actions and results. Remove features that belong only to the example.
• When changing the selling point, revise the shots that demonstrate it, rather than just changing the closing line.

Work in your new product project. The repository’s “bean Huashu” character is the creator’s likeness, included for project demonstrations only; it is not a general-purpose character for your promo. The code’s MIT license is separate from font and music-sample licenses. See THIRD_PARTY.md in the sources section.

Review the sound, adapt the frame, and export

Listen before approving the full sequence

The first version can use synthesized instruments; real-instrument samples are optional. For piano, strings, and similar sounds, ask the AI to run npx huashu-motion samples build. The first run downloads about 55 MB of samples.

Watch at normal speed to check that important actions match their sound effects and that music does not stop abruptly. Regenerate music and effects after changing shot timing. If you later add narration, approve the script and voice, listen to a short sample, then generate the full voice track. Align subtitles, shots, and music levels to the actual recording.

Make a separate portrait version

From the parent folder containing your projects, run:

npx huashu-motion fork taskflow-promo taskflow-portrait --size 1080x1920

This creates a portrait project and submits a task to adjust the layout. Then ask the AI to rearrange screenshots, titles, and text rather than cropping the landscape film. Keep the original project.

Export and inspect the actual file

From the same parent folder, check and export the landscape version:

npx huashu-motion check taskflow-promo
npx huashu-motion render taskflow-promo
npx huashu-motion qa taskflow-promo

Resolve check errors first. render writes a versioned video to the project’s out/ folder; use the actual path printed by the terminal. qa checks the newest render for single-frame pops, dead time, hard cuts, and related issues. Replace the project folder with taskflow-portrait to export the portrait version.

Finally, open the exported MP4 and check sound, text, product information, and the ending. Do not rely solely on the studio preview. For transparent overlays, the tool offers MOV or WebM with alpha; an ordinary MP4 is not a transparent video.