DPS Video Agent Playbook
Making videos with Remotion
and Agentic Coding
and Agentic Coding
Standard guide for Remotion beginners to automate short-form video production to standards DPS.MEDIA — from setup to final render with just a few npm commands and a prompt sent to the agent.
9:16 · Reels / TikTok / Shorts
Vietnamese with accents
2026-03-25
Overview
What is Remotion + Agentic Coding?
Remotion allows creating videos using React code — animations, text, and footage are all fully programmed. Combined with agentic coding, an AI agent reads the brief → writes the script → generates Remotion code → renders MP4 without manual intervention at every step.
React-based Video
Write React components, Remotion renders them into MP4. Animations use useCurrentFrame() and useVideoConfig().
Agentic Workflow
The agent reads the source link, writes the script, generates code, and runs npm run render — all automated according to this Playbook.
9:16 First
All compositions use 1080×1920 as default. Standard for Reels, TikTok, and YouTube Shorts.
Fast Rendering
Use @remotion/media + concurrency=4. Benchmark 300 frames ~ 49–51s on a standard local machine.
Implementation SOP
7 steps to make a complete video
The agent automatically runs all 7 steps. You only need to provide the content source link and approve the preview at step 5. No need to re-ask what has been finalized in the Playbook.
1
Read source link and extract key points
Agent fetches the URL you provide, parses the content, and extracts the storyline: hook, key insight, solution, CTA. Must strictly follow the link content — no inventing outside the source scope.
web_fetch(url)
2
Write 30s script structure
Hook (0–3s) → Insight + value (3–18s) → Solution (18–26s) → Logo + CTA (26–30s). Vietnamese with accents, short sentences, avoid text stuffing, fast-paced.
3
Select and design visuals for each scene
Corporate footage from Pexels/Pixabay/Coverr (check for commercial use). Clear typography, sufficiently bold overlay. DPS logo is mandatory. Agent proactively selects remaining visuals to match the tone.
@remotion/media · Video component
4
Select music with the right vibe and balance volume
Free sources: Mixkit, Pixabay. Analysis videos/articles: low but energetic music. Whoosh/pop SFX for light transitions. Background music volume is always lower than main text/voice.
5
Render quick 10s preview
Run preview to approve ideas before full render. If there is feedback, the agent adjusts immediately at this step before moving to step 6.
npm run render:article:preview
6
Render final full quality
After preview approval, run final render. Default concurrency = 4. Check if output file exists before delivery.
npm run render:article:final
7
Update Playbook with new feedback
All finalized feedback is recorded in the “Finalized Feedback History” section of the Playbook file. This is the single source of truth for the agent to read for the next task.
Content structure
Standard DPS 30-second video template
Every video must follow this sequence. The hook must appear in the first 3 seconds — otherwise, viewers will scroll past before seeing the value.
0 – 3s
🎣 Strong Hook
Intriguing problem, shocking stats, or direct pain point. Sole goal: keep viewers from scrolling in the first 3 seconds.
3 – 18s
💡 Insight + Key Value
Present core insight and brief evidence. Prominent typography, decisive transition rhythm. Maximum 2–3 lines of text per frame.
18 – 26s
🗺️ Solution / Roadmap
Answer “so what should be done?”. Simple, actionable, maximum 1–3 points. No long-winded explanations here.
26 – 30s
🎯 DPS Logo + Clear CTA
DPS logo mandatory. Specific CTA: website, hotline, or follow. End decisively — do not let the video fade to nothing.
Render Commands
Finalized npm commands
Default composition: DPSArticle2026Fast. Re-run benchmark when changing machines or significant configuration changes.
Quick preview — first 10s (used for idea approval)
npm run render:article:preview # ~15s · only renders first 10s
Full 30s preview — low scale
npm run render:article:preview:full # review entire video flow/rhythm
Final render — 1080×1920 full quality
npm run render:article:final # 1080×1920 · concurrency=4
Benchmark — re-measure when changing machines
npm run benchmark:article # measure speed, choose optimal concurrency
Manual CLI with clear flags
npx remotion render DPSArticle2026Fast out/video.mp4 \\n –concurrency=4
Render Performance
Actual benchmark — 300 sample frames
Measured on local machine with composition DPSArticle2026Fast. Finalized using concurrency=4 for fastest and most stable results.
| Concurrency | Average time | Note | Relative Performance |
|---|---|---|---|
| 4 ✓ Default | ~49.8s | Fastest, stable | |
| 5 | ~56.4s | Good | |
| 6 | ~60.3s | Average | |
| 7 – 8 | ~72s | Slowest |
Design Standards
Motion and Design Standards
Applies to all videos. Agent must comply to ensure DPS brand consistency across all content.
Fast, decisive transitions — reasonable slide or cut. Do not use fades unless intentionally creating emotion.
Mobile-first typography — text is large enough to be readable on phones without zooming.
Strong enough overlay — text must stand out clearly against the background video regardless of light or dark scenes.
No text stuffing — maximum 2–3 lines of text per frame. If more is needed, add a new scene.
Mandatory DPS Logo — appears clearly in the final CTA scene. A light watermark throughout the video is optional.
Light SFX allowed — whoosh/pop transitions to enhance rhythm. Do not overuse or overpower the content.
Asset sources
Free assets — verified for commercial use
Always confirm the license allows commercial use before use. Avoid footage with clear brand logos without permission.
Footage
Pexels
pexels.com · Free commercial · No attribution required
Footage
Pixabay
pixabay.com · Pixabay License · Free commercial
Footage
Coverr
coverr.co · High-quality free commercial video loops
Music
Mixkit
mixkit.co · Free License · No attribution required
Music
Pixabay Music
pixabay.com/music · Pixabay License · Free commercial
Delivery Checklist
6 mandatory points before delivery
Click to check each item upon completion. Agents must confirm all 6 points before sending the video to the client.
Video is 9:16 — 1080×1920px, no cropping or letterboxing on any side.
Vietnamese text with accents — no spelling errors, no missing tone marks or diacritics.
Content follows source link — do not invent content outside the scope of the original article provided by the user.
Includes DPS logo — appears clearly in the video, at least in the final CTA scene.
Background music fits the vibe — volume is lower than the main text/voice, does not overpower the content.
Output file exists — rendered successfully, MP4 file is accessible and not corrupted.
