1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>InfoseekAI - AI Video Maker Agent for Seedance</title> 7 <meta name="description" content="Use the AI Video Maker Agent in ChatGPT, Claude, and other AI apps for prompt-based video generation, media references, async jobs, and shareable artifacts powered by Seedance." /> 8 <meta name="robots" content="index,follow,max-image-preview:large" /> 9 <link rel="canonical" href="https://infoseek.ai/mcp/a7034de3f7/seedance-video/" /> 10 11 <meta property="og:title" content="AI Video Maker Agent for Seedance" /> 12 <meta property="og:description" content="Create, monitor, list, and share AI video generation jobs from ChatGPT, Claude, Gemini, and internal AI agents with Seedance." /> 13 <meta property="og:url" content="https://infoseek.ai/mcp/a7034de3f7/seedance-video/" /> 14 <meta property="og:type" content="website" /> 15 <meta property="og:image" content="https://infoseek.ai/assets/images/logos/infoseek-logo-big-transparent.png" /> 16 17 <meta name="twitter:card" content="summary_large_image" /> 18 <meta name="twitter:title" content="AI Video Maker Agent for Seedance" /> 19 <meta name="twitter:description" content="Create, monitor, list, and share AI video generation jobs from AI apps and agents with Seedance." /> 20 <meta name="twitter:image" content="https://infoseek.ai/assets/images/logos/infoseek-logo-big-transparent.png" /> 21 <meta name="twitter:url" content="https://infoseek.ai/mcp/a7034de3f7/seedance-video/" /> 22 23
23<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
23 24 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet"> 25 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0&display=swap" rel="stylesheet" /> 26 <link rel="stylesheet" href="/assets/styles/landing.css" type="text/css"> 27 <link rel="icon" href="https://infoseek.ai/assets/images/logos/infoseek.ico" type="image/x-icon"> 28 <style> 29 :root { 30 --darkblue: #2f5478; 31 --code-bg: #eff6fb; 32 } 33 code, 34 pre { 35 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 36 } 37 .json-key { 38 color: #467599; 39 } 40 .json-highlight { 41 background: rgba(158, 216, 219, 0.28); 42 border: 1px solid rgba(70, 117, 153, 0.12); 43 } 44 .media-frame { 45 background: 46 linear-gradient(135deg, rgba(239, 246, 251, 0.98), rgba(255, 255, 255, 0.96)), 47 url("https://infoseek.ai/assets/images/landing/enrich-your-data-narrow.jpg") center/cover; 48 } 49 .video-hero-shell { 50 border-radius: 28px; 51 padding: 8px; 52 background: rgba(255, 255, 255, 0.72); 53 border: 1px solid rgba(255, 255, 255, 0.86); 54 box-shadow: 0 18px 42px rgba(29, 51, 84, 0.16); 55 } 56 .video-frame { 57 display: block; 58 width: 100%; 59 aspect-ratio: 9 / 16; 60 max-height: 620px; 61 object-fit: cover; 62 background: #111827; 63 border-radius: 22px; 64 } 65 .creative-card { 66 position: relative; 67 } 68 .creative-thumb { 69 width: 62.5%; 70 margin: 0 auto; 71 overflow: hidden; 72 border-radius: 28px; 73 padding: 6px; 74 background: #eef0ff; 75 box-shadow: 76 0 10px 24px rgba(0,0,0,.10), 77 inset 0 0 0 1px rgba(255,255,255,.85); 78 position: relative; 79 } 80 .creative-video { 81 position: relative; 82 z-index: 1; 83 width: 100%; 84 aspect-ratio: 9 / 16; 85 display: block; 86 object-fit: cover; 87 border-radius: 22px; 88 background: #111827; 89 border: 0.5px solid #e6e8f2; 90 } 91 .creative-placeholder { 92 min-height: 320px; 93 border-radius: 22px; 94 border: 0.5px solid #e6e8f2; 95 background: linear-gradient(135deg, #f7fbff, #ffffff); 96 display: flex; 97 align-items: center; 98 justify-content: center; 99 text-align: center; 100 color: var(--darkblue); 101 padding: 1.5rem; 102 } 103 .prompt-card { 104 border: 1px solid rgba(70, 117, 153, 0.18); 105 background: rgba(255, 255, 255, 0.86); 106 box-shadow: 0 10px 24px rgba(29, 51, 84, 0.08); 107 } 108 .tutorial-card { 109 position: relative; 110 } 111 .tutorial-media { 112 overflow: hidden; 113 border-radius: 22px; 114 border: 1px solid rgba(70, 117, 153, 0.14); 115 background: #f7fbff; 116 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72); 117 } 118 .tutorial-video { 119 display: block; 120 width: 100%; 121 aspect-ratio: 16 / 9; 122 object-fit: contain; 123 background: #111827; 124 } 125 .tutorial-reference-frame { 126 display: flex; 127 align-items: center; 128 justify-content: center; 129 width: 100%; 130 aspect-ratio: 1329 / 830; 131 overflow: hidden; 132 margin-top: 10px; 133 background: #111827; 134 } 135 .tutorial-image { 136 display: block; 137 width: 100%; 138 height: 100%; 139 object-fit: contain; 140 background: #111827; 141 } 142 .tutorial-setup-image { 143 display: block; 144 width: 100%; 145 height: 100%; 146 object-fit: contain; 147 border-radius: 18px; 148 background: #111827; 149 box-shadow: 0 12px 28px rgba(29, 51, 84, 0.14); 150 } 151 .tutorial-setup-image-frame { 152 display: block; 153 width: 100%; 154 aspect-ratio: 6 / 5; 155 overflow: hidden; 156 border-radius: 18px; 157 background: #f7fbff; 158 } 159 .storyboard-preview { 160 display: block; 161 width: 100%; 162 height: auto; 163 border-radius: 18px; 164 background: #111827; 165 box-shadow: 0 12px 28px rgba(29, 51, 84, 0.14); 166 } 167 .storyboard-result-video { 168 display: block; 169 width: min(100%, 420px); 170 aspect-ratio: 9 / 16; 171 margin: 0 auto; 172 object-fit: contain; 173 border-radius: 18px; 174 background: #111827; 175 box-shadow: 0 12px 28px rgba(29, 51, 84, 0.14); 176 } 177 @media (max-width: 640px) { 178 .creative-thumb { 179 width: 100%; 180 } 181 } 182 </style> 183
183<script src="/assets/js/site.min.js?v=20260920T223950PT" defer></script>
vendor: 67 bytes, lines 183-185
183 184 185 <script async src="https://www.googletagmanager.com/gtag/js?id=
185G-H21LX2X437
vendor: 14 bytes, lines 185-186
185"></script> 186
186<script> 187
vendor: 139 bytes, lines 187-190
187window.dataLayer = window.dataLayer || []; 188 function gtag(){dataLayer.push(arguments);} 189 gtag('js', new Date()); 190 gtag('config', '
190G-H21LX2X437
vendor: 6 bytes, lines 190-191
190'); 191
191</script>
191 192 193
193<script type="application/ld+json"> 194 { 195 "@context": "https://schema.org", 196 "@graph": [ 197 { 198 "@type": "WebSite", 199 "@id": "https://infoseek.ai/#website", 200 "url": "https://infoseek.ai/", 201 "name": "InfoseekAI" 202 }, 203 { 204 "@type": "Organization", 205 "@id": "https://infoseek.ai/#organization", 206 "name": "InfoseekAI", 207 "url": "https://infoseek.ai/", 208 "logo": { 209 "@type": "ImageObject", 210 "@id": "https://infoseek.ai/#logo", 211 "url": "https://infoseek.ai/assets/images/logos/infoseek-logo-big-transparent.png" 212 } 213 }, 214 { 215 "@type": "WebPage", 216 "@id": "https://infoseek.ai/mcp/a7034de3f7/seedance-video/#webpage", 217 "url": "https://infoseek.ai/mcp/a7034de3f7/seedance-video/", 218 "name": "AI Video Maker Agent for Seedance", 219 "description": "Use the AI Video Maker Agent from ChatGPT, Claude, and other AI apps for async video jobs, media references, polling, and shareable output artifacts powered by Seedance.", 220 "isPartOf": { "@id": "https://infoseek.ai/#website" }, 221 "about": { "@id": "https://infoseek.ai/#organization" }, 222 "publisher": { "@id": "https://infoseek.ai/#organization" } 223 }, 224 { 225 "@type": "FAQPage", 226 "@id": "https://infoseek.ai/mcp/a7034de3f7/seedance-video/#faq", 227 "url": "https://infoseek.ai/mcp/a7034de3f7/seedance-video/#faq", 228 "isPartOf": { "@id": "https://infoseek.ai/mcp/a7034de3f7/seedance-video/#webpage" }, 229 "mainEntity": [ 230 { 231 "@type": "Question", 232 "name": "What's the easiest way to make videos with Seedance?", 233 "acceptedAnswer": { 234 "@type": "Answer", 235 "text": "The easiest way is right here in ChatGPT: use the AI Video Maker Agent and describe what you want in plain English. It uses Seedance 2 / 2.5 for video generation. For best results, specify the subject, action, setting, style, duration, and audio or dialogue. You can also attach an image and ask it to animate that image." 236 } 237 }, 238 { 239 "@type": "Question", 240 "name": "What's the best way to make videos in ChatGPT?", 241 "acceptedAnswer": { 242 "@type": "Answer", 243 "text": "Use the AI Video Maker Agent app for ChatGPT, write a clear prompt with the subject, action, camera movement, style, aspect ratio, and duration, then review the result in chat. You can also attach reference media when the visual identity needs to stay consistent." 244 } 245 }, 246 { 247 "@type": "Question", 248 "name": "Can I use Seedance as an AI video generator from text?", 249 "acceptedAnswer": { 250 "@type": "Answer", 251 "text": "Yes. The AI Video Maker Agent turns a natural-language prompt into a short-form video with Seedance, making it useful for social content, product stories, cinematic concepts, and creative prototypes." 252 } 253 }, 254 { 255 "@type": "Question", 256 "name": "Can Seedance create a video from an image?", 257 "acceptedAnswer": { 258 "@type": "Answer", 259 "text": "Yes. Add an image reference and describe the motion, framing, subject behavior, and scene you want. The reference is preserved as a handle so the generation prompt can clearly point to it." 260 } 261 }, 262 { 263 "@type": "Question", 264 "name": "Can I use video or audio references with Seedance?", 265 "acceptedAnswer": { 266 "@type": "Answer", 267 "text": "Yes. The AI Video Maker Agent supports image, video, and audio references. Use them to guide the visual subject, motion, pacing, or sound direction while keeping the creative instructions in the prompt." 268 } 269 }, 270 { 271 "@type": "Question", 272 "name": "How do I write a good AI Video Maker Agent prompt with Seedance?",
273 "acceptedAnswer": { 274 "@type": "Answer", 275 "text": "Describe the subject first, then specify the action, environment, camera shot or movement, visual style, lighting, audio direction, aspect ratio, and duration. Concrete shot-by-shot instructions usually produce more controllable results than broad requests." 276 } 277 }, 278 { 279 "@type": "Question", 280 "name": "How do I edit a video?", 281 "acceptedAnswer": { 282 "@type": "Answer", 283 "text": "Upload the video as a reference, then describe the specific change you want in a focused prompt. Explain what should change and what should stay the same, such as the characters, setting, lighting, camera style, or pacing." 284 } 285 }, 286 { 287 "@type": "Question", 288 "name": "How do I extend a video?", 289 "acceptedAnswer": { 290 "@type": "Answer", 291 "text": "Use the previous output as the next video reference and say exactly how much longer it should be, such as âextend the video by 5 seconds.â Describe one clear next action and preserve the original characters, environment, lighting, camera style, and sound." 292 } 293 }, 294 { 295 "@type": "Question", 296 "name": "How long of a video can I make?", 297 "acceptedAnswer": { 298 "@type": "Answer", 299 "text": "Seedance 2.5 supports videos up to 30 seconds long. Other Seedance models support videos up to 15 seconds long. Use the extend feature to create longer videos." 300 } 301 }, 302 { 303 "@type": "Question", 304 "name": "Can I make AI videos with Seedance in Claude?", 305 "acceptedAnswer": { 306 "@type": "Answer", 307 "text": "Yes. Connect the AI Video Maker Agent MCP to Claude, authenticate with Infoseek, and ask Claude to create a video from a prompt and optional references. Claude can then follow the job status and return the completed artifact." 308 } 309 }, 310 { 311 "@type": "Question", 312 "name": "How much does an AI Video Maker Agent video cost?", 313 "acceptedAnswer": { 314 "@type": "Answer", 315 "text": "You do not need a subscription to use the AI Video Maker Agent. It uses usage-based pricing, and the cost depends on factors such as video resolution and duration, so credit your Infoseek account before starting a generation." 316 } 317 } 318 ] 319 } 320 ] 321 } 322 </script>
322 323</head> 324<body class="bg-light text-darkest"> 325 <header id="siteHeader" class="sticky top-0 z-40 backdrop-blur bg-white/90 border-b border-light"> 326 <div class="mx-auto max-w-7xl px-4"> 327 <div class="h-16 flex items-center gap-6"> 328 <a href="/" class="flex items-center gap-2 shrink-0"> 329 <img src="https://infoseek.ai/assets/images/logos/infoseek-logo-big-transparent.png" class="h-8 w-8" alt="Infoseek logo"> 330 <span class="text-darkest text-lg tracking-tight">InfoseekAI</span> 331 </a> 332 <nav class="hidden md:flex items-center gap-6 text-sm text-dark ml-3"> 333 <a href="/mcp" class="inline-flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[var(--darkblue)]"> 334 <span>MCP Directory</span> 335 </a> 336 </nav> 337 <div class="ml-auto"></div> 338 </div> 339 </div> 340 </header> 341 342 <main id="main-content"> 343 <section id="top" class="bg-light relative overflow-hidden"> 344 <div class="mx-auto max-w-7xl px-4 py-16 md:py-20 grid lg:grid-cols-[1.12fr_0.88fr] gap-10 items-center"> 345 <div class="space-y-6"> 346 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-white px-4 py-2 text-sm text-dark"> 347 <span class="material-symbols-outlined text-dark">movie_edit</span> 348 <span>AI Video Maker Agent in Infoseek</span> 349 </div> 350 <h1 class="text-darkest text-4xl sm:text-5xl lg:text-6xl leading-tight tracking-tight">AI Video Maker Agent</h1> 351 <p class="text-lg text-dark max-w-3xl"> 352 Turn a prompt, image, video, or audio reference into polished short-form video using the industry leading Seedance 2. Use it for social posts, product stories, cinematic concepts, and AI-assisted creative production. 353 </p> 354 <ul class="space-y-2 text-darkest"> 355 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span> Our agent UX helps optimize your prompt and set the proper configuration, making it much easier to generate a high-quality video</li> 356 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span> Create videos from natural-language creative direction</li> 357 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span> Use images, video, or audio as generation references</li> 358 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span> Download or share completed video artifacts</li> 359 <li class="flex items-start gap-2"><span class="inline-grid h-6 w-6 shrink-0 place-items-center text-dark text-xl leading-none" aria-hidden="true">$</span><span>Usage based pricing. Cost depends on video resolution and duration. Credit your account to get started.</span></li> 360 </ul> 361 <div class="pt-1 flex flex-col items-start gap-3"> 362 <a href="https://chatgpt.com/plugins/plugin_asdk_app_6a1f42809af88191ae3055304a69523a" target="_blank" rel="noopener noreferrer" class="inline-flex h-14 items-center justify-center rounded-lg btn-red px-7 text-lg shadow-md"> 363 Try it now in ChatGPT 364 </a> 365 <a href="#claude-setup" class="inline-flex h-12 items-center justify-center rounded-lg border border-[var(--red)] bg-white px-6 text-[var(--red)] shadow-md"> 366 Try it now in Claude 367 </a> 368 </div> 369 </div> 370 371 <div class="video-hero-shell"> 372 <video class="video-frame" src="https://infoseek.ai/pub/shared/files/5c70c089b2bd21e4.mp4" controls muted autoplay loop playsinline preload="metadata" poster="https://infoseek.ai/assets/images/logos/infoseek-logo-big-transparent.png"> 373 Your browser does not support the video tag. 374 </video> 375 <div class="prompt-card mt-4 rounded-2xl p-4"> 376 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 377 <p class="mt-2 text-darkest text-sm leading-6"> 378 "Cinematic butterfly lighting. Medium shot of a handsome pianist wearing a simple, elegant black suit. His hands move smoothly across the keys. Cut to close-up: his face immersed in music, eyes gently closed, focused and serene expression. Audio: beautiful piano music and subtle ambient audience noise from a concert hall." 379 </p> 380 </div> 381 </div> 382 </div> 383 </section> 384 385 <section id="creative-possibilities" class="py-16 md:py-20 bg-white border-t border-light"> 386 <div class="mx-auto max-w-7xl px-4"> 387 <h2 class="text-darkest text-3xl sm:text-4xl font-normal tracking-tight mb-6">Explore Your Creative Side</h2> 388 <div class="grid sm:grid-cols-2 gap-6"> 389 <article class="card creative-card rounded-2xl p-3"> 390 <h3 class="text-sm font-medium text-dark mb-2">Create an ultra-realistic immersive experience.</h3> 391 <div class="creative-thumb"> 392 <video class="creative-video" src="https://infoseek.ai/assets/videos/girl-twirling.mp4" controls muted loop playsinline preload="metadata"></video> 393 </div> 394 <div class="prompt-card mt-4 rounded-2xl p-4"> 395 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 396 <p class="mt-2 text-darkest text-sm leading-6"> 397 360-degree panoramic camera selfie. The camera rotates counterclockwise, capturing the dessert shop interior. Then show a woman posing in different scenes, wearing different outfits and using different props. ãNote: Use of real-person images references for video generation not allowed. Provide non indentifiable person images with blurred faces to generate similar people.ã 398 </p> 399 </div> 400 </article> 401 <article class="card creative-card rounded-2xl p-3"> 402 <h3 class="text-sm font-medium text-dark mb-2">Drag and drop images, and video as references</h3> 403 <div class="creative-thumb"> 404 <video class="creative-video" src="https://infoseek.ai/assets/videos/car-sketch.mp4" controls muted loop playsinline preload="metadata"></video> 405 </div> 406 <div class="prompt-card mt-4 rounded-2xl p-4"> 407 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 408 <p class="mt-2 text-darkest text-sm leading-6"> 409 A car sketch on paper. The camera pushes in. The sketch lines rise off the paper, gaining dimensionality and color, transforming into a photorealistic 3D car driving on a road. 410 </p> 411 </div> 412 </article> 413 <article class="card creative-card rounded-2xl p-3"> 414 <h3 class="text-sm font-medium text-dark mb-2">Cinematic output quality</h3> 415 <div class="creative-thumb"> 416 <video class="creative-video" src="https://infoseek.ai/assets/videos/game-street-fight.mp4" controls muted loop playsinline preload="metadata"></video> 417 </div> 418 <div class="prompt-card mt-4 rounded-2xl p-4"> 419 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 420 <p class="mt-2 text-darkest text-sm leading-6"> 421 Cyberpunk style, game CGI, dark scene. A run-down city corner. A young assassin fights enemies. The camera rapidly pulls back, revealing the assassin surrounded by multiple enemies. The assassin wields a lightsaber and fights fluidly, defeating enemies one by one. Enemies collapse. The entire sequence is fast yet smooth. At the end, the assassin looks up toward the camera. The video blends instantaneous "teleportation" effects with visually smooth transitions. 422 </p> 423 </div> 424 </article> 425 <article class="card creative-card rounded-2xl p-3"> 426 <h3 class="text-sm font-medium text-dark mb-2">Immersive Audio-visual Experience</h3> 427 <div class="creative-thumb"> 428 <video class="creative-video" src="https://infoseek.ai/assets/videos/product-sh
428owcase.mp4" controls muted loop playsinline preload="metadata"></video> 429 </div> 430 <div class="prompt-card mt-4 rounded-2xl p-4"> 431 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 432 <p class="mt-2 text-darkest text-sm leading-6"> 433 Ultra-luxury perfume commercial. Music: dreamy electronic soundscape with steady drum beats. Macro shot: a transparent rectangular glass bottle surrounded by violently swirling purple liquid. Liquid churns with bubbles and splashes, accompanied by crisp water sounds. Dissolve transition to surface ripples of purple liquid. Close-up of delicate iris flowers floating underwater. Cut to: perfume bottle tilted on textured light surface, refracting dreamy halos. Then side still-life close-up with sharp focus on the "Iris" label in the upper-left of frame, minimal clean background. Camera tilts up to upper half of bottle rotating slowly left. Style shift: a Latina female model elegantly lifts the perfume bottle to her neck and shoulder in a pure white high-end studio background, gazing into camera. Music: rhythmic modern electronic throughout. 434 </p> 435 </div> 436 </article> 437 </div> 438 </div> 439 </section> 440 441 <section id="tutorials" class="py-16 md:py-20 bg-light border-t border-light"> 442 <div class="mx-auto max-w-7xl px-4"> 443 <div class="mb-10"> 444 <div> 445 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-white px-4 py-2 text-sm text-dark"> 446 <span class="material-symbols-outlined text-dark">school</span> 447 <span>Video Maker Tutorials</span> 448 </div> 449 <h2 class="mt-5 text-darkest text-3xl sm:text-4xl font-normal tracking-tight">Tutorials</h2> 450 </div> 451 </div> 452 453 <div class="grid lg:grid-cols-3 gap-6"> 454 <article class="card tutorial-card rounded-2xl p-3 bg-white"> 455 <h3 class="text-xl font-normal text-darkest mb-3">Multi Angle Product Video</h3> 456 <div class="tutorial-media"> 457 <video class="tutorial-video" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/tutorial-multi-angle.mp4" controls muted loop playsinline preload="metadata" poster="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/multi-angle-camera-references.png"> 458 Your browser does not support the video tag. 459 </video> 460 <div class="tutorial-reference-frame"> 461 <img class="tutorial-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/multi-angle-camera-references.png" alt="Three camera reference images labeled Image 1, Image 2, and Image 3"> 462 </div> 463 </div> 464 <p class="mt-4 text-sm text-dark leading-6">Use multi-angle subject references and multi-image references in a precise order.</p> 465 <div class="prompt-card mt-4 rounded-2xl p-4"> 466 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 467 <p class="mt-2 text-darkest text-sm leading-6">Extract the camera from <strong>Image 1</strong>, <strong>Image 2</strong>, and <strong>Image 3</strong>, replace the background with white. The camera sits on a white table, the lens focuses on the camera in close-up, then slowly rotates around the camera as the main subject, clearly showcasing the front, side, and back.</p> 468 </div> 469 </article> 470 471 <article class="card tutorial-card rounded-2xl p-3 bg-white"> 472 <h3 class="text-xl font-normal text-darkest mb-3">Edit Reference Video</h3> 473 <div class="tutorial-media"> 474 <video class="tutorial-video" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/tutorial-edit-reference.mp4" controls muted loop playsinline preload="metadata" poster="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/edit-reference-before-after.png"> 475 Your browser does not support the video tag. 476 </video> 477 <div class="tutorial-reference-frame"> 478 <img class="tutorial-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/edit-reference-before-after.png" alt="Before and after reference showing a squirrel changed into a pig"> 479 </div> 480 </div> 481 <p class="mt-4 text-sm text-dark leading-6">Upload a reference video and make a focused edit with a simple prompt.</p> 482 <div class="prompt-card mt-4 rounded-2xl p-4"> 483 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 484 <p class="mt-2 text-darkest text-sm leading-6">Change the squirrel to a pig</p> 485 </div> 486 </article> 487 488 <article class="card tutorial-card rounded-2xl p-3 bg-white"> 489 <h3 class="text-xl font-normal text-darkest mb-3">Using Video and Image References</h3> 490 <div class="tutorial-media"> 491 <video class="tutorial-video" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/tutorial-video-image-references.mp4" controls muted loop playsinline preload="metadata" poster="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/video-image-reference-setup.png"> 492 Your browser does not support the video tag. 493 </video> 494 <div class="tutorial-reference-frame"> 495 <img class="tutorial-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/video-image-reference-setup.png" alt="Video Maker setup showing a fight-scene output, action reference video, and two character images"> 496 </div> 497 </div> 498 <p class="mt-4 text-sm text-dark leading-6">Combine an action reference video with character images while keeping the image order explicit.</p> 499 <div class="prompt-card mt-4 rounded-2xl p-4"> 500 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 501 <p class="mt-2 text-darkest text-sm leading-6">Reference the character actions and camera language from <strong>Video 1</strong>, generate a fight scene between <strong>Image 2</strong> and <strong>Image 1</strong>. <strong>Image 2</strong> is the character on the left, <strong>Image 1</strong> is the character on the right.</p> 502 </div> 503 </article> 504 505 <article class="card tutorial-card rounded-2xl p-3 bg-white"> 506 <h3 class="text-xl font-normal text-darkest mb-3">Using text in Video</h3> 507 <div class="tutorial-media"> 508 <div class="tutorial-reference-frame"> 509 <img class="tutorial-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/ai-video-text.jpg" alt="Illustrated coffee shop scene with a couple sitting at a table and a text-filled menu board"> 510 </div> 511 </div> 512 <p class="mt-4 text-sm text-dark leading-6">Keep generated text light and reliable: reserve space for the wording, then add the final copy in an editor.</p> 513 <div class="prompt-card mt-4 rounded-2xl p-4"> 514 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 515 <p class="mt-2 text-darkest text-sm leading-6">No text, no captions, no logos. Leave clean negative space in the upper third for a title.</p> 516 <p class="mt-4 text-sm uppercase tracking-[0.16em] text-dark">Keep in mind</p> 517 <p class="mt-2 text-darkest text-sm leading-6">Use AI-generated text only for decorative, nonessential detailsânever critical prices, URLs, names, product claims, or subtitles. If you must generate text inside the video generator, keep it very short (1â5 words), large and high-contrast, static, in one location, on screen for the entire shot, and quoted exactly in the prompt.</p> 518 <p class="mt-4 text-sm uppercase tracking-[0.16em] text-dark">Example</p> 519 <p class="mt-2 text-darkest text-sm leading-6">At the end of the shot, display the exact words âBOOK DIRECTâ in uppercase white sans-serif letters, centered in the clean sky area, large and highly legible, held completely static for the final three seconds. No other letters, words, captions, or logos.</p> 520 </div> 521 </article> 522 523 <article class="card tutorial-card rounded-2xl p-3 bg-white"> 524 <h3 class="text-xl font-normal text-darkest mb-3">Extending Video</h3> 525 <div class="tutorial-media"> 526 <div class="tutorial-reference-frame !mt-0"> 527 <img class="tutorial-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/video-extension-reference.webp" alt="Anime-style school walkway scene with a girl walking beneath cherry blossoms at sunset"> 528 </div> 529 </div> 530 <p class="mt-4 text-sm text-dark leading-6">Continue from the previous output with one clearly defined next action while preserving the clipâs camera, lighting, pacing, style, sound, and aspect ratio.</p> 531 <div class="prompt-card mt-4 rounded-2xl p-4"> 532 <p class="text-sm uppercase tracking-[0.16em] text-dark">Prompt</p> 533 <p class="mt-2 text-darkest text-sm leading-6">Continuing from <strong>@Video1</strong>, extend the video by 5 seconds. Keep the same characters, environment, lighting, camera style, and sound design. Show [one clearly defined next action]. End with [specific final pose or composition].</p> 534 <p class="mt-4 text-sm uppercase tracking-[0.16em] text-dark">Keep in mind</p> 535 <p class="mt-2 text-darkest text-sm leading-6">Feed the previous output back as the next video reference. State the added duration explicitly. Describe one next story beat, not an entire new sequence. Preserve the existing visual language: camera movement, lighting, pacing, style, and sound. Decide the aspect ratio in the original clip; extensions inherit it.</p> 536 </div> 537 </article> 538 </div> 539 </div> 540 </section> 541 542 <section id="attach" class="py-16 md:py-20 bg-light border-t border-light"> 543 <div class="mx-auto max-w-7xl px-4"> 544 <div class="grid lg:grid-cols-[0.85fr_1.15fr] gap-8 items-center"> 545 <div class="max-w-2xl"> 546 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-white px-4 py-2 text-sm text-dark">
547 <span class="material-symbols-outlined text-dark">lightbulb</span> 548 <span>Pro Tip</span> 549 </div> 550 <h2 class="mt-5 text-darkest text-3xl sm:text-4xl tracking-tight">Pro Tip! Drag and Drop Your Reference Images</h2> 551 <p class="mt-4 text-dark leading-7">For the most reliable image, video, and audio uploads, drag and drop your files directly into the AI Video Maker Agent widget.</p> 552 </div> 553 <article class="card rounded-2xl p-3 md:p-4 bg-white"> 554 <button type="button" class="block w-full cursor-zoom-in text-left" data-lightbox-trigger data-lightbox-src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/drag-and-drop-reference-files.webp" data-lightbox-alt="AI Video Maker Agent widget showing a reference image attached through the drag-and-drop area" aria-label="Expand drag-and-drop reference files example"> 555 <img class="storyboard-preview bg-white" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/drag-and-drop-reference-files.webp" alt="AI Video Maker Agent widget showing a reference image attached through the drag-and-drop area" loading="lazy"> 556 </button> 557 </article> 558 </div> 559 </div> 560 </section> 561 562 <section id="storyboarding" class="py-16 md:py-20 bg-white border-t border-light"> 563 <div class="mx-auto max-w-7xl px-4"> 564 <div class="mb-10 max-w-4xl"> 565 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-light px-4 py-2 text-sm text-dark"> 566 <span class="material-symbols-outlined text-dark">view_quilt</span> 567 <span>Advanced Video Tutorial</span> 568 </div> 569 <h2 class="mt-5 text-darkest text-3xl sm:text-4xl tracking-tight">Tutorial: Generating High Quality Videos with Accurate Text using Storyboarding</h2> 570 <p class="mt-4 text-dark leading-7">Plan the visuals, timing, and text-safe areas in ChatGPT first, then give that storyboard to AI Video Maker Agent as a visual production brief. This workflow is especially useful when your video needs readable headlines, consistent composition, and accurate scene-to-scene timing.</p> 571 </div> 572 573 <div class="grid lg:grid-cols-[0.88fr_1.12fr] gap-6 items-start"> 574 <article class="card rounded-2xl p-5 md:p-6 bg-light"> 575 <div class="flex items-start gap-4"> 576 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">1</span> 577 <div> 578 <h3 class="text-2xl text-darkest">Create the storyboard in ChatGPT</h3> 579 <p class="mt-3 text-dark leading-7">Ask ChatGPT to generate one high-resolution, landscape 16:9 storyboard image for your desired video. Describe the subject, shot timing, visual direction, voiceover, headline, text position, synchronization, camera, audio, and transition for every panel.</p> 580 <details class="prompt-card mt-5 rounded-2xl p-4"> 581 <summary class="cursor-pointer text-darkest font-normal">Show the complete BMW M3 example prompt</summary> 582 <pre class="mt-4 max-h-[620px] overflow-auto whitespace-pre-wrap text-xs leading-5 text-darkest"><code>Generate one high-resolution, landscape 16:9 storyboard image for a premium product promotional video. Use real-world photographic imagery in every panel. Do not use illustrations, sketches, cartoons, CGI mockups, concept art, wireframes, or placeholder imagery. 583 584Create exactly four storyboard panels in a clean 2-by-2 layout. Each panel must contain: 585 5861. A large photorealistic live-action image at the top. 5872. A clearly separated professional production-information section directly below the image. 5883. All settings written explicitly below the image, including visual direction, voiceover, headline, text position, synchronization, camera, audio, and transition. 589 590The storyboard sheet itself must be landscape 16:9. The production information below each image must be large enough to read clearly. Do not place the production notes over the photographic imagery. 591 592Project: 593 594* Product: A red 1988 BMW M3, specifically the classic E30 M3 595* Concept: A cinematic drive through the Swiss Alps 596* Video format: 16:9 widescreen 597* Total duration: 12 seconds 598* Number of panels: 4 599* Duration per panel: Exactly 3 seconds 600* Style: Photorealistic live-action automotive commercial using real Alpine roads, authentic mountain landscapes, natural lighting, accurate vehicle proportions, realistic reflections, and believable driving motion 601* Mood: Emotional, aspirational, elegant, powerful, and adventurous 602 603Panel timing and content: 604 605PANEL 1 â 0:00â0:03 606 607Photographic image: A realistic close-up of the red 1988 BMW E30 M3âs rectangular headlights, front grille, hood, and glossy red paint. Position the car in the lower half of the image and leave clean Alpine sky or mountain space above it. 608 609Below the image, display these exact production notes: 610 611VISUAL: Close-up of the red 1988 BMW E30 M3 front end; slow cinematic push-in; golden-hour reflections; authentic E30 proportions. 612VOICEOVER: None. 613HEADLINE: None. 614TEXT POSITION: No headline in this panel. 615SYNCHRONIZATION: No voiceover or headline; establish the vehicle from 0:00 to 0:03. 616CAMERA: 85mm lens, slow forward push, shallow depth of field. 617AUDIO: Soft cinematic music begins; subtle engine idle. 618TRANSITION: Gentle cut to a wide driving shot. 619 620PANEL 2 â 0:03â0:06 621 622Photographic image: A realistic wide shot of the red BMW driving along a winding Alpine mountain road with snow-capped peaks, green valleys, guardrails, and natural atmospheric depth. Position the BMW in the lower-right portion of the image. Reserve the upper-left quadrant as clean negative space. 623 624Place the headline only in the upper-left quadrant, entirely over the open sky or distant mountain background. The headline must not overlap or touch the BMW. 625 626Below the image, display these exact production notes: 627 628VISUAL: Wide Alpine driving shot; red 1988 BMW E30 M3 positioned in the lower-right; expansive clean sky and mountain negative space in the upper-left. 629VOICEOVER: âThe Ultimate Driving Machineâ 630HEADLINE: âThe Ultimate Driving Machineâ 631TEXT POSITION: Upper-left quadrant, fully outside the BMW silhouette, with at least 10% clearance from the vehicle. 632SYNCHRONIZATION: At 0:03, the narrator begins saying âThe Ultimate Driving Machineâ and the headline appears simultaneously. Keep the headline visible until 0:06. 633CAMERA: 35mm lens, smooth aerial tracking shot, realistic vehicle motion. 634AUDIO: Confident, warm voiceover synchronized word-for-word with the headline; rising orchestral music. 635TRANSITION: Match cut following the BMWâs forward motion. 636 637PANEL 3 â 0:06â0:09 638 639Photographic image: A realistic low-angle tracking shot of the BMW accelerating through a dramatic mountain curve. Position the BMW in the lower-left portion of the image. Reserve the upper-right quadrant as clean mountain or sky space. 640 641Place the headline only in the upper-right quadrant, completely separate from the BMW and road details. Never place the text over the hood, roof, windshield, wheels, doors, or body panels. 642 643Below the image, display these exact production notes: 644 645VISUAL: Low-angle tracking shot of the red E30 M3 accelerating through an Alpine curve; vehicle in the lower-left; clean mountain negative space in the upper-right. 646VOICEOVER: âStir Your Soulâ 647HEADLINE: âStir Your Soulâ 648TEXT POSITION: Upper-right quadrant, entirely outside the BMW silhouette, with at least 10% clearance from the vehicle. 649SYNCHRONIZATION: At 0:06, the narrator begins saying âStir Your Soulâ and the headline appears simultaneously. Keep the headline visible until 0:09. 650CAMERA: 50mm lens, low side-tracking shot, dynamic but realistic motion. 651AUDIO: Clear, emotionally resonant voiceover; engine acceleration rises underneath the music. 652TRANSITION: Smooth motion blur into the final hero shot. 653 654PANEL 4 â 0:09â0:12 655 656Photographic image: A realistic hero shot of the BMW arriving at an Alpine overlook during golden-hour sunset. Position the vehicle in the lower-center or lower-right portion of the image. Reserve the upper-left quadrant as clean open sky or distant mountain space. 657 658Place the headline only in the upper-left quadrant, with generous separation from the vehicle. Never place the text on the car. 659 660Below the image, display these exact production notes: 661 662VISUAL: Hero shot of the red 1988 BMW E30 M3 at a breathtaking Alpine overlook during sunset; vehicle positioned in the lower-right; clean glowing sky in the upper-left. 663VOICEOVER: âLive Life to the Fullestâ 664HEADLINE: âLive Life to the Fullestâ 665TEXT POSITION: Upper-left quadrant, fully outside the BMW silhouette, with at least 10% clearance from the vehicle. 666SYNCHRONIZATION: At 0:09, the narrator begins saying âLive Life to the Fullestâ and the headline appears simultaneously. Keep the headline visible until 0:12. 667CAMERA: 35mm lens, slow cinematic orbit, final hero composition. 668AUDIO: Voiceover finishes clearly at 0:12; music reaches an emotional conclusion. 669TRANSITION: Fade to black at 0:12. 670 671Critical product-and-text composition rules: 672 673* Never place headline text on top of the product. 674* Text must never overlap, touch, obscure, or sit across any part of the BMW. 675* Keep every headline outside the complete product silhouette. 676* Maintain at least 10% visual clearance between text and the vehicle. 677* Deliberately reposition the car or change the camera angle whenever necessary to create negative space. 678* Do not place text over busy scenery, road markings, guardrails, or important vehicle details. 679* The photographic image must visibly demonstrate the intended text-safe area. 680* The production notes must appear below each image, never over the image. 681 682Text and voice accuracy rules: 683 684* Use professional Title Case exactly as follows: 685 1. âThe Ultimate Driving Machineâ 686 2. âStir Your Soulâ 687 3. âLive Life to the Fullestâ 688* Preserve every letter, space, and word order.
689* The spoken voiceover must match the corresponding headline exactly. 690* Do not add any unapproved narration. 691* Text must be sharp, stable, correctly spelled, and perfectly legible. 692* Do not create warped letters, missing letters, duplicated letters, random symbols, flickering, or changing typography. 693* Use elegant white typography with subtle shadow or a transparent dark backing. 694* Do not include unintended text, road signs, license-plate lettering, watermarks, fake logos, or random symbols anywhere in the photographic imagery. 695 696Final storyboard-image requirements: 697 698* Exactly four panels. 699* Exactly three seconds per panel. 700* Landscape 16:9 format. 701* Real-world photographic imagery in every panel. 702* Large image on top and explicit production settings directly below each image. 703* Every panel must explicitly show VISUAL, VOICEOVER, HEADLINE, TEXT POSITION, SYNCHRONIZATION, CAMERA, AUDIO, and TRANSITION. 704* Generate only the finished storyboard image, not a written explanation.</code></pre> 705 </details> 706 </div> 707 </div> 708 </article> 709 710 <article class="card rounded-2xl p-3 md:p-4 bg-white"> 711 <button type="button" class="block w-full cursor-zoom-in text-left" data-lightbox-trigger data-lightbox-src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/storyboard-bmw-m3.png" data-lightbox-alt="Four-panel BMW E30 M3 Swiss Alps storyboard with production notes" aria-label="Expand BMW M3 storyboard example"> 712 <img class="storyboard-preview" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/storyboard-bmw-m3.png" alt="Four-panel BMW E30 M3 Swiss Alps storyboard with production notes" loading="lazy"> 713 </button> 714 <p class="mt-3 px-1 text-sm text-dark leading-6">Example output: a four-panel BMW E30 M3 commercial storyboard with explicit timing, text-safe areas, voiceover, camera, audio, and transition direction.</p> 715 </article> 716 </div> 717 718 <div class="mt-8 grid gap-6"> 719 <article class="card rounded-2xl p-5 md:p-6 bg-white"> 720 <div class="flex items-start gap-4"> 721 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">2</span> 722 <div> 723 <h3 class="text-2xl text-darkest">Save the storyboard to your Desktop</h3> 724 <p class="mt-3 text-dark leading-7">When ChatGPT finishes generating the image, download it and save it somewhere easy to findâyour Desktop is ideal for the next step. Keep the original high-resolution file rather than a screenshot or compressed copy.</p> 725 </div> 726 </div> 727 </article> 728 729 <article class="card rounded-2xl p-5 md:p-6 bg-white"> 730 <div class="flex items-start gap-4"> 731 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">3</span> 732 <div> 733 <h3 class="text-2xl text-darkest">Start the AI Video Maker Agent workflow</h3> 734 <p class="mt-3 text-dark leading-7">In ChatGPT, issue this command exactly:</p> 735 <div class="prompt-card mt-4 rounded-xl p-4"><code class="text-darkest text-sm">@AI Video Maker Agent Make a video using my storyboard</code></div> 736 <p class="mt-3 text-dark leading-7">The agent will prepare the video-generation widget and its settings for you.</p> 737 </div> 738 </div> 739 </article> 740 </div> 741 742 <div class="mt-6 grid lg:grid-cols-[1.05fr_0.95fr] gap-6 items-start"> 743 <article class="card rounded-2xl p-5 md:p-6 bg-light"> 744 <div class="flex items-start gap-4"> 745 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">4</span> 746 <div> 747 <h3 class="text-2xl text-darkest">Attach the storyboard to the widget</h3> 748 <p class="mt-3 text-dark leading-7">When the AI Video Maker Agent widget appears, drag and drop the storyboard image directly into it. This attachment is what ensures the storyboard is used as the visual reference for generation.</p> 749 <p class="mt-3 text-dark leading-7">Use the example storyboard shown here. If you saved it to your Desktop, drag the file from there into the widgetâs reference area.</p> 750 <button type="button" class="mt-5 block w-full cursor-zoom-in text-left" data-lightbox-trigger data-lightbox-src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/ai-video-maker-storyboard-widget.png" data-lightbox-alt="AI Video Maker Agent widget with the BMW M3 storyboard attached as Image1" aria-label="Expand AI Video Maker Agent widget example"> 751 <img class="storyboard-preview bg-white" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/ai-video-maker-storyboard-widget.png" alt="AI Video Maker Agent widget with the BMW M3 storyboard attached as Image1" loading="lazy"> 752 </button> 753 <p class="mt-3 text-sm text-dark leading-6">Example widget state after the storyboard is attached: the reference appears as <code>@Image1</code>
753 and the prompt can be updated before proceeding.</p> 754 </div> 755 </div> 756 </article> 757 758 <article class="card rounded-2xl p-3 md:p-4 bg-white"> 759 <img class="storyboard-preview" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/storyboard-bmw-m3.png" alt="Storyboard image ready to drag into the AI Video Maker Agent widget" loading="lazy"> 760 <p class="mt-3 px-1 text-sm text-dark leading-6">Drag this storyboard image into AI Video Maker Agent before proceeding.</p> 761 </article> 762 </div> 763 764 <div class="mt-6 grid gap-6"> 765 <article class="card rounded-2xl p-5 md:p-6 bg-white"> 766 <div class="flex items-start gap-4"> 767 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">5</span> 768 <div> 769 <h3 class="text-2xl text-darkest">Reference the attached image in your prompt</h3> 770 <p class="mt-3 text-dark leading-7">With the storyboard attached, edit the prepared prompt wherever you want the storyboard to guide the generation. Refer to the attachment using <code>@Image1</code>.</p> 771 <div class="prompt-card mt-4 rounded-xl p-4"><p class="text-sm uppercase tracking-[0.16em] text-dark">Example</p><p class="mt-2 text-darkest text-sm leading-6">Use <code>@Image1</code> as the storyboard reference. Preserve the four-panel shot order, the BMWâs placement, and the exact headline wording and timing shown in the storyboard.</p></div> 772 </div> 773 </div> 774 </article> 775 776 <article class="card rounded-2xl p-5 md:p-6 bg-white"> 777 <div class="flex items-start gap-4"> 778 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">6</span> 779 <div> 780 <h3 class="text-2xl text-darkest">Choose State of the Art quality</h3> 781 <p class="mt-3 text-dark leading-7">In the widgetâs <strong>Quality</strong> setting, select <strong>State of the Art</strong> to get the best results and preserve the storyboardâs visual detail and text accuracy.</p> 782 </div> 783 </div> 784 </article> 785 786 <article class="card rounded-2xl p-5 md:p-6 bg-white"> 787 <div class="flex items-start gap-4"> 788 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">7</span> 789 <div> 790 <h3 class="text-2xl text-darkest">Review settings and proceed</h3> 791 <p class="mt-3 text-dark leading-7">Review all available settings in the AI Video Maker Agent widget, including duration, aspect ratio, resolution, audio, and any watermark options. Confirm that the prompt references <code>@Image1</code>, then click <strong>Proceed</strong> to generate your video.</p> 792 </div> 793 </div> 794 </article> 795 </div> 796 797 <article class="card mt-6 rounded-2xl p-5 md:p-6 bg-light"> 798 <div class="flex items-start gap-4"> 799 <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--red)] text-lg text-white">8</span> 800 <div class="w-full"> 801 <h3 class="text-2xl text-darkest">Enjoy your video</h3> 802 <p class="mt-3 text-dark leading-7">Once generation finishes, play the result below. The example uses the BMW M3 storyboard to produce a cinematic vertical video with the planned sequence and accurate headlines.</p> 803 <div class="mt-5 rounded-2xl border border-light bg-white p-3 md:p-4"> 804 <video class="storyboard-result-video" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/storyboard-bmw-m3.mp4" controls playsinline preload="metadata" poster="https://infoseek.ai/mcp/a7034de3f7/seedance-video/media/storyboard-bmw-m3.png"> 805 Your browser does not support the video tag. 806 </video> 807 </div> 808 </div> 809 </div> 810 </article> 811 </div> 812 </section> 813 814 <section id="claude-setup" class="py-16 md:py-20 bg-white border-t border-light"> 815 <div class="mx-auto max-w-7xl px-4"> 816 <div class="mb-10"> 817 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-light px-4 py-2 text-sm text-dark">
818 <span class="material-symbols-outlined text-dark">smart_toy</span> 819 <span>Claude Setup</span> 820 </div> 821 <h2 class="mt-5 text-darkest text-3xl sm:text-4xl tracking-tight">Use AI Video Maker Agent with Claude</h2> 822 <p class="mt-3 max-w-3xl text-dark">Connect AI Video Maker Agent to Claude in a few steps. Go to <a href="https://claude.ai" target="_blank" rel="noopener noreferrer" class="text-[var(--red)] underline underline-offset-2">Claude.ai</a>, then open <strong>Settings</strong> and <strong>Connectors</strong>.</p> 823 </div> 824 <div class="grid md:grid-cols-3 gap-6"> 825 <article class="card tutorial-card rounded-2xl p-4 md:p-5 bg-white"> 826 <button type="button" class="tutorial-setup-image-frame cursor-zoom-in text-left" data-lightbox-trigger data-lightbox-src="https://infoseek.ai/assets/images/logos/claude.svg" data-lightbox-alt="Claude logo" aria-label="Expand image: Claude logo"> 827 <img class="tutorial-setup-image bg-white p-12 object-contain" src="https://infoseek.ai/assets/images/logos/claude.svg" alt="Claude logo" loading="lazy"> 828 </button> 829 <h3 class="mt-4 text-xl text-darkest">1. Go to Settings > Connectors > Add</h3> 830 <p class="mt-2 text-dark text-sm leading-6">In <strong>Connectors</strong>, click <strong>Add Custom Connector</strong> to open the setup form.</p> 831 </article> 832 <article class="card tutorial-card rounded-2xl p-4 md:p-5 bg-white"> 833 <button type="button" class="tutorial-setup-image-frame cursor-zoom-in text-left" data-lightbox-trigger data-lightbox-src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/claude-2.webp" data-lightbox-alt="Claude custom connector form with the AI Video Maker Agent name and remote server URL" aria-label="Expand screenshot: Enter the connector details"> 834 <img class="tutorial-setup-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/claude-2.webp" alt="Claude custom connector form with the AI Video Maker Agent name and remote server URL" loading="lazy"> 835 </button> 836 <h3 class="mt-4 text-xl text-darkest">2. Enter the connector details</h3> 837 <p class="mt-2 text-dark text-sm leading-6">Set <strong>Name</strong> to <strong>AI Video Maker Agent</strong>, then set <strong>Remote Server URL</strong> to the address given in the app store.</p> 838 </article> 839 <article class="card tutorial-card rounded-2xl p-4 md:p-5 bg-white"> 840 <button type="button" class="tutorial-setup-image-frame cursor-zoom-in text-left" data-lightbox-trigger data-lightbox-src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/claude-3.webp" data-lightbox-alt="Claude Authentication settings with Always required and No client ID selected" aria-label="Expand screenshot: Set Authentication Always, No Client ID"> 841 <img class="tutorial-setup-image" src="https://infoseek.ai/mcp/a7034de3f7/seedance-video/claude-3.webp" alt="Claude Authentication settings with Always required and No client ID selected" loading="lazy"> 842 </button> 843 <h3 class="mt-4 text-xl text-darkest">3. Set Authentication Always, No Client ID</h3> 844 <p class="mt-2 text-dark text-sm leading-6">Set <strong>Authentication</strong> to <strong>Always required</strong> and select <strong>No client ID</strong>. Congrats! You can now login to your Infoseek account and start making video with Claude.</p> 845 </article> 846 </div> 847 </div> 848 </section> 849 850 <section id="faq" class="pt-10 pb-14 md:pt-12 md:pb-16 border-t border-light bg-light"> 851 <div class="mx-auto max-w-7xl px-4"> 852 <div class="mb-10 max-w-3xl"> 853 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-white px-4 py-2 text-sm text-dark"> 854 <span class="material-symbols-outlined text-dark">help</span> 855 <span>AI Video Maker Agent FAQ</span> 856 </div> 857 <h2 class="mt-5 text-darkest text-3xl sm:text-4xl tracking-tight">Frequently Asked Questions</h2> 858 <p class="mt-3 text-dark">Learn how to make videos with the AI Video Maker Agent in ChatGPT, Claude, or another AI app using the Infoseek MCP.</p> 859 </div> 860 <div class="grid md:grid-cols-2 gap-6"> 861 <article class="card rounded-2xl p-6 bg-white"> 862 <h3 class="text-xl text-darkest">What's the easiest way to make videos with Seedance?</h3> 863 <p class="mt-3 text-dark">The easiest way is right here in ChatGPT: use the <strong>AI Video Maker Agent</strong> and describe what you want in plain English. It uses <strong>Seedance 2 / 2.5</strong> for video generation.</p> 864 <p class="mt-4 text-dark">For example:</p> 865 <pre class="mt-3 overflow-x-auto rounded-xl bg-[var(--code-bg)] p-4 text-sm leading-6 text-darkest"><code>@AI Video Maker Agent Create a cinematic video of a giraffe walking through Times Square at night, then looking into the camera and saying "I think we're lost." 5 seconds. Audio on.</code></pre> 866 <p class="mt-4 text-dark">For best results, specify <strong>subject + action + setting + style + duration + audio/dialogue</strong>. You can also attach an image and ask it to animate that image.</p> 867 </article> 868 <article class="card rounded-2xl p-6 bg-white"> 869 <h3 class="text-xl text-darkest">What's the best way to make videos in ChatGPT?</h3> 870 <p class="mt-3 text-dark">Use the AI Video Maker Agent app for ChatGPT, then write a clear prompt with the subject, action, camera movement, style, aspect ratio, and duration. You can attach reference media when the visual identity needs to stay consistent.</p> 871 </article> 872 <article class="card rounded-2xl p-6 bg-white"> 873 <h3 class="text-xl text-darkest">Can I use Seedance as an AI video generator from text?</h3> 874 <p class="mt-3 text-dark">Yes. The AI Video Maker Agent turns a natural-language prompt into short-form video with Seedance for social content, product stories, cinematic concepts, and creative prototypes.</p> 875 </article> 876 <article class="card rounded-2xl p-6 bg-white"> 877 <h3 class="text-xl text-darkest">Can Seedance create a video from an image?</h3> 878 <p class="mt-3 text-dark">Yes. Add an image reference and describe the motion, framing, subject behavior, and scene you want. The reference is preserved as a handle so the prompt c
878an clearly point to it.</p> 879 </article> 880 <article class="card rounded-2xl p-6 bg-white"> 881 <h3 class="text-xl text-darkest">Can I use video or audio references with Seedance?</h3> 882 <p class="mt-3 text-dark">Yes. The AI Video Maker Agent supports image, video, and audio references to guide the visual subject, motion, pacing, or sound direction while the creative instructions stay in the prompt.</p> 883 </article> 884 <article class="card rounded-2xl p-6 bg-white"> 885 <h3 class="text-xl text-darkest">How do I write a good AI Video Maker Agent prompt with Seedance?</h3> 886 <p class="mt-3 text-dark">Describe the subject, action, environment, camera shot or movement, visual style, lighting, audio direction, aspect ratio, and duration. Concrete shot-by-shot instructions usually produce more controllable results.</p> 887 </article> 888 <article class="card rounded-2xl p-6 bg-white"> 889 <h3 class="text-xl text-darkest">How do I edit a video?</h3> 890 <p class="mt-3 text-dark">Upload the video as a reference, then describe the specific change you want in a focused prompt. Explain what should change and what should stay the same, such as the characters, setting, lighting, camera style, or pacing.</p> 891 </article> 892 <article class="card rounded-2xl p-6 bg-white"> 893 <h3 class="text-xl text-darkest">How do I extend a video?</h3> 894 <p class="mt-3 text-dark">Use the previous output as the next video reference and say exactly how much longer it should be, such as âextend the video by 5 seconds.â Describe one clear next action and preserve the original characters, environment, lighting, camera style, and sound.</p> 895 </article> 896 <article class="card rounded-2xl p-6 bg-white"> 897 <h3 class="text-xl text-darkest">How long of a video can I make?</h3> 898 <p class="mt-3 text-dark">Seedance 2.5 supports videos up to 30 seconds long. Other Seedance models support videos up to 15 seconds long. Use the extend feature to create longer videos.</p> 899 </article> 900 <article class="card rounded-2xl p-6 bg-white"> 901 <h3 class="text-xl text-darkest">Can I make AI videos with Seedance in Claude?</h3> 902 <p class="mt-3 text-dark">Yes. Connect the AI Video Maker Agent MCP to Claude, authenticate with Infoseek, and ask Claude to create a video from a prompt and optional references. Claude can follow the job status and return the completed artifact.</p> 903 </article> 904 <article class="card rounded-2xl p-6 bg-white"> 905 <h3 class="text-xl text-darkest">How much does an AI Video Maker Agent video cost?</h3> 906 <p class="mt-3 text-dark">You do not need a subscription to use the AI Video Maker Agent. It uses usage-based pricing, and the cost depends on factors such as video resolution and duration, so credit your Infoseek account before starting a generation.</p> 907 </article> 908 </div> 909 </div> 910 </section> 911 912 <section id="mcp-overview" class="bg-light relative overflow-hidden border-t border-light"> 913 <div class="mx-auto max-w-7xl px-4 py-16 md:py-20 grid lg:grid-cols-[1.12fr_0.88fr] gap-10 items-center"> 914 <div class="space-y-6"> 915 <div class="inline-flex items-center gap-2 rounded-full border border-light bg-white px-4 py-2 text-sm text-dark"> 916 <span class="material-symbols-outlined text-dark">developer_board</span> 917 <span>MCP for AI video apps and creative agents</span> 918 </div> 919 <h2 class="text-darkest text-4xl sm:text-5xl lg:text-6xl leading-tight tracking-tight">AI Video Maker Agent MCP</h2> 920 <p class="text-lg text-dark max-w-3xl"> 921 Add prompt-to-video, media-reference generation, async status tracking, and shareable video artifacts to your AI product without building the provider workflow yourself. 922 </p> 923 <ul class="space-y-2 text-darkest"> 924 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span> Create video jobs from prompts plus image, video, or audio references</li> 925 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span> Poll normalized job state until queued, running, succeeded, or failed</li> 926 <li class="flex items-center gap-2"><span class="material-symbols-outlined text-dark">check_circle</span>
926 Return safe preview artifacts and public share links for completed videos</li> 927 </ul> 928 <a href="https://infoseek.ai/u" class="mt-2 inline-flex h-12 items-center justify-center rounded-lg btn-red shadow-md px-5 text-center">Login to access this app</a> 929 </div> 930 931 <div class="card rounded-2xl p-4 md:p-5 media-frame"> 932 <div class="rounded-2xl border border-light bg-white/90 p-5 shadow-sm"> 933 <div class="flex items-center gap-3"> 934 <img src="https://infoseek.ai/apps/icons/cinematic-image-gen.svg" alt="AI Video Maker Agent MCP icon" class="h-10 w-10 rounded object-contain"> 935 <div> 936 <p class="text-sm uppercase tracking-[0.16em] text-dark">Video job</p> 937 <h3 class="text-2xl">Generated creative pipeline</h3> 938 </div> 939 </div> 940 <div class="mt-5 grid gap-3"> 941 <div class="rounded-xl border border-light bg-white p-4"> 942 <p class="text-sm text-dark">Prompt</p> 943 <p class="mt-1 text-darkest">Create a 9:16 product launch video using @Image1 as the subject reference.</p> 944 </div> 945 <div class="grid grid-cols-2 gap-3"> 946 <div class="rounded-xl border border-light bg-white p-4"> 947 <p class="text-sm text-dark">Status</p> 948 <p class="mt-1 text-darkest">running</p> 949 </div> 950 <div class="rounded-xl border border-light bg-white p-4"> 951 <p class="text-sm text-dark">Output</p> 952 <p class="mt-1 text-darkest">video/mp4</p> 953 </div> 954 </div> 955 <div class="rounded-xl border border-light bg-white p-4"> 956 <p class="text-sm text-dark">Artifacts</p> 957 <p class="mt-1 text-darkest">Preview URL, artifact ID, MIME type, and share link when ready.</p> 958 </div> 959 </div> 960 </div> 961 </div> 962 </div> 963 </section> 964 965 <section id="tools" class="pt-10 pb-14 md:pt-12 md:pb-16 bg-white border-t border-light"> 966 <div class="mx-auto max-w-7xl px-4"> 967 <div class="mb-10"> 968 <h2 class="text-darkest text-3xl sm:text-4xl tracking-tight">Tools</h2> 969 <p class="mt-3 max-w-3xl text-dark">The AI Video Maker Agent keeps its public contract simple: send the userâs request to one agent wrapper and optionally include reference files.</p> 970 </div> 971 <article class="card rounded-2xl p-6"> 972 <div class="flex items-start justify-between gap-4"> 973 <div> 974 <p class="text-[11px] uppercase tracking-[0.2em] text-dark">Single public tool</p> 975 <h3 class="text-2xl mt-2"><code>run_agent</code></h3> 976 </div> 977 <span class="material-symbols-outlined text-dark text-3xl">smart_toy</span> 978 </div> 979 <p class="mt-4 text-dark">Runs the AI Video Maker Agent for the userâs request. The agent interprets the creative intent, handles the video workflow, and returns the user-facing answer plus the generated video result.</p> 980 <div class="mt-5 grid md:grid-cols-3 gap-4"> 981 <div> 982 <p class="text-sm uppercase tracking-[0.16em] text-dark">Required input</p> 983 <ul class="mt-2 space-y-1 text-darkest"> 984 <li><code>prompt</code></li> 985 </ul> 986 </div> 987 <div> 988 <p class="text-sm uppercase tracking-[0.16em] text-dark">Optional inputs</p> 989 <ul class="mt-2 space-y-1 text-darkest"> 990 <li><code>file_urls[]</code></li> 991 <li><code>reference_files[]</code></li> 992 </ul> 993 </div> 994 <div> 995 <p class="text-sm uppercase tracking-[0.16em] text-dark">Useful result</p> 996 <ul class="mt-2 space-y-1 text-darkest"> 997 <li>User-facing response</li> 998 <li>Generated video output</li> 999 </ul> 1000 </div> 1001 </div> 1002 </article> 1003 </div> 1004 </section> 1005 1006 <section id="quickstart" class="pt-10 pb-14 md:pt-12 md:pb-16 border-t border-light bg-white"> 1007 <div class="mx-auto max-w-7xl px-4"> 1008 <div class="mb-10"> 1009 <h2 class="text-darkest text-3xl sm:text-4xl tracking-tight">Quickstart + Code</h2> 1010 <p class="mt-3 max-w-3xl text-dark">One call starts the AI Video Maker Agent. Send the userâs creative request with optional reference context, and let the wrapper handle the video workflow.</p> 1011 </div> 1012 <div class="grid lg:grid-cols-[0.92fr_1.08fr] gap-6"> 1013 <div class="card rounded-2xl p-6"> 1014 <h3 class="text-2xl">One-call workflow</h3> 1015 <ol class="mt-4 space-y-4 text-darkest"> 1016 <li>1. Write a clear creative request and add optional reference context.</li> 1017 <li>2. Call <code>run_agent</code> with the userâs prompt.</li> 1018 <li>3. Render the returned user-facing response and generated video result.</li> 1019 </ol> 1020 </div> 1021 <div class="card rounded-2xl p-4 md:p-5"> 1022<pre class="!bg-[var(--code-bg)] !p-5 !rounded-2xl !text-[13px] !leading-6 overflow-x-auto">const result = await mcp.callTool("run_agent", { 1023 prompt: "Create a 9:16 social video of our product with a slow camera push-in, soft studio lighting, and subtle ambient audio." 1024});</pre> 1025 </div> 1026 </div> 1027 </div> 1028 </section> 1029 1030 <section id="access" class="pt-10 pb-14 md:pt-12 md:pb-16 border-t border-light bg-white/70"> 1031 <div class="mx-auto max-w-7xl px-4"> 1032 <div class="mb-10"> 1033 <h2 class="text-darkest text-3xl sm:text-4xl tracking-tight">Access</h2> 1034 <p class="mt-3 max-w-3xl text-dark">
1034The public AI Video Maker Agent wrapper requires Infoseek end-user OAuth. The Infoseek MCP route is the supported integration surface.</p> 1035 </div> 1036 <div class="grid md:grid-cols-2 gap-6"> 1037 <article class="card rounded-2xl p-6"> 1038 <span class="material-symbols-outlined text-dark">shield_lock</span> 1039 <h3 class="text-2xl mt-4">OAuth-Protected Tools</h3> 1040 <p class="mt-3 text-dark">Use Infoseek auth when your AI app needs user-owned video jobs, private artifact handling, and continuity across follow-up turns.</p> 1041 </article> 1042 <article class="card rounded-2xl p-6"> 1043 <span class="material-symbols-outlined text-dark">movie_filter</span> 1044 <h3 class="text-2xl mt-4">Safe Artifact Surface</h3> 1045 <p class="mt-3 text-dark">The public response omits private provider task IDs, private storage keys, and billing internals while preserving useful preview fields.</p> 1046 </article> 1047 </div> 1048 </div> 1049 </section> 1050 1051 <section id="why-outputs" class="pt-10 pb-14 md:pt-12 md:pb-16 border-t border-light bg-white"> 1052 <div class="mx-auto max-w-7xl px-4"> 1053 <div class="mb-10"> 1054 <h2 class="text-darkest text-3xl sm:text-4xl tracking-tight">Why These Outputs Matter</h2> 1055 </div> 1056 <div class="grid md:grid-cols-3 gap-6"> 1057 <article class="card rounded-2xl p-6"> 1058 <h3 class="text-2xl">Agent Continuity</h3> 1059 <p class="text-dark mt-3">Stable job IDs and sanitized job payloads let agents continue from the last real video state instead of guessing from prose.</p> 1060 </article> 1061 <article class="card rounded-2xl p-6"> 1062 <h3 class="text-2xl">Media-Aware Prompts</h3> 1063 <p class="text-dark mt-3">Reference handles keep image, video, and audio inputs aligned with prompt instructions for better creative control.</p> 1064 </article> 1065 <article class="card rounded-2xl p-6"> 1066 <h3 class="text-2xl">UI-Ready Artifacts</h3> 1067 <p class="text-dark mt-3">Preview URLs and artifact IDs give your app a direct path from generation status to playback and sharing.</p> 1068 </article> 1069 </div> 1070 </div> 1071 </section> 1072 1073 <section id="use-cases" class="pt-10 pb-14 md:pt-12 md:pb-16 border-t border-light bg-white/70"> 1074 <div class="mx-auto max-w-7xl px-4"> 1075 <div class="mb-10"> 1076 <h2 class="text-darkest text-3xl sm:text-4xl tracking-tight">Use Cases</h2> 1077 </div> 1078 <div class="grid md:grid-cols-3 gap-6"> 1079 <article class="card rounded-2xl p-6"> 1080 <span class="material-symbols-outlined text-dark">campaign</span> 1081 <h3 class="text-2xl mt-4">Creative Automation</h3> 1082 <p class="text-dark mt-3">Let marketing agents generate short social variations from product images, motion references, and approved campaign prompts.</p> 1083 </article> 1084 <article class="card rounded-2xl p-6"> 1085 <span class="material-symbols-outlined text-dark">smart_display</span> 1086 <h3 class="text-2xl mt-4">AI Video Editors</h3> 1087 <p class="text-dark mt-3">Build chat-based editing workflows that use video references, image replacements, duration matching, and status-aware polling.</p> 1088 </article> 1089 <article class="card rounded-2xl p-6"> 1090 <span class="material-symbols-outlined text-dark">auto_awesome</span> 1091 <h3 class="text-2xl mt-4">Generated Media Products</h3> 1092 <p class="text-dark mt-3">Add video generation to creator tools, ad builders, and internal brand studios with a clean MCP contract.</p> 1093 </article> 1094 </div> 1095 </div> 1096 </section> 1097 1098 </main> 1099 1100 <footer class="border-t border-light bg-white"> 1101 <div class="mx-auto max-w-7xl px-4 py-8 text-sm text-dark text-center"> 1102 <div class="grid md:grid-cols-3 gap-6 justify-items-center"> 1103 <div class="text-left"> 1104 <p class="font-medium">Explore</p> 1105 <ul class="mt-1 space-y-1"> 1106 <li><a href="#tools" class="hover:opacity-80">Tools</a></li> 1107 <li><a href="#quickstart" class="hover:opacity-80">Quickstart</a></li> 1108 <li><a href="#attach" class="hover:opacity-80">Reference upload tip</a></li> 1109 <li><a href="#storyboarding" class="hover:opacity-80">
1109Storyboarding tutorial</a></li> 1110 <li><a href="#access" class="hover:opacity-80">Access</a></li> 1111 <li><a href="#faq" class="hover:opacity-80">FAQ</a></li> 1112 </ul> 1113 </div> 1114 <div class="text-left"> 1115 <p class="font-medium">Company</p> 1116 <ul class="mt-1 space-y-1"> 1117 <li><a href="/about.html" class="hover:opacity-80">About</a></li> 1118 <li><a href="/about.html" class="hover:opacity-80">Contact us</a></li> 1119 </ul> 1120 </div> 1121 <div class="text-left"> 1122 <p class="font-medium">Legal</p> 1123 <ul class="mt-1 space-y-1"> 1124 <li><a href="/privacy" class="hover:opacity-80">Privacy</a></li> 1125 <li><a href="/terms" class="hover:opacity-80">Terms</a></li> 1126 </ul> 1127 </div> 1128 </div> 1129 1130 <div class="mt-8 flex items-center justify-center gap-4 flex-wrap"> 1131 <p>© <span id="year">2026</span> InfoseekAI. All rights reserved.</p> 1132 </div> 1133 </div> 1134 </footer> 1135 1136 <div id="claude-image-lightbox" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 p-4" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Expanded Claude setup screenshot"> 1137 <button type="button" class="absolute right-4 top-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-white text-2xl text-darkest shadow-lg" data-lightbox-close aria-label="Close expanded screenshot">×</button> 1138 <img class="w-[min(95vw,1200px)] max-h-[90vh] rounded-lg object-contain shadow-2xl" data-lightbox-image src="" alt=""> 1139 </div> 1140 1141
1141<script> 1142 (function () { 1143 var leadUrl = 'https://slftc2jxxvfszs2jo4lyxxncb40jqvaj.lambda-url.us-east-1.on.aws'; 1144 var pageTag = 'infoseek-seedance-video-mcp'; 1145 1146 function bindClaudeImageLightbox() { 1147 var lightbox = document.getElementById('claude-image-lightbox'); 1148 var lightboxImage = lightbox && lightbox.querySelector('[data-lightbox-image]'); 1149 var closeButton = lightbox && lightbox.querySelector('[data-lightbox-close]'); 1150 var triggers = document.querySelectorAll('[data-lightbox-trigger]'); 1151 var activeTrigger = null; 1152 if (!lightbox || !lightboxImage || !closeButton || !triggers.length) return; 1153 1154 function closeLightbox() { 1155 lightbox.classList.add('hidden'); 1156 lightbox.classList.remove('flex'); 1157 lightbox.setAttribute('aria-hidden', 'true'); 1158 lightboxImage.removeAttribute('src'); 1159 if (activeTrigger) activeTrigger.focus(); 1160 activeTrigger = null; 1161 } 1162 1163 triggers.forEach(function (trigger) { 1164 trigger.addEventListener('click', function () { 1165 activeTrigger = trigger; 1166 lightboxImage.src = trigger.dataset.lightboxSrc; 1167 lightboxImage.alt = trigger.dataset.lightboxAlt || ''; 1168 lightbox.classList.remove('hidden'); 1169 lightbox.classList.add('flex'); 1170 lightbox.setAttribute('aria-hidden', 'false'); 1171 closeButton.focus(); 1172 }); 1173 }); 1174 1175 closeButton.addEventListener('click', closeLightbox); 1176 lightbox.addEventListener('click', function (event) { 1177 if (event.target === lightbox) closeLightbox(); 1178 }); 1179 document.addEventListener('keydown', function (event) { 1180 if (event.key === 'Escape' && !lightbox.classList.contains('hidden')) closeLightbox(); 1181 }); 1182 } 1183 1184 function setButtonLoading(button, isLoading) { 1185 if (!button) return; 1186 var spinner = button.querySelector('[data-role="spinner"]'); 1187 var icon = button.querySelector('[data-role="icon"]'); 1188 var label = button.querySelector('[data-role="label"]'); 1189 if (label && !label.dataset.defaultLabel) { 1190 label.dataset.defaultLabel = label.textContent.trim(); 1191 } 1192 button.disabled = isLoading; 1193 button.setAttribute('aria-busy', isLoading ? 'true' : 'false'); 1194 button.classList.toggle('opacity-80', isLoading); 1195 button.classList.toggle('cursor-not-allowed', isLoading); 1196 if (spinner) spinner.classList.toggle('hidden', !isLoading); 1197 if (icon) icon.classList.toggle('hidden', isLoading); 1198 if (label) label.textContent = isLoading ? 'Sending...' : (label.dataset.defaultLabel || 'Enable yours now'); 1199 } 1200 1201 function bindLeadCapture() { 1202 var emailInput = document.getElementById('user_email'); 1203 var submitBtn = document.getElementById('cta_intro_top'); 1204 var errorDiv = document.getElementById('error_msg'); 1205 var successDiv = document.getElementById('user_msg'); 1206 if (!emailInput || !submitBtn || !errorDiv || !successDiv) return; 1207 1208 function submitLead() { 1209 var email = emailInput.value.trim(); 1210 var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; 1211 errorDiv.style.display = 'none'; 1212 successDiv.style.display = 'none'; 1213 1214 if (!email || !emailPattern.test(email)) { 1215 errorDiv.style.display = 'block'; 1216 errorDiv.textContent = 'Enter a valid work email.'; 1217 return; 1218 } 1219 1220 setButtonLoading(submitBtn, true); 1221 fetch(leadUrl, { 1222 method: 'POST', 1223 headers: {}, 1224 body: JSON.stringify({ 1225 action: 'user-signup', 1226 email: email, 1227 page: pageTag 1228 }) 1229 }) 1230 .then(function (response) { return response.json(); }) 1231 .then(function () { 1232 successDiv.style.display = 'block'; 1233 successDiv.classList.remove('hidden'); 1234 successDiv.textContent = 'Success. We will email you shortly.'; 1235 }) 1236 .catch(function () { 1237 errorDiv.style.display = 'block'; 1238 errorDiv.textContent = 'Something went wrong. Please try again.'; 1239 }) 1240 .finally(function () { 1241 setButtonLoading(submitBtn, false); 1242 }); 1243 } 1244 1245 emailInput.addEventListener('keypress', function (event) { 1246 if (event.key === 'Enter') { 1247 event.preventDefault(); 1248 submitLead(); 1249 } 1250 }); 1251 submitBtn.addEventListener('click', submitLead); 1252 } 1253 1254 document.addEventListener('DOMContentLoaded', function () { 1255 bindLeadCapture(); 1256 bindClaudeImageLightbox(); 1257 var yearEl = document.getElementById('year'); 1258 if (yearEl) yearEl.textContent = new Date().getFullYear(); 1259 }); 1260 })(); 1261 </script>
1261 1262</body> 1263</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.