create-programmatic-motion-video-ad

create-programmatic-motion-video-ad

Purpose

Create a fast-paced paid-social motion video ad entirely programmatically, ending with a reviewed final MP4 and production package.

Use for any product or brand needing a paid-social motion ad that combines brand assets, motion graphics, captions, music, optional ElevenLabs voiceover, HTML/Hyperframes rendering, and FFmpeg assembly.

Inputs

• Product/ad brief, audience, CTA, destination URL, and campaign objective.
• Brand sources: website, asset folder, reference video, brand docs, or existing video folder.
• Platform target, defaulting to 9:16 Reels/TikTok/Meta placement.
• Voiceover requirement and approved ElevenLabs voice when applicable.
• Output video folder.

Composed Atoms

• understand-brand-assets
• create-video-concept-brief
• create-video-implementation-workflow
• create-storyboard-html
• create-goose-graphics
• create-motion-graphics-hyperframes
• create-programmatic-music-bed
• create-voiceover-elevenlabs
• sync-voiceover-to-video
• stitch-videos-ffmpeg
• review-video-for-ad-quality
• review-video-for-brand-fit
• review-video-for-platform-fit
• export-video-final
• package-video-assets

Full-Bleed Command Workflow Pattern

A reusable structure for product-motion ads that show an agent or product receiving a command and executing a task. Brand-agnostic — substitute the brand's avatar, palette, and copy.

• One simple hook card: a single metric or symptom statement, not a dense dashboard.
• Command composer: a text input over a pale gray or aerial/nature background.
• Agent typing state: typed-text animation paired with a small agent avatar tile.
• Task list: items with pending / running / done pills, animating in sequence.
• Beat-cut result/maker cards: short cards showing intermediate artifacts produced.
• Result message card: final summary of what the agent delivered.
• CTA endcard: brand avatar/logo stack with the call to action.

Implementation Guidance

• Use one fixed 720x1280 or 1080x1920 HTML composition driven by window.renderAt(t) and a scene timing array. Do not split scenes across separate HTML files.
• Default to full-bleed vertical layouts from the start; never reuse horizontal storyboard graphics for vertical output.
• When Node playwright is unavailable, fall back to a Python Playwright renderer.
• Generate a local procedural music/SFX bed when no external music provider is needed. Align ticks/chimes/risers to typed-text keystrokes, send-click, task completions, result checks, and the endcard.
• Mux silent video and WAV audio with FFmpeg into H.264/AAC. Verify with ffprobe (streams, codecs, dimensions, fps, duration) and volumedetect (audio is non-silent).
• Extract review frames and a contact sheet. Revise crowded scenes — especially the hook — before finalizing.

Story Archetypes

Pick one archetype per ad. These are brand-agnostic patterns; map any brand's product onto the structure without renaming the archetype.

• Problem-to-Action — acute pain point resolved by a single user input or command.
  • When to pick: short, punchy product demos with a clear single-shot payoff.
  • Hook: one metric or symptom card.
  • Payoff: result card showing the action completing.
  • VO/music: voiceless works well; light procedural SFX tied to the command beat.
• Workload-Collapse — a mature, expensive existing workflow compressed into the product's automation.
  • When to pick: B2B stories where the audience already spends real money/time on the workflow.
  • Hook: stack of tasks/costs.
  • Payoff: same stack collapsing into one result card.
  • VO/music: optional VO variant works well here; ducked music underneath.
• Fatigue-to-Variety — repetition or creative exhaustion broken by the product's output volume or variety.
  • When to pick: creative-output products where breadth is the value prop.
  • Hook: repeated motif emphasizing sameness.
  • Payoff: carousel or grid of fresh variants.
  • VO/music: tempo lift on the payoff; SFX riser into the variant grid.

Workflow

1. Build the brand packet with understand-brand-assets.
2. Select the concept and script with create-video-concept-brief; lock duration, format, captions, VO, CTA, and endcard.
3. Write workflow.md with create-video-implementation-workflow.
4. Create storyboard.html with create-storyboard-html; verify vertical scenes for 9:16 outputs.
5. Generate styled stills/graphic frames with create-goose-graphics when scene graphics need a reusable style such as pillow-block.
6. Build the full Hyperframes composition with deterministic window.renderAt(t) support and render it to a silent MP4.
7. Create music with create-programmatic-music-bed.
8. If VO is requested, generate ElevenLabs audio/timestamps, retime visual cuts to phrase boundaries, and mix softer ducked music underneath.
9. Assemble and export with FFmpeg; verify H.264/AAC, yuv420p, 30 fps, dimensions, duration, and playable output.
10. Sample review frames, run brand/platform/ad-quality checks, iterate on collisions or blank frames, and package final artifacts.

Decision Rules

• Default to 9:16, 720x1280 or 1080x1920, 24-30 seconds, 30 fps, H.264/AAC.
• Default to programmatic HTML/Hyperframes for UI and motion graphics; do not use manual editors such as Premiere, CapCut, or DaVinci.
• Use goose-graphics for polished static scene graphics when plain HTML cards look too generic.
• Keep captions baked into the visual composition for graphic ads unless the user explicitly requires external subtitle tooling.
• If VO is used, sync scene cuts to ElevenLabs timestamp phrases and lower/duck music.
• Stop before publishing/uploading to ad platforms; Meta Ads skills own upload and campaign creation.
• Sample-library upload and Meta campaign operations belong to separate publishing skills — this skill stops at the final reviewed MP4.

Output

• Final MP4 under edits/.
• Silent clip under clips/ when applicable.
• workflow.md, brand_aesthetic.md, storyboard.html, manifest.json, and verification.md.
• Raw materials, generated graphics, Hyperframes HTML, audio files, timestamp JSON, review frames, and packaging notes.

Quality Checks

• Video is full-bleed edge-to-edge in the requested aspect ratio.
• Pacing is fast enough for short-form platforms and no scene holds unnecessarily.
• Captions/onscreen text are legible and do not collide with graphics.
• Music is present; if VO exists, music is softer and ducked.
• Endcard contains brand/product signal and CTA.
• ffprobe confirms dimensions, duration, frame rate, video codec, and audio codec.

Failure Modes

• Brand assets or reference videos are missing or rights-unclear.
• Provider credentials for ElevenLabs or generated media are unavailable.
• Hyperframes render is blank, wrong aspect, or non-deterministic.
• Audio mix clips, VO is out of sync, or music overwhelms VO.
• Review frames reveal text collision, horizontal graphics in a vertical video, or off-brand visuals.