Docs page to tutorial video: Wan 3.0 B-roll and your own code cards

For a developer docs page, use Wan 3.0 for the B-roll and put your own image of the code beside it. Render each snippet as a still, generate abstract footage that matches the step (a request leaving a server, a file being written), and combine them with Sume's Timeline compose in stack mode. Alibaba's Wan 3.0 README (read 2026-10-05) lists webpages and documents among its reference assets, and text rendering in 12 languages. For code, neither is enough: one wrong character in a snippet makes the tutorial worse than no tutorial, so the code is never the model's to draw.

Break the page into steps

A docs page is already a script. Pick the heading structure and take one step per heading. Each step has one command or code block and one sentence of explanation. Limit yourself to four or five steps for a clip under a minute.

• Heading: becomes the step title, burned as a caption.
• Code block: rendered as a still with a syntax-highlighted screenshot from your editor.
• Explanation sentence: becomes a caption or voice-over line.
• B-roll: one visual metaphor per step, 4 to 6 seconds, from wan-3.0.
• Warning boxes: leave them out of the clip and link the page.
• Narration: optional; if you add it, write it from the explanation sentences, not from the code.

Compose the code card beside the footage

The Timeline compose docs say compose takes one still and one video, selected with operation (stack or overlay), and returns one MP4. The output length comes from the video layer, and the ceiling is 300 seconds. Both inputs must be media.sume.com artifacts or assets of your workspace, so import the code PNG and the Wan clip first. Then put each composed shot into video[] of a Timeline 1.0 render, as the compose page directs.

Generating the B-roll

Keep the prompts abstract and free of text. A shot for "send a POST request" can be "a glowing packet leaves a laptop and crosses a night-time city to a server rack". Reuse the same one or two style reference images in every shot, so the five clips look like a set, and send them as reference_image_urls, up to the 10 the catalog allows for wan-3.0.

curl -X POST https://api.sume.com/v1/video-router/generate \
  -H "Authorization: Bearer $SUME_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: tutorial-step1" \
  -d '{
    "model": "wan-3.0",
    "prompt": "A glowing packet of light leaves a laptop, crosses a night-time city, and reaches a server rack. Dark blue palette, no text, slow tracking shot.",
    "reference_image_urls": ["https://example.com/style-a.png"],
    "resolution": "720p",
    "duration": 5,
    "aspect_ratio": "16:9",
    "mode": "async"
  }'

Before you publish

Pick a fixed look for the code cards before you start: one font, one theme, one size, so the five cards read as a set. A dark theme with large type reads better on a phone than a light one with the default font size. Open every composed shot and read the code against the docs page, including the quotes and dashes, which are the characters most often changed by an editor. If the docs change, replace the card image and re-run compose for that step; the Wan footage is untouched. If you want narration, record or synthesize it separately and lay it as the audio spine of the final render; Timeline takes an audio.url or audio.parts[], and the spine length sets the output length.