PageSourceSearch

https://infoseek.ai/mcp/a7034de3f7/seedance-video/index.html

html infoseek.ai collected 2026-10-02 04:57:51 UTC 79,550 bytes, 1,263 lines download raw bytes

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&amp;display=swap" rel="stylesheet">
25  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0&amp;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 &gt; Connectors &gt; 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 &quot;I think we're lost.&quot; 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>&copy; <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">&times;</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.