Motion Designer

What is Motion Designer

Motion Designer is a web motion graphics application inside the ProMediaFlow platform that converts live web pages and built-in layout templates into high-resolution, animated video reels. Designed for promotional campaigns, product launches, and social media videos, Motion Designer supports multiple canvas aspect ratios, including portrait (9:16), landscape (16:9), square (1:1), and tablet dimensions.

By supplying a live website URL, Motion Designer captures a pixel-accurate offline snapshot of the page—automatically embedding custom external fonts, vector graphics (SVGs), and visual media—and converts page elements into fully editable canvas layers. Powered by a code-driven animation engine combining GSAP and Three.js, the application provides frame-for-frame parity between your in-browser preview player and cloud-rendered video exports. You can customize interactive 3D camera paths, per-element entrance and exit animations, post-processing shaders (glowing bloom, depth-of-field, film grain, and chromatic aberration), and multi-step action choreography ("beats") directly in your browser.

Getting started

To open Motion Designer, select the application within the ProMediaFlow studio interface. You can create a new animation project using two primary methods:

• Start from a Template: Choose a pre-built layout from the template catalog, such as 3D camera showcases, vertical mobile reels, or branded card layouts.
• Import a Web Page: Supply a live website address (URL) to capture an exact offline snapshot and automatically generate an animatable project draft.

Note on Account Credits: Importing live web pages, generating layouts using the AI assistant prompt bar, and rendering final high-definition MP4 video exports on cloud servers consume account credits. Fast browser draft previews do not require cloud rendering processing.

Key capabilities

• Asynchronous Cloud Server Video Rendering & Status Tracking: Render high-resolution MP4 video files off-thread using background cloud servers with secure Cloudflare R2 storage. Because rendering takes place in the cloud, you can keep editing while exports process. Real-time status monitoring tracks jobs across queued, rendering, complete, and failed states. Fast client-side browser draft downloads are also available for immediate previews.
• Deterministic 3D Camera & Motion Engine: Built on a code-driven animation engine combining GSAP and Three.js, Motion Designer guarantees an exact frame-for-frame match between your live preview player and final exported video files. Features include interactive 3D camera paths, per-element entrance and exit timing, and cinematic post-processing visual effects (depth-of-field, glowing bloom, film grain, and chromatic aberration).
• Faithful 1:1 Web Page Snapshot Import: Capture live web pages offline exactly as they appear online. The capture engine automatically inlines custom external fonts, vector graphics (SVGs), and visual media while converting page elements into editable canvas layers.
• AI Assistant & Automated Action Integration: Enter plain-English commands into the built-in AI prompt bar. The assistant can search templates, list available scenes, import website addresses, generate custom canvas layouts, or trigger video rendering tasks automatically.
• Action "Beats" & Multi-Step Choreography: Organize product walkthroughs into step-by-step action sequences called "beats". Automate interactive UI behaviors including variable-speed typing, curved cursor paths with clicks and expanding ripples, element spotlighting with background dimming, overlay connectors, numbered step badges, title cards, end cards, standalone captions, explicit camera holds, and fade-through transitions.
• Private, Owner-Scoped Workspaces & Render Runs: All motion projects, imported visual assets, canvas layouts, keyframe timelines, render histories, and project version snapshots are strictly private and isolated to your account.

How to use it

Workflow 1: Importing a Web Page

1. Select Import Page in the project creation menu.
2. Enter the URL of the live website you wish to animate.
3. (Optional) Configure capture settings, such as project name, custom viewport dimensions, or page wait conditions to allow interactive web elements to load completely.
4. Click Import to generate your animatable project draft.

Workflow 2: Editing in the Workspace

Customize your animation using the multi-panel workspace:

1. Canvas View: Stage and position text, vector images (SVG), bitmap graphics, shapes, embedded video elements, and audio tracks across supported aspect ratios.
2. Timeline Panel: Manage spatial keyframes, entrance and exit timing, and sequence action steps ("beats").
3. Properties Panel: Precision keyframe controls for 2D spatial properties, including positioning, scale, rotation, and opacity.
4. Resource Panel: Upload, organize, and inspect project media files and visual assets.
5. Live Preview Player: Scrub the timeline and play back your animation in real time with exact visual parity to final cloud renders.
6. AI Prompt Bar: Type natural-language commands to generate canvas layouts, select catalog templates, or trigger page imports and video renders.
7. History Panel: View saved project revisions, inspect thumbnails and timestamps, preview past snapshots in the preview player, and restore your project to previous draft states.

Workflow 3: Structuring Animations with Action "Beats"

Organize product walkthroughs and feature showcases into step-by-step action sequences:

• Supported Action Types:
  • Typing: Realistic text entry with natural speed variations, space delays, and punctuation pauses.
  • Clicking: Curved mouse movements, hover states, button presses, and expanding ripple visual effects.
  • Highlighting: Focus spotlight ring with ambient background dimming.
  • Connectors & Steps: Curved directional arrows linking UI elements and numbered step badges for multi-step workflows.
  • Structure & Transitions: Staggered element reveals, camera pullbacks, overlay title cards, end cards, standalone captions, explicit camera holds, and fade-through transitions.
• Automated Choreography Rules:
  • Staging: Camera movements settle completely before typing, clicking, or highlighting actions begin. Captions display 0.4 seconds before the action starts.
  • Camera Holds: Pauses persist for at least 1.0 second (or 1.5 seconds when readable text is present) to ensure viewing legibility.
  • Zoom Limits: Camera magnification stays strictly between $1.9\times$ and $2.4\times$, capped at one zoom move every 2.4 seconds.
  • Safe Zones & Readability: Captions remain within social platform safe zones (portrait 9:16, square 1:1, and landscape 16:9 formats), capped at 2 lines of 32 characters displayed over high-contrast backing boxes.

Workflow 4: Previewing and Exporting Video

1. Play back your animation in the Live Preview Player and scrub the timeline to verify layout and timing.
2. Choose an export method:
   • Browser Export (Quick Draft): Fast client-side draft download generated directly in your browser.
   • Server Render (Cinematic MP4): Dispatches a background job to cloud servers to produce a high-definition MP4 file with full 3D camera motion and cinematic shaders.
3. Track render progress in your project history, and download the finished MP4 video once processing completes.

Workflow 5: Managing Project Versions and History

1. Open the History Panel to view saved revisions of your project.
2. Review snapshot entries detailing version numbers, creation timestamps, thumbnails, status labels, notes, and author attributes.
3. Select Preview to load any historical snapshot into the preview player.
4. Click Restore to revert your current project draft to the selected snapshot version.

Tips & notes

• Recommended Story Structure: For a 15–20 second video reel, center your project around three main action beats:
  1. Start with the product name on a clean title card.
  2. Display numbered action steps accompanied by short, clear captions explaining the value of the action rather than repeating visible UI text.
  3. Conclude with an end card featuring the product name and a clear call to action.
• Caption Timing: Captions automatically scale based on text length to match natural reading speed (clamped between 1.2 and 6.0 seconds).
• Account Credits: Live URL page captures, AI assistant prompt generations, and cloud server MP4 rendering consume account credits. Client-side browser draft previews do not consume rendering credits.
• Recent Updates: Recent releases introduced enhanced capture screen settings, walkthrough connectors and step badges, draft rendering options for server renders, advanced keyframe controls, expanded media sources, and AI-driven screen capture capabilities.