Make a repeatable product-status animation before buying a video suite
Turn three product states into a short code-driven animation with an editable source, a local preview and a checked MP4.
A 12-second 1080p status animation, its editable TypeScript source, one approved MP4 and a written reason to upgrade—or not.
Start with the result you need to communicate, then choose the smallest toolkit. VS Code holds the editable source; Motion Canvas provides the animation library, preview editor and documented FFmpeg exporter. The illustration is a FreeStack layout concept, not provider output or a tested render.
About this guide & its examples
This original FreeStack exercise uses a fictional upload flow: Ready, Processing and Complete. Official sources checked 21 October 2026.
Illustrations are FreeStack concepts, not provider screenshots. Check the free limits below and test your own files before delivery.
Free boundaries before you start
What’s free, whether you need an account, and when we last checked.
Motion Canvas · checked 2026-10-21
Free MIT-licensed TypeScript animation library and local preview editor with no provider project or export quota. The documented image-sequence exporter writes PNG, JPEG or WebP frames; the optional FFmpeg exporter renders a video and installs its own FFmpeg dependency. Hardware, local storage, Node packages, fonts, media and hosting are separate.
The documented local scaffold, editor and render flow has no provider-account step. Package registries, remote repositories and publishing destinations can have separate requirements.
Visual Studio Code · checked 2026-10-21
Free for private and commercial core editing. The Microsoft distribution licence differs from the MIT Code-OSS source licence. Local Markdown editing and preview need no AI plan. Copilot, model services and extensions have separate accounts, licences and usage limits; no free hosted compute is included.
Official FAQ explicitly says installing and using core editor features needs no account. Connected AI or sync services have separate requirements.
A small example to aim for
Complete
Edit the words.
Keep the timing.
FreeStack layout concept · not a provider screenshot or tested render.
Illustrative example · adapt it to your project.
Jump to a step
Write the message as three visible states
Choose one product event with a clear beginning and ending. For this fictional example, a file moves from Ready to Processing to Complete. Write one short label for each state, the information that must remain visible and the action a viewer should understand at the end. Fix the duration at 12 seconds and the frame at 1920 by 1080. Keep voice-over, music, multiple features and customer data outside version one. The goal is a reusable source file, not a tour of the product.
Create a local Motion Canvas project
Install a supported Node.js release; the current quickstart states Node.js 16 or greater. In a new folder, run npm init @motion-canvas@latest, choose TypeScript and select the Video (FFmpeg) exporter when prompted. Install dependencies, then run npm run serve and open the local editor at the documented localhost address. Keep the generated manifest and lockfile with the project. No provider account is part of this local setup, but package downloads and your device are still required.
Build one card that changes state
Open the generated scene in VS Code. Create a simple card with a fictional filename, one status label and a progress line. Use the Motion Canvas scene hierarchy and generator-based timing to reveal Ready, change to Processing, then finish on Complete. Keep text readable at the intended delivery size. Use shapes and system-safe styling first; if you add a font, icon or sound later, record its source and licence separately. The editor preview is for iteration, not proof of the final export.
Make timing inspectable, not mysterious
Name the moments in the source and leave a short hold after each state so a viewer can read it. Scrub through the local preview and check the first, transition and final frames. Take one snapshot for review using the documented snapshot control. Ask a reviewer to describe what changed without hearing an explanation. Revise the labels or timing if the result is ambiguous. This is an editorial check, not a usability test or claim of customer performance.
Render the delivery file and watch that file
Choose the Video (FFmpeg) exporter in Video Settings and render the selected range. The official exporter installs its own FFmpeg dependency and can enable Fast Start for web delivery. Open the resulting MP4 outside the editor, watch it from beginning to end and inspect the frame size, text, transitions and final hold. Keep the source project and a versioned delivery filename together. A successful render does not clear third-party assets or prove every browser and social platform will preserve quality.
Upgrade only for a requirement you can name
FreeStack editorial upgrade triggers: consider a traditional editor when the project genuinely needs manual footage cutting, colour work or complex audio; consider managed rendering when repeated jobs exceed the machine and maintenance you can support; consider paid asset or voice services only after rights, privacy and usage are understood. Do not buy a suite merely because the first animation took time. Reuse the source with one new set of labels first, then decide which repeated constraint remains.
Your workflow, connected.
Follow the steps and carry the output into the next stage. These are suggested handoffs, not automatic integrations.
- 02Prepare locally
Motion Canvas is MIT-licensed local software; it does not include hosted rendering or asset rights.
Versioned animation project
Provider information
Check current plans and documentation before committing to a workflow.
View 7 provider links
- Motion Canvas: project purpose and free open-source boundary
- Motion Canvas quickstart: Node prerequisite, scaffold and local editor
- Motion Canvas rendering and snapshots
- Motion Canvas Video (FFmpeg) exporter and Fast Start
- Motion Canvas image-sequence exporter
- Motion Canvas MIT repository
- VS Code: free commercial use and no-account core editor
A couple of useful questions
What stays free?
Motion Canvas publishes its library and editor under MIT with no provider-enforced project or export quota. VS Code core editing is free for private or commercial use and needs no account. Your computer, package downloads, storage and any hosting remain your responsibility.
Do I need to install FFmpeg myself?
The current Motion Canvas Video (FFmpeg) documentation says the exporter installs FFmpeg automatically. That applies to the documented exporter workflow; custom pipelines and external editors can have different requirements.
Should I start with video or an image sequence?
Use the MP4 exporter for this small delivery. The built-in image-sequence exporter is useful when another editor or compositor needs individual PNG, JPEG or WebP frames. Pick the handoff your next step actually requires.
What does Save this toolkit keep?
The existing FreeStack flow saves Motion Canvas and VS Code to your private stack after sign-in. It does not install packages, upload source files, render the animation or store your MP4. Keep the project in your own approved, backed-up location.
What would you try?
Share your result or ask a specific question about this workflow.
Join the conversation