{"id":38001,"date":"2026-03-25T00:55:46","date_gmt":"2026-03-24T17:55:46","guid":{"rendered":"https:\/\/dps.media\/?p=38001"},"modified":"2026-03-25T00:59:02","modified_gmt":"2026-03-24T17:59:02","slug":"making-video-with-remotion-and-agentic-coding","status":"publish","type":"post","link":"https:\/\/dps.media\/en\/making-video-with-remotion-and-agentic-coding\/","title":{"rendered":"Making videos with Remotion and Agentic Coding"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><style>\n#dps-isolated-root * { margin: 0; padding: 0; box-sizing: border-box; font-family: inherit; }\n\n#dps-isolated-root {\n  font-family: 'Google Sans', 'Product Sans', 'Segoe UI', sans-serif;\n  background: #f8f6f1;\n  color: #1a1a1a;\n  min-height: 100vh;\n  line-height: 1.6;\n}\n#dps-isolated-root .dps-i-hero {\n  background: #fff;\n  border-bottom: 1px solid #e8e3d8;\n  padding: 56px 40px 48px;\n  position: relative;\n  overflow: hidden;\n}\n#dps-isolated-root .dps-i-hero::before {\n  content: '';\n  position: absolute;\n  top: -80px; right: -80px;\n  width: 320px; height: 320px;\n  background: radial-gradient(circle, rgba(255,107,43,0.1) 0%, transparent 70%);\n  border-radius: 50%;\n  pointer-events: none;\n}\n#dps-isolated-root .dps-i-hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }\n#dps-isolated-root .dps-i-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: #fff3ee;\n  color: #e8530a;\n  border: 1px solid #ffd5bf;\n  border-radius: 100px;\n  padding: 4px 14px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  margin-bottom: 22px;\n}\n#dps-isolated-root .dps-i-hero-title {\n  font-size: clamp(1.8rem, 4.5vw, 3rem);\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  line-height: 1.15;\n  color: #0f0f0f;\n  margin-bottom: 16px;\n}\n#dps-isolated-root .dps-i-accent { color: #e8530a; }\n#dps-isolated-root .dps-i-hero-sub {\n  font-size: 1rem;\n  color: #555;\n  max-width: 540px;\n  line-height: 1.75;\n  margin-bottom: 32px;\n}\n#dps-isolated-root .dps-i-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }\n#dps-isolated-root .dps-i-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 7px 14px;\n  border-radius: 100px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid #e0dbd0;\n  background: #fafaf8;\n  color: #555;\n}\n#dps-isolated-root .dps-i-copy-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #e8530a;\n  color: #fff;\n  border: none;\n  border-radius: 10px;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  letter-spacing: 0.01em;\n  transition: background 0.15s, transform 0.12s;\n}\n#dps-isolated-root .dps-i-copy-btn:hover { background: #c94408; transform: translateY(-1px); }\n#dps-isolated-root .dps-i-copy-btn.dps-i-copied { background: #1a8a4a; }\n#dps-isolated-root .dps-i-main { max-width: 860px; margin: 0 auto; padding: 0 40px 80px; }\n#dps-isolated-root .dps-i-section { margin-top: 52px; }\n#dps-isolated-root .dps-i-section-label {\n  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;\n  text-transform: uppercase; color: #e8530a; margin-bottom: 6px;\n}\n#dps-isolated-root .dps-i-section-title {\n  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;\n  color: #0f0f0f; margin-bottom: 6px;\n}\n#dps-isolated-root .dps-i-section-desc { font-size: 0.92rem; color: #666; margin-bottom: 24px; line-height: 1.75; }\n#dps-isolated-root .dps-i-inline-code {\n  font-family: 'Fira Mono', 'Consolas', monospace;\n  background: #f0ece4; padding: 1px 6px; border-radius: 4px; font-size: 12px; color: #444;\n}\n#dps-isolated-root .dps-i-cards-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;\n}\n#dps-isolated-root .dps-i-card {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 14px; padding: 20px 18px;\n  transition: box-shadow 0.18s, border-color 0.18s;\n}\n#dps-isolated-root .dps-i-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-color: #d5cfc4; }\n#dps-isolated-root .dps-i-card-icon {\n  width: 38px; height: 38px; background: #fff3ee; border-radius: 10px;\n  display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px;\n}\n#dps-isolated-root .dps-i-card-title { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; }\n#dps-isolated-root .dps-i-card-desc { font-size: 0.82rem; color: #888; line-height: 1.6; }\n#dps-isolated-root .dps-i-steps { display: flex; flex-direction: column; }\n#dps-isolated-root .dps-i-step { display: flex; gap: 18px; position: relative; }\n#dps-isolated-root .dps-i-step-connector {\n  position: absolute; left: 19px; top: 52px; bottom: 0;\n  width: 2px; background: linear-gradient(to bottom, rgba(232,83,10,0.2), transparent);\n}\n#dps-isolated-root .dps-i-step-num {\n  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;\n  background: #e8530a; color: #fff; font-size: 14px; font-weight: 700;\n  display: flex; align-items: center; justify-content: center;\n  margin-top: 18px; position: relative; z-index: 1;\n}\n#dps-isolated-root .dps-i-step-body {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 12px;\n  padding: 16px 18px; flex: 1; margin-bottom: 10px;\n}\n#dps-isolated-root .dps-i-step-title { font-size: 0.92rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }\n#dps-isolated-root .dps-i-step-desc { font-size: 0.82rem; color: #888; line-height: 1.6; }\n#dps-isolated-root .dps-i-step-tag {\n  display: inline-block; margin-top: 8px;\n  background: #f8f6f1; border: 1px solid #e8e3d8; border-radius: 6px;\n  padding: 2px 8px; font-size: 11px; font-weight: 600; color: #888;\n  font-family: 'Fira Mono', monospace;\n}\n#dps-isolated-root .dps-i-timeline {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 14px; overflow: hidden;\n}\n#dps-isolated-root .dps-i-timeline-row {\n  display: flex; align-items: stretch; border-bottom: 1px solid #f0ece4;\n}\n#dps-isolated-root .dps-i-timeline-row:last-child { border-bottom: none; }\n#dps-isolated-root .dps-i-timeline-time {\n  flex-shrink: 0; width: 88px; background: #f8f6f1;\n  font-size: 12px; font-weight: 700; color: #e8530a;\n  display: flex; align-items: center; justify-content: center;\n  padding: 18px 8px; border-right: 1px solid #f0ece4;\n  letter-spacing: 0.03em; font-family: 'Fira Mono', monospace;\n}\n#dps-isolated-root .dps-i-timeline-content { padding: 16px 20px; flex: 1; }\n#dps-isolated-root .dps-i-timeline-label { font-weight: 700; font-size: 13px; color: #1a1a1a; margin-bottom: 4px; }\n#dps-isolated-root .dps-i-timeline-desc { font-size: 0.83rem; color: #888; line-height: 1.55; }\n#dps-isolated-root .dps-i-code-group { display: flex; flex-direction: column; gap: 8px; }\n#dps-isolated-root .dps-i-code-row { background: #161616; border-radius: 12px; overflow: hidden; }\n#dps-isolated-root .dps-i-code-header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 8px 16px; background: #0f0f0f; border-bottom: 1px solid #2a2a2a;\n}\n#dps-isolated-root .dps-i-code-label {\n  font-size: 11px; font-weight: 600; color: #888;\n  text-transform: uppercase; letter-spacing: 0.08em;\n}\n#dps-isolated-root .dps-i-code-copy-btn {\n  font-size: 11px; font-weight: 600; color: #aaa; background: none;\n  border: 1px solid #444; border-radius: 5px; padding: 3px 10px; cursor: pointer;\n  transition: color 0.12s, border-color 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-code-copy-btn:hover { color: #fff; border-color: #888; }\n#dps-isolated-root .dps-i-code-body {\n  padding: 14px 18px; font-family: 'Fira Mono', 'Consolas', monospace;\n  font-size: 13px; color: #d4c9b5; line-height: 1.75; white-space: pre; overflow-x: auto;\n}\n#dps-isolated-root .dps-i-kw { color: #7dd3a8; }\n#dps-isolated-root .dps-i-cmt { color: #555; }\n#dps-isolated-root .dps-i-str { color: #f9b26a; }\n#dps-isolated-root .dps-i-asset-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;\n}\n#dps-isolated-root .dps-i-asset-card {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 12px;\n  padding: 18px 14px; text-align: center; transition: box-shadow 0.15s;\n}\n#dps-isolated-root .dps-i-asset-card:hover { box-shadow: 0 3px 16px rgba(0,0,0,0.06); }\n#dps-isolated-root .dps-i-asset-type {\n  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;\n  text-transform: uppercase; color: #e8530a; margin-bottom: 6px;\n}\n#dps-isolated-root .dps-i-asset-title { font-size: 0.95rem; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }\n#dps-isolated-root .dps-i-asset-desc { font-size: 0.78rem; color: #999; }\n#dps-isolated-root .dps-i-checklist {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 14px; overflow: hidden;\n}\n#dps-isolated-root .dps-i-check-item {\n  display: flex; align-items: flex-start; gap: 12px;\n  padding: 14px 20px; border-bottom: 1px solid #f4f0e8;\n  cursor: pointer; transition: background 0.1s;\n}\n#dps-isolated-root .dps-i-check-item:last-child { border-bottom: none; }\n#dps-isolated-root .dps-i-check-item:hover { background: #fafaf8; }\n#dps-isolated-root .dps-i-check-box {\n  flex-shrink: 0; width: 20px; height: 20px; border: 2px solid #d8d3c8;\n  border-radius: 5px; margin-top: 1px; display: flex; align-items: center;\n  justify-content: center; transition: background 0.12s, border-color 0.12s;\n  font-size: 12px; color: #fff;\n}\n#dps-isolated-root .dps-i-check-item.dps-i-chk .dps-i-check-box { background: #1a8a4a; border-color: #1a8a4a; }\n#dps-isolated-root .dps-i-check-text { font-size: 0.88rem; color: #333; line-height: 1.5; }\n#dps-isolated-root .dps-i-check-item.dps-i-chk .dps-i-check-text { text-decoration: line-through; color: #bbb; }\n#dps-isolated-root .dps-i-bench-table {\n  width: 100%; border-collapse: collapse; background: #fff;\n  border-radius: 12px; overflow: hidden; border: 1px solid #e8e3d8;\n}\n#dps-isolated-root .dps-i-th {\n  background: #f8f6f1; padding: 11px 16px; text-align: left;\n  font-weight: 700; color: #666; font-size: 11px;\n  text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid #e8e3d8;\n}\n#dps-isolated-root .dps-i-td {\n  padding: 11px 16px; border-bottom: 1px solid #f4f0e8; color: #333; font-size: 0.88rem;\n}\n#dps-isolated-root .dps-i-tr:last-child .dps-i-td { border-bottom: none; }\n#dps-isolated-root .dps-i-best { color: #1a8a4a; font-weight: 700; }\n#dps-isolated-root .dps-i-bar-wrap {\n  background: #f0ece4; border-radius: 100px; height: 5px;\n  overflow: hidden; width: 100%; min-width: 60px;\n}\n#dps-isolated-root .dps-i-bar-fill {\n  height: 100%; border-radius: 100px;\n  background: linear-gradient(90deg, #1a8a4a, #7dd3a8);\n}\n#dps-isolated-root .dps-i-bar-slow { background: linear-gradient(90deg, #e8530a, #f9b26a) !important; }\n#dps-isolated-root .dps-i-rules-grid {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;\n}\n#dps-isolated-root .dps-i-rule-card {\n  background: #fff; border: 1px solid #e8e3d8; border-radius: 12px;\n  padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start;\n}\n#dps-isolated-root .dps-i-rule-dot {\n  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;\n  background: #e8530a; margin-top: 6px;\n}\n#dps-isolated-root .dps-i-rule-text { font-size: 0.86rem; color: #444; line-height: 1.6; }\n#dps-isolated-root .dps-i-rule-bold { font-weight: 700; color: #1a1a1a; }\n#dps-isolated-root .dps-i-modal-overlay {\n  position: fixed; inset: 0; background: rgba(0,0,0,0.5);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 9999; padding: 20px;\n  opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n#dps-isolated-root .dps-i-modal-overlay.dps-i-open { opacity: 1; pointer-events: all; }\n#dps-isolated-root .dps-i-modal {\n  background: #fff; border-radius: 16px; padding: 28px;\n  max-width: 640px; width: 100%;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.2);\n  transform: translateY(16px); transition: transform 0.2s;\n  max-height: 85vh; overflow-y: auto;\n}\n#dps-isolated-root .dps-i-modal-overlay.dps-i-open .dps-i-modal { transform: translateY(0); }\n#dps-isolated-root .dps-i-modal-header {\n  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;\n}\n#dps-isolated-root .dps-i-modal-title { font-size: 1.1rem; font-weight: 700; color: #0f0f0f; }\n#dps-isolated-root .dps-i-modal-close {\n  width: 32px; height: 32px; border: none; background: #f4f0e8;\n  border-radius: 8px; cursor: pointer; font-size: 18px;\n  display: flex; align-items: center; justify-content: center;\n  color: #666; transition: background 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-modal-close:hover { background: #ede8de; }\n#dps-isolated-root .dps-i-modal-desc {\n  font-size: 0.87rem; color: #666; margin-bottom: 14px; line-height: 1.65;\n}\n#dps-isolated-root .dps-i-modal-textarea {\n  width: 100%; background: #f8f6f1; border: 1px solid #e8e3d8;\n  border-radius: 10px; padding: 14px 16px;\n  font-size: 12.5px; font-family: 'Fira Mono', monospace;\n  color: #333; line-height: 1.65; resize: vertical;\n  min-height: 210px; margin-bottom: 14px; outline: none;\n}\n#dps-isolated-root .dps-i-modal-textarea:focus { border-color: #e8530a; }\n#dps-isolated-root .dps-i-modal-footer { display: flex; justify-content: flex-end; gap: 10px; }\n#dps-isolated-root .dps-i-btn-secondary {\n  padding: 10px 20px; border: 1px solid #e0dbd0; background: #fff;\n  border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;\n  color: #555; transition: background 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-btn-secondary:hover { background: #f8f6f1; }\n#dps-isolated-root .dps-i-btn-primary {\n  padding: 10px 20px; background: #e8530a; border: none;\n  border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;\n  color: #fff; transition: background 0.12s; font-family: inherit;\n}\n#dps-isolated-root .dps-i-btn-primary:hover { background: #c94408; }\n#dps-isolated-root .dps-i-btn-primary.dps-i-copied { background: #1a8a4a; }\n#dps-isolated-root .dps-i-footer {\n  border-top: 1px solid #e8e3d8; background: #fff; padding: 28px 40px; margin-top: 56px;\n}\n#dps-isolated-root .dps-i-footer-inner {\n  max-width: 860px; margin: 0 auto;\n  display: flex; flex-wrap: wrap; align-items: center;\n  justify-content: space-between; gap: 10px;\n}\n#dps-isolated-root .dps-i-footer-brand { font-weight: 800; font-size: 1rem; color: #e8530a; }\n#dps-isolated-root .dps-i-footer-meta { font-size: 12px; color: #bbb; }\n@media (max-width: 600px) {\n  #dps-isolated-root .dps-i-hero { padding: 36px 20px 32px; }\n  #dps-isolated-root .dps-i-main { padding: 0 20px 60px; }\n  #dps-isolated-root .dps-i-footer { padding: 24px 20px; }\n  #dps-isolated-root .dps-i-timeline-time { width: 66px; font-size: 11px; }\n}\n<\/style><div id=\"dps-isolated-root\">\n\n  <div class=\"dps-i-hero\">\n    <div class=\"dps-i-hero-inner\">\n      <div class=\"dps-i-badge\" aria-label=\"DPS Video Agent badge\">\n        <span aria-hidden=\"true\">\ud83c\udfac<\/span> DPS Video Agent Playbook\n      <\/div>\n      <div class=\"dps-i-hero-title\">\n        Making videos with <span class=\"dps-i-accent\">Remotion<\/span><br>and Agentic Coding\n      <\/div>\n      <div class=\"dps-i-hero-sub\">\n        Standard guide for Remotion beginners to automate short-form video production to standards <a class=\"wpil_keyword_link\" href=\"https:\/\/dps.media\/en\/\" title=\"DPS.MEDIA JSC\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"868\">DPS.MEDIA<\/a> \u2014 from setup to final render with just a few npm commands and a prompt sent to the agent.\n      <\/div>\n      <div class=\"dps-i-hero-actions\">\n        <button class=\"dps-i-copy-btn\" id=\"dps-open-prompt-btn\" aria-label=\"Open prompt copy window for agent code\">\n          <span aria-hidden=\"true\">\u26a1<\/span> Copy Prompt for Agent\n        <\/button>\n        <div class=\"dps-i-pill\"><span aria-hidden=\"true\">\ud83d\udcd0<\/span> 9:16 \u00b7 Reels \/ TikTok \/ Shorts<\/div>\n        <div class=\"dps-i-pill\"><span aria-hidden=\"true\">\ud83c\uddfb\ud83c\uddf3<\/span> Vietnamese with accents<\/div>\n        <div class=\"dps-i-pill\"><span aria-hidden=\"true\">\ud83d\udd04<\/span> 2026-03-25<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"dps-i-main\">\n\n    <!-- OVERVIEW -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Overview<\/div>\n      <div class=\"dps-i-section-title\">What is Remotion + Agentic Coding?<\/div>\n      <div class=\"dps-i-section-desc\">Remotion allows creating videos using React code \u2014 animations, text, and footage are all fully programmed. Combined with agentic coding, an AI agent reads the brief \u2192 writes the script \u2192 generates Remotion code \u2192 renders MP4 without manual intervention at every step.<\/div>\n      <div class=\"dps-i-cards-grid\">\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\u269b\ufe0f<\/div>\n          <div class=\"dps-i-card-title\">React-based Video<\/div>\n          <div class=\"dps-i-card-desc\">Write React components, Remotion renders them into MP4. Animations use useCurrentFrame() and useVideoConfig().<\/div>\n        <\/div>\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\ud83e\udd16<\/div>\n          <div class=\"dps-i-card-title\">Agentic Workflow<\/div>\n          <div class=\"dps-i-card-desc\">The agent reads the source link, writes the script, generates code, and runs npm run render \u2014 all automated according to this Playbook.<\/div>\n        <\/div>\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\ud83d\udcf1<\/div>\n          <div class=\"dps-i-card-title\">9:16 First<\/div>\n          <div class=\"dps-i-card-desc\">All compositions use 1080\u00d71920 as default. Standard for Reels, TikTok, and YouTube Shorts.<\/div>\n        <\/div>\n        <div class=\"dps-i-card\">\n          <div class=\"dps-i-card-icon\" aria-hidden=\"true\">\ud83c\udfce\ufe0f<\/div>\n          <div class=\"dps-i-card-title\">Fast Rendering<\/div>\n          <div class=\"dps-i-card-desc\">Use @remotion\/media + concurrency=4. Benchmark 300 frames ~ 49\u201351s on a standard local machine.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- SOP STEPS -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Implementation SOP<\/div>\n      <div class=\"dps-i-section-title\">7 steps to make a complete video<\/div>\n      <div class=\"dps-i-section-desc\">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.<\/div>\n      <div class=\"dps-i-steps\">\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">1<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Read source link and extract key points<\/div>\n            <div class=\"dps-i-step-desc\">Agent fetches the URL you provide, parses the content, and extracts the storyline: hook, key insight, solution, CTA. Must strictly follow the link content \u2014 no inventing outside the source scope.<\/div>\n            <div class=\"dps-i-step-tag\">web_fetch(url)<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">2<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Write 30s script structure<\/div>\n            <div class=\"dps-i-step-desc\">Hook (0\u20133s) \u2192 Insight + value (3\u201318s) \u2192 Solution (18\u201326s) \u2192 Logo + CTA (26\u201330s). Vietnamese with accents, short sentences, avoid text stuffing, fast-paced.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">3<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Select and design visuals for each scene<\/div>\n            <div class=\"dps-i-step-desc\">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.<\/div>\n            <div class=\"dps-i-step-tag\">@remotion\/media \u00b7 Video component<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">4<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Select music with the right vibe and balance volume<\/div>\n            <div class=\"dps-i-step-desc\">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.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">5<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Render quick 10s preview<\/div>\n            <div class=\"dps-i-step-desc\">Run preview to approve ideas before full render. If there is feedback, the agent adjusts immediately at this step before moving to step 6.<\/div>\n            <div class=\"dps-i-step-tag\">npm run render:article:preview<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-connector\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-step-num\">6<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Render final full quality<\/div>\n            <div class=\"dps-i-step-desc\">After preview approval, run final render. Default concurrency = 4. Check if output file exists before delivery.<\/div>\n            <div class=\"dps-i-step-tag\">npm run render:article:final<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-step\">\n          <div class=\"dps-i-step-num\">7<\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-title\">Update Playbook with new feedback<\/div>\n            <div class=\"dps-i-step-desc\">All finalized feedback is recorded in the \u201cFinalized Feedback History\u201d section of the Playbook file. This is the single source of truth for the agent to read for the next task.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- VIDEO STRUCTURE -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Content structure<\/div>\n      <div class=\"dps-i-section-title\">Standard DPS 30-second video template<\/div>\n      <div class=\"dps-i-section-desc\">Every video must follow this sequence. The hook must appear in the first 3 seconds \u2014 otherwise, viewers will scroll past before seeing the value.<\/div>\n      <div class=\"dps-i-timeline\">\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">0 \u2013 3s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83c\udfa3 Strong Hook<\/div>\n            <div class=\"dps-i-timeline-desc\">Intriguing problem, shocking stats, or direct pain point. Sole goal: keep viewers from scrolling in the first 3 seconds.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">3 \u2013 18s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83d\udca1 Insight + Key Value<\/div>\n            <div class=\"dps-i-timeline-desc\">Present core insight and brief evidence. Prominent typography, decisive transition rhythm. Maximum 2\u20133 lines of text per frame.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">18 \u2013 26s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83d\uddfa\ufe0f Solution \/ Roadmap<\/div>\n            <div class=\"dps-i-timeline-desc\">Answer \u201cso what should be done?\u201d. Simple, actionable, maximum 1\u20133 points. No long-winded explanations here.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-timeline-row\">\n          <div class=\"dps-i-timeline-time\">26 \u2013 30s<\/div>\n          <div class=\"dps-i-timeline-content\">\n            <div class=\"dps-i-timeline-label\">\ud83c\udfaf DPS Logo + Clear CTA<\/div>\n            <div class=\"dps-i-timeline-desc\">DPS logo mandatory. Specific CTA: website, hotline, or follow. End decisively \u2014 do not let the video fade to nothing.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- RENDER COMMANDS -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Render Commands<\/div>\n      <div class=\"dps-i-section-title\">Finalized npm commands<\/div>\n      <div class=\"dps-i-section-desc\">Default composition: <span class=\"dps-i-inline-code\">DPSArticle2026Fast<\/span>. Re-run benchmark when changing machines or significant configuration changes.<\/div>\n      <div class=\"dps-i-code-group\">\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">Quick preview \u2014 first 10s (used for idea approval)<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run render:article:preview\" aria-label=\"Copy quick preview command\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run render:article:preview    <span class=\"dps-i-cmt\"># ~15s \u00b7 only renders first 10s<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">Full 30s preview \u2014 low scale<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run render:article:preview:full\" aria-label=\"Copy full preview command\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run render:article:preview:full  <span class=\"dps-i-cmt\"># review entire video flow\/rhythm<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">Final render \u2014 1080\u00d71920 full quality<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run render:article:final\" aria-label=\"Copy final render command\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run render:article:final        <span class=\"dps-i-cmt\"># 1080\u00d71920 \u00b7 concurrency=4<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">Benchmark \u2014 re-measure when changing machines<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npm run benchmark:article\" aria-label=\"Copy benchmark command\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npm<\/span> run benchmark:article           <span class=\"dps-i-cmt\"># measure speed, choose optimal concurrency<\/span><\/div>\n        <\/div>\n        <div class=\"dps-i-code-row\">\n          <div class=\"dps-i-code-header\">\n            <div class=\"dps-i-code-label\">Manual CLI with clear flags<\/div>\n            <button class=\"dps-i-code-copy-btn\" data-copy=\"npx remotion render DPSArticle2026Fast out\/video.mp4 --concurrency=4\" aria-label=\"Copy manual CLI command\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-code-body\"><span class=\"dps-i-kw\">npx<\/span> remotion render <span class=\"dps-i-str\">DPSArticle2026Fast<\/span> out\/video.mp4 \\\\n  \u2013concurrency=4<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- BENCHMARK -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Render Performance<\/div>\n      <div class=\"dps-i-section-title\">Actual benchmark \u2014 300 sample frames<\/div>\n      <div class=\"dps-i-section-desc\">Measured on local machine with composition <span class=\"dps-i-inline-code\">DPSArticle2026Fast<\/span>. Finalized using <strong>concurrency=4<\/strong> for fastest and most stable results.<\/div>\n      <table class=\"dps-i-bench-table\" aria-label=\"Render benchmark table by concurrency\">\n        <thead>\n          <tr>\n            <th class=\"dps-i-th\">Concurrency<\/th>\n            <th class=\"dps-i-th\">Average time<\/th>\n            <th class=\"dps-i-th\">Note<\/th>\n            <th class=\"dps-i-th\">Relative Performance<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td dps-i-best\">4 \u00a0\u2713 Default<\/td>\n            <td class=\"dps-i-td dps-i-best\">~49.8s<\/td>\n            <td class=\"dps-i-td dps-i-best\">Fastest, stable<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"100% Performance\"><div class=\"dps-i-bar-fill\" style=\"width:100%\"><\/div><\/div><\/td>\n          <\/tr>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td\">5<\/td>\n            <td class=\"dps-i-td\">~56.4s<\/td>\n            <td class=\"dps-i-td\">Good<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"75% Performance\"><div class=\"dps-i-bar-fill\" style=\"width:75%\"><\/div><\/div><\/td>\n          <\/tr>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td\">6<\/td>\n            <td class=\"dps-i-td\">~60.3s<\/td>\n            <td class=\"dps-i-td\">Average<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"58% Performance\"><div class=\"dps-i-bar-fill dps-i-bar-slow\" style=\"width:58%\"><\/div><\/div><\/td>\n          <\/tr>\n          <tr class=\"dps-i-tr\">\n            <td class=\"dps-i-td\">7 \u2013 8<\/td>\n            <td class=\"dps-i-td\">~72s<\/td>\n            <td class=\"dps-i-td\">Slowest<\/td>\n            <td class=\"dps-i-td\"><div class=\"dps-i-bar-wrap\" aria-label=\"38% Performance\"><div class=\"dps-i-bar-fill dps-i-bar-slow\" style=\"width:38%\"><\/div><\/div><\/td>\n          <\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    <!-- DESIGN RULES -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Design Standards<\/div>\n      <div class=\"dps-i-section-title\">Motion and Design Standards<\/div>\n      <div class=\"dps-i-section-desc\">Applies to all videos. Agent must comply to ensure DPS brand consistency across all content.<\/div>\n      <div class=\"dps-i-rules-grid\">\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">Fast, decisive transitions<\/span> \u2014 reasonable slide or cut. Do not use fades unless intentionally creating emotion.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">Mobile-first typography<\/span> \u2014 text is large enough to be readable on phones without zooming.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">Strong enough overlay<\/span> \u2014 text must stand out clearly against the background video regardless of light or dark scenes.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">No text stuffing<\/span> \u2014 maximum 2\u20133 lines of text per frame. If more is needed, add a new scene.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">Mandatory DPS Logo<\/span> \u2014 appears clearly in the final CTA scene. A light watermark throughout the video is optional.<\/div>\n        <\/div>\n        <div class=\"dps-i-rule-card\">\n          <div class=\"dps-i-rule-dot\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-rule-text\"><span class=\"dps-i-rule-bold\">Light SFX allowed<\/span> \u2014 whoosh\/pop transitions to enhance rhythm. Do not overuse or overpower the content.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- ASSETS -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Asset sources<\/div>\n      <div class=\"dps-i-section-title\">Free assets \u2014 verified for commercial use<\/div>\n      <div class=\"dps-i-section-desc\">Always confirm the license allows commercial use before use. Avoid footage with clear brand logos without permission.<\/div>\n      <div class=\"dps-i-asset-grid\">\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">Footage<\/div>\n          <div class=\"dps-i-asset-title\">Pexels<\/div>\n          <div class=\"dps-i-asset-desc\">pexels.com \u00b7 Free commercial \u00b7 No attribution required<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">Footage<\/div>\n          <div class=\"dps-i-asset-title\">Pixabay<\/div>\n          <div class=\"dps-i-asset-desc\">pixabay.com \u00b7 Pixabay License \u00b7 Free commercial<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">Footage<\/div>\n          <div class=\"dps-i-asset-title\">Coverr<\/div>\n          <div class=\"dps-i-asset-desc\">coverr.co \u00b7 High-quality free commercial video loops<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">Music<\/div>\n          <div class=\"dps-i-asset-title\">Mixkit<\/div>\n          <div class=\"dps-i-asset-desc\">mixkit.co \u00b7 Free License \u00b7 No attribution required<\/div>\n        <\/div>\n        <div class=\"dps-i-asset-card\">\n          <div class=\"dps-i-asset-type\">Music<\/div>\n          <div class=\"dps-i-asset-title\">Pixabay Music<\/div>\n          <div class=\"dps-i-asset-desc\">pixabay.com\/music \u00b7 Pixabay License \u00b7 Free commercial<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- CHECKLIST -->\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Delivery Checklist<\/div>\n      <div class=\"dps-i-section-title\">6 mandatory points before delivery<\/div>\n      <div class=\"dps-i-section-desc\">Click to check each item upon completion. Agents must confirm all 6 points before sending the video to the client.<\/div>\n      <div class=\"dps-i-checklist\">\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>Video is 9:16<\/strong> \u2014 1080\u00d71920px, no cropping or letterboxing on any side.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>Vietnamese text with accents<\/strong> \u2014 no spelling errors, no missing tone marks or diacritics.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>Content follows source link<\/strong> \u2014 do not invent content outside the scope of the original article provided by the user.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>Includes DPS logo<\/strong> \u2014 appears clearly in the video, at least in the final CTA scene.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>Background music fits the vibe<\/strong> \u2014 volume is lower than the main text\/voice, does not overpower the content.<\/div>\n        <\/div>\n        <div class=\"dps-i-check-item\">\n          <div class=\"dps-i-check-box\" aria-hidden=\"true\"><\/div>\n          <div class=\"dps-i-check-text\"><strong>Output file exists<\/strong> \u2014 rendered successfully, MP4 file is accessible and not corrupted.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"dps-i-footer\">\n    <div class=\"dps-i-footer-inner\">\n      <div class=\"dps-i-footer-brand\">DPS.MEDIA<\/div>\n      <div class=\"dps-i-footer-meta\">DPS Video Agent Playbook \u00b7 Updated: 2026-03-25 \u00b7 Remotion + Agentic Coding<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- MODAL -->\n  <div class=\"dps-i-modal-overlay\" id=\"dps-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Prompt copy window for agent\">\n    <div class=\"dps-i-modal\">\n      <div class=\"dps-i-modal-header\">\n        <div class=\"dps-i-modal-title\">\u26a1 Prompt for Agent Code<\/div>\n        <button class=\"dps-i-modal-close\" id=\"dps-modal-close\" aria-label=\"Close window\">\u2715<\/button>\n      <\/div>\n      <div class=\"dps-i-modal-desc\">\n        Copy the prompt below and paste it into the agent (Claude, Cursor, Windsurf, Copilot\u2026). Replace <strong>[PASTE URL HERE]<\/strong> with the link of the article to be turned into a video. The agent will automatically run through the 7 steps of the DPS Playbook.\n      <\/div>\n      <textarea class=\"dps-i-modal-textarea\" id=\"dps-prompt-text\" readonly aria-label=\"Full prompt content for agent code\">B\u1ea1n l\u00e0 DPS Video Agent. \u0110\u1ecdc file DPS Video Agent Playbook (dps-playbook.md ho\u1eb7c n\u1ed9i dung \u0111\u00e3 cung c\u1ea5p) v\u00e0 th\u1ef1c hi\u1ec7n \u0111\u00fang SOP 7 b\u01b0\u1edbc d\u01b0\u1edbi \u0111\u00e2y.\n\n== Y\u00caU C\u1ea6U ==\nLink ngu\u1ed3n n\u1ed9i dung: [PASTE URL T\u1ea0I \u0110\u00c2Y]\nFormat: Video d\u1ecdc 9:16 (1080\u00d71920), 30 gi\u00e2y\nNg\u00f4n ng\u1eef: Ti\u1ebfng Vi\u1ec7t c\u00f3 d\u1ea5u, kh\u00f4ng l\u1ed7i ch\u00ednh t\u1ea3\nLogo DPS: B\u1eaft bu\u1ed9c c\u00f3 trong video\nNh\u1ea1c n\u1ec1n: Free commercial use, h\u1ee3p vibe th\u01b0\u01a1ng hi\u1ec7u\n\n== QUY TR\u00ccNH ==\nB\u01b0\u1edbc 1: Fetch v\u00e0 ph\u00e2n t\u00edch n\u1ed9i dung t\u1eeb URL \u2014 b\u00e1m \u0111\u00fang link, kh\u00f4ng t\u1ef1 s\u00e1ng t\u00e1c ngo\u00e0i ph\u1ea1m vi\nB\u01b0\u1edbc 2: Vi\u1ebft k\u1ecbch b\u1ea3n theo c\u1ea5u tr\u00fac: Hook (0-3s) \u2192 Insight (3-18s) \u2192 Gi\u1ea3i ph\u00e1p (18-26s) \u2192 Logo + CTA (26-30s)\nB\u01b0\u1edbc 3: Sinh code Remotion cho composition DPSArticle2026Fast \u2014 d\u00f9ng @remotion\/media cho Video component\nB\u01b0\u1edbc 4: Ch\u1ecdn footage t\u1eeb Pexels\/Pixabay\/Coverr v\u00e0 nh\u1ea1c t\u1eeb Mixkit\/Pixabay (ki\u1ec3m tra commercial use)\nB\u01b0\u1edbc 5: Ch\u1ea1y preview \u0111\u1ec3 duy\u1ec7t: npm run render:article:preview\nB\u01b0\u1edbc 6: Sau khi c\u00f3 feedback, render final: npm run render:article:final (\u2013concurrency=4)\nB\u01b0\u1edbc 7: X\u00e1c nh\u1eadn \u0111\u1ee7 6 \u0111i\u1ec3m checklist b\u00e0n giao tr\u01b0\u1edbc khi g\u1eedi file\n\n== TI\u00caU CHU\u1ea8N ==\n\u2013 Transition: nhanh, d\u1ee9t kho\u00e1t (slide\/cut). Kh\u00f4ng fade m\u1edd.\n\u2013 Typography: r\u00f5, \u0111\u1ecdc \u0111\u01b0\u1ee3c tr\u00ean mobile, overlay \u0111\u1ee7 \u0111\u1eadm\n\u2013 Kh\u00f4ng nh\u1ed3i qu\u00e1 2-3 d\u00f2ng text\/frame\n\u2013 Volume nh\u1ea1c n\u1ec1n th\u1ea5p h\u01a1n text\/voice ch\u00ednh\n\u2013 Kh\u00f4ng h\u1ecfi l\u1ea1i nh\u1eefng g\u00ec \u0111\u00e3 ch\u1ed1t trong Playbook \u2014 ch\u1ee7 \u0111\u1ed9ng l\u00e0m v\u00e0 b\u00e1o c\u00e1o k\u1ebft qu\u1ea3.<\/textarea>\n      <div class=\"dps-i-modal-footer\">\n        <button class=\"dps-i-btn-secondary\" id=\"dps-modal-cancel\">Close<\/button>\n        <button class=\"dps-i-btn-primary\" id=\"dps-modal-copy\" aria-label=\"Copy full prompt to clipboard\">\ud83d\udccb Copy Prompt<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div><script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  var openBtn = document.getElementById('dps-open-prompt-btn');\n  var modal = document.getElementById('dps-modal');\n  var closeBtn = document.getElementById('dps-modal-close');\n  var cancelBtn = document.getElementById('dps-modal-cancel');\n  var copyModalBtn = document.getElementById('dps-modal-copy');\n  var promptText = document.getElementById('dps-prompt-text');\n\n  function openModal() {\n    if (modal) { modal.classList.add('dps-i-open'); }\n  }\n  function closeModal() {\n    if (modal) { modal.classList.remove('dps-i-open'); }\n  }\n  function doCopy(text, btn, label) {\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(text).then(function() {\n        btn.textContent = label;\n        setTimeout(function() {\n          if (btn.id === 'dps-modal-copy') {\n            btn.textContent = '\ud83d\udccb Copy Prompt';\n          } else {\n            btn.textContent = 'Copy';\n          }\n        }, 2000);\n      });\n    } else {\n      var tmp = document.createElement('textarea');\n      tmp.value = text;\n      document.body.appendChild(tmp);\n      tmp.select();\n      document.execCommand('copy');\n      document.body.removeChild(tmp);\n      btn.textContent = label;\n      setTimeout(function() {\n        if (btn.id === 'dps-modal-copy') {\n          btn.textContent = '\ud83d\udccb Copy Prompt';\n        } else {\n          btn.textContent = 'Copy';\n        }\n      }, 2000);\n    }\n  }\n\n  if (openBtn) { openBtn.addEventListener('click', openModal); }\n  if (closeBtn) { closeBtn.addEventListener('click', closeModal); }\n  if (cancelBtn) { cancelBtn.addEventListener('click', closeModal); }\n  if (modal) {\n    modal.addEventListener('click', function(e) {\n      if (e.target === modal) { closeModal(); }\n    });\n  }\n  if (copyModalBtn) {\n    copyModalBtn.addEventListener('click', function() {\n      if (promptText) {\n        copyModalBtn.classList.add('dps-i-copied');\n        doCopy(promptText.value, copyModalBtn, '\u2705 \u0110\u00e3 copy!');\n        setTimeout(function() { copyModalBtn.classList.remove('dps-i-copied'); }, 2000);\n      }\n    });\n  }\n\n  var codeBtns = document.querySelectorAll('.dps-i-code-copy-btn');\n  var i = 0;\n  while (i < codeBtns.length) {\n    (function(btn) {\n      btn.addEventListener('click', function() {\n        var txt = btn.getAttribute('data-copy');\n        if (txt) { doCopy(txt, btn, 'Copied!'); }\n      });\n    })(codeBtns[i]);\n    i = i + 1;\n  }\n\n  var items = document.querySelectorAll('.dps-i-check-item');\n  var j = 0;\n  while (j < items.length) {\n    (function(item) {\n      item.addEventListener('click', function() {\n        var box = item.querySelector('.dps-i-check-box');\n        if (item.classList.contains('dps-i-chk')) {\n          item.classList.remove('dps-i-chk');\n          if (box) { box.textContent = ''; }\n        } else {\n          item.classList.add('dps-i-chk');\n          if (box) { box.textContent = '\u2713'; }\n        }\n      });\n    })(items[j]);\n    j = j + 1;\n  }\n});\n<\/script>\n<style>\r\n.lwrp.link-whisper-related-posts{\r\n            \r\n            margin-top: 40px;\nmargin-bottom: 30px;\r\n        }\r\n        .lwrp .lwrp-title{\r\n            \r\n            \r\n        }.lwrp .lwrp-description{\r\n            \r\n            \r\n\r\n        }\r\n        .lwrp .lwrp-list-container{\r\n        }\r\n        .lwrp .lwrp-list-multi-container{\r\n            display: flex;\r\n        }\r\n        .lwrp .lwrp-list-double{\r\n            width: 48%;\r\n        }\r\n        .lwrp .lwrp-list-triple{\r\n            width: 32%;\r\n        }\r\n        .lwrp .lwrp-list-row-container{\r\n            display: flex;\r\n            justify-content: space-between;\r\n        }\r\n        .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n            width: calc(33% - 20px);\r\n        }\r\n        .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n            \r\n            max-width: 150px;\r\n        }\r\n        .lwrp .lwrp-list-item img{\r\n            max-width: 100%;\r\n            height: auto;\r\n            object-fit: cover;\r\n            aspect-ratio: 1 \/ 1;\r\n        }\r\n        .lwrp .lwrp-list-item.lwrp-empty-list-item{\r\n            background: initial !important;\r\n        }\r\n        .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n        .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n            \r\n            \r\n            \r\n            \r\n        }@media screen and (max-width: 480px) {\r\n            .lwrp.link-whisper-related-posts{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-title{\r\n                \r\n                \r\n            }.lwrp .lwrp-description{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-list-multi-container{\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-multi-container ul.lwrp-list{\r\n                margin-top: 0px;\r\n                margin-bottom: 0px;\r\n                padding-top: 0px;\r\n                padding-bottom: 0px;\r\n            }\r\n            .lwrp .lwrp-list-double,\r\n            .lwrp .lwrp-list-triple{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-row-container{\r\n                justify-content: initial;\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n                \r\n                max-width: initial;\r\n            }\r\n            .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n            .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n                \r\n                \r\n                \r\n                \r\n            };\r\n        }<\/style>\r\n<div id=\"link-whisper-related-posts-widget\" class=\"link-whisper-related-posts lwrp\">\r\n            <div class=\"lwrp-title\">Related Posts<\/div>    \r\n        <div class=\"lwrp-list-container\">\r\n                                <div class=\"lwrp-list lwrp-list-row-container lwrp-list-double-row\">\r\n                <div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/future-of-messenger-business-in-the-next-2-years\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">The future of Messenger Business in the next 2 years<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/dns-configuration-for-website-speed-and-security-optimization\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Configure DNS for your website: Optimize speed and security<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/how-to-integrate-google-translate-into-chatwoot\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">7 Effective Ways to Integrate Google Translate into Chatwoot<\/span><\/a><\/div>                <\/div>\r\n                            <div class=\"lwrp-list lwrp-list-row-container lwrp-list-double-row\">\r\n                <div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/support-unlocking-disabled-facebook-ads-manager-account\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Support for unlocking disabled Facebook Ads Manager accounts<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/what-is-meta-business-and-how-to-set-up-a-business-advertising-account\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">What is Meta Business? How to Set Up a Business Advertising Account<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/n8n-node-for-pexels-automate-search-photos-and-videos-free\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">n8n Node for Pexels: Automate free photo and video search<\/span><\/a><\/div>                <\/div>\r\n                <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfac DPS Video Agent Playbook L\u00e0m video v\u1edbi Remotionc\u00f9ng Agentic Coding H\u01b0\u1edbng d\u1eabn chu\u1ea9n cho ng\u01b0\u1eddi m\u1edbi d\u00f9ng Remotion \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng ho\u00e1 s\u1ea3n xu\u1ea5t video ng\u1eafn theo ti\u00eau chu\u1ea9n DPS.MEDIA \u2014 t\u1eeb setup \u0111\u1ebfn render final ch\u1ec9 b\u1eb1ng v\u00e0i l\u1ec7nh npm v\u00e0 m\u1ed9t prompt g\u1eedi agent. \u26a1 Copy Prompt cho Agent \ud83d\udcd0 9:16 \u00b7 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":38005,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"rankmath_keywords":{"primary":"","secondary":[""]},"yoast_keywords":{"primary":"","secondary":[]},"yoast_focuskw":"","rankmath_focuskw":"","seo_keywords":{"primary":"","secondary":[""]},"_links":{"self":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/38001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/comments?post=38001"}],"version-history":[{"count":2,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/38001\/revisions"}],"predecessor-version":[{"id":38004,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/38001\/revisions\/38004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/media\/38005"}],"wp:attachment":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/media?parent=38001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/categories?post=38001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/tags?post=38001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}