How to Turn an Article into a Video with Claude Code in 2026

1. Prepare a source packet before writing scenes

Save the article as source.md with its title, author, URL, and access date. Preserve headings, units, caveats, and captions that affect a figure’s meaning. Keep supporting report references too. Use material you have permission to adapt. A link alone is an incomplete source when your agent cannot read the page.

Create coverage.md with four columns: source section, factual point, scene, and treatment. A treatment can be included, intentionally omitted with a reason, or unreadable. For a 30-second summary, select one central idea and two supporting points instead of compressing every paragraph. Keep that selection visible so the finished video does not pretend to reproduce an entire article. This is our suggested editorial process; the coding agent still needs your judgment about emphasis.

2. Check access and open a local starter

The public Kinetic Type page shows the original animated preview. Its starter ZIP download requires an authenticated account with an active subscription; it is not an anonymous download. If you already have the kit, unzip it into a new folder and read README.md and SKILL.md. It includes index.html, project.json, and local HyperFrames render scripts. Install Node.js 22 or newer and FFmpeg. The kit pins HyperFrames to version 0.8.145; follow its README when newer online instructions differ.

If you do not have download access, complete the source packet and storyboard first and check the setup page for availability. With a kit ready, follow Anthropic’s quickstart to install and sign in to Claude Code, then start it in the project folder. Your Claude Code account is separate from this website. Ask the agent to read the kit instructions and source packet before editing. Keep the first version silent so you can concentrate on facts and pacing.

claude --version
node --version
ffmpeg -version

# Run inside the unzipped starter folder:
claude

3. Ask for a storyboard with traceable claims

Specify the audience, takeaway, and duration. For a 30-second exercise, allocate 0–5 seconds to the question, 5–15 to the explanation, 15–25 to supporting evidence, and 25–30 to the takeaway. These are proposed timings. If a qualification needs more space, shorten other copy or extend the video; do not drop the qualification to fit.

Review the storyboard before motion. Correct names and quantities against source.md, and mark an illustrative example as an example. Give each scene a short visible headline plus a separate explanatory note. The source article and coverage table remain the reference when a later wording change sounds smoother but becomes less accurate.

Read README.md, SKILL.md, source.md, project.json, and index.html. Propose a 30-second silent video for a first-time reader. Use four scenes: question, explanation, evidence, takeaway. Map every factual claim to a source section in coverage.md. Preserve quantities, units, and qualifiers. Mark omissions and unreadable material. Show the storyboard before editing the composition. Do not invent quotations, results, or extra features.

4. Edit the composition and inspect the reading rhythm

After approving the storyboard, have Claude Code edit index.html and keep project.json consistent as the source record. In a downloaded kit, changing project.json alone does not regenerate the HTML. Ask the agent to update every scene's start and duration along with the root composition duration. Preserve the kit's deterministic animation timeline so the renderer can seek to any frame.

Start with one scene to establish type size and line length, then apply the pattern to the remaining scenes. Keep important text away from the edge and leave a stable reading interval after each entrance. Test the longest line at the intended portrait or landscape size. Run the preview, read the complete sequence aloud, and check whether the viewer gets the point without pausing. If you need a different font, include a properly licensed local font file so another machine can reproduce the wrapping.

npm install
npm run lint
npm run preview

When to use the cm-skills composition route

The installed cm-skills CLI is useful for structured projects once your account has an active subscription and the service is available. Check the setup page and run doctor to inspect your local tools and account. The commands below show the actual sequence, including its account step. They are conditional instructions, not a promise that checkout is open today. Existing downloaded projects remain available for local preview and rendering.

Have your agent write draft.json using the installed skill's schema: title, mode, styleId, format, script, and explicit scenes with title, body, duration, and optional narration. Choose a real style ID returned by styles. Use a fresh output folder for compose. This command validates structured content; it does not research the article or buy Claude access. Keep narration as an editable script while hosted audio is unavailable.

cm-skills doctor
cm-skills styles --mode motion --json

# Requires account authorization and an active subscription:
cm-skills setup --agent claude
cm-skills compose --input draft.json --out article-project
cm-skills preview --project article-project --port 4173
cm-skills render --project article-project --out article-final.mp4 --fps 30

5. Render the kit and inspect the actual MP4

For the downloaded starter route, stop the preview with Ctrl+C and run the check and render scripts below. The kit renders video.mp4 in the project folder. The first run may download dependencies or a browser. If a command fails, preserve its exact error and diagnose it before retrying.

Open the exported file in a normal video player. Check all four scene transitions, the longest title, and the final hold. Use ffprobe to confirm the duration and frame dimensions instead of inferring them from the preview window. A silent first version should be described as silent. A narration.md file contains a script, not a recorded audio track. Save the article reference, coverage table, project, and export together so corrections are reproducible.

npm run check
npm run render
ffprobe -v error -show_entries format=duration:stream=codec_type,width,height,r_frame_rate -of json video.mp4

6. Make the final editorial pass

Compare the video with coverage.md. Does each statement retain its source meaning? Does the closing action make sense to someone who saw only the summary? Add readable source credits and the article link in your publication description. Save the approved export and editable folder together. You have finished when the video plays correctly and the source mapping is accurate.