Turn Scripts into Risograph Motion Graphics eian-riso-broll

Make the information in your script visible

When a speaker mentions a number, a sequence or a before-and-after comparison, a short visual can help viewers grasp the point. These supporting shots are B-roll. eian-riso-broll selects suitable lines from your transcript and turns them into motion graphics with a consistent two-color risograph look for your video editor.

The two demos above show several vertical animations side by side. The tool exports individual vertical clips. Notice how bar lengths explain a comparison, numbers establish a sequence and a dark quote card changes the rhythm. Each composition emphasizes one idea rather than turning every sentence into a caption card.

Start with a short process explanation, then apply the method to your own material. The clips have no sound and do not replace the full talking-head edit. Bring a transcript, preferably with an SRT file from the actual recording.

Install and check your environment

You need Node.js 22 or newer, Chrome (Chromium or Edge also work), FFmpeg and ffprobe. A local browser renders frames, which are then encoded as video. There are no npm dependencies to install and no image-generation models in this rendering workflow. Downloading the tools and repository still requires a network connection; any AI assistant costs are separate.

Run in a terminal:

git clone https://github.com/YIAN6557/eian-riso-broll.git
cd eian-riso-broll
node scripts/check_setup.mjs

This route works with Codex, Cursor or Gemini CLI inside the repository, where the assistant can read the root AGENTS.md. Claude Code users can instead follow the author’s instructions and clone into ~/.claude/skills/eian-riso-broll for discovery through SKILL.md. Choose one route; you do not need both copies.

The setup check verifies your Node version, tries launching the browser, and checks FFmpeg and the bundled fonts. If the browser is not found, set the CHROME environment variable to its executable path and retry. Resolve failed checks before producing animations.

License terms. The repository currently uses the Eian Personal Non-Commercial License 1.0. Personal non-commercial use is permitted under its terms. Monetized accounts, advertising, client or employer work, and organizational use or trials require prior written authorization. Source, templates and assets may not be redistributed. Consult the current license.

Start with a short transcript

Use this editorial practice script:

I make visuals for a talking-head video in three steps. First, pick the information worth showing. Second, approve the stills. Third, export the animations. Visuals should follow what you say.

The sequence fits the steps template; the closing sentence could use quote. There are no before-and-after values, so there is no reason to force a compare animation or add a made-up efficiency figure.

Send the following to your coding assistant. The conversation examples below are Editorial suggestions, not reproduction-tested; we have not generated videos from these requests.

Use eian-riso-broll for this transcript:
“I make visuals for a talking-head video in three steps. First, pick the information worth showing. Second, approve the stills. Third, export the animations. Visuals should follow what you say.”
Show a storyboard with source lines, templates, exact screen text and suggested durations. Do not render yet.
Only remove words or add line breaks when extracting screen text. Do not rewrite or add figures or conclusions.
Show the order of the process, then emphasize the closing sentence. Keep the print style consistent.
I do not have an SRT yet, so label durations as estimates.

Think about what viewers need to see: an order, a quantity, a comparison or a conclusion. Each calls for a different visual. Choose the template to fit the information. The skill includes ten templates, but an episode does not need ten clips just to showcase them.

What the line conveys	Possible template	What you must supply
One important figure	number	A number and unit present in the script
Before-and-after change	compare	Comparable values, units and labels
An ordered process	steps	Steps actually stated in the script
A real interface or document	shot	Your genuine screenshot
A conclusion worth holding on screen	quote	The original line

Without a screenshot, shot should display a placeholder for you to replace. If category names are absent from the script, the assistant must not invent them. Choose another template or add verified information to your script before creating the visual.

Approve stills, then judge the motion

After approving the storyboard, continue with:

Create a project from the approved storyboard, with one HTML composition file per animation.
Only edit the DATA block at the top of each template.
Render end-frame stills and the contact sheet. Run QA and fix errors before showing them to me.
Do not render final video yet. Preserve space for subtitles and platform buttons.

Each animation is an HTML file in the project’s compositions/ directory. Its DATA block holds text, colors, values and duration. Projects default to ~/eian-riso-broll-projects/<project name>/; the contact sheet is plates/sheet.jpg.

Check the visual hierarchy first: can you recognize the three-step structure immediately, and read each step on a phone? Cut more words from the source instead of shrinking all the text. The information area occupies y=168–1330; the lower area is reserved for subtitles added in your editor. Typography is primarily designed for Chinese. With English text, inspect line lengths and wrapping rather than assuming the same amount of copy will fit.

A still represents the final frame, so it lets you check the final layout. After rendering, play the clip to check that steps arrive in order and remain readable. QA can flag overflow, some overlaps and small type, but cannot decide whether the explanation makes sense.

After approval, ask for MP4 rendering and another QA pass. To follow the same route manually, run from the skill repository and edit the copied file’s DATA before continuing:

# Create a separate project; keep the original template intact
RISO_PROJECT=$(node scripts/new_project.mjs first-steps)
cp templates/steps.html "$RISO_PROJECT/compositions/01-steps.html"
# Edit DATA at the top of 01-steps.html in your editor
node scripts/render.mjs "$RISO_PROJECT/compositions/01-steps.html" --still
node scripts/qa.mjs "$RISO_PROJECT/compositions/01-steps.html"
# After still approval and an error-free QA pass, render the video
node scripts/render.mjs "$RISO_PROJECT/compositions/01-steps.html"
node scripts/qa.mjs "$RISO_PROJECT/compositions/01-steps.html"

These commands were checked against the repository scripts; we have not run a render for this tutorial. Output appears in renders/. Standard exports are 1080×1920, 30fps H.264 MP4 files without audio or subtitles for the full narration.

Match the narration and make one revision

Place the MP4 on your editing timeline at the point where you say the corresponding line. Without SRT, durations are speech-rate estimates that need checking against the recording. With SRT, the skill can calculate the matching entry and exit points and suggest a duration. Avoid giving every clip the same five-second length.

Here is talk.srt from this recording. Locate the three-step passage and check its in/out points and suggested duration.
Only update the approved animation's duration. Keep the text, template and palette, then render again.

This changes timing only. If you change three steps to four, supply the actual fourth step in the narration, update the visual list and check duration again. Changing just the on-screen numeral would leave the audio and image saying different things.

For an overlay on your talking-head footage, request a transparent version or run from the skill repository:

node scripts/render.mjs "$RISO_PROJECT/compositions/01-steps.html" --alpha

The output is a ProRes 4444 .mov, not a transparent MP4. Files can be large and are intended for editing. Dark ink can disappear over dark footage; use a normal MP4 as a full-screen cutaway instead when contrast is poor.

Apply it to your subject or product

Pick one structured passage from your own transcript and fill in this brief before expanding to a whole episode:

Use eian-riso-broll to create motion graphics for my talking-head video.
Audience: [who will watch and what they need to understand]
Transcript: [paste the actual script, rather than only a topic]
Subtitles: [SRT path, or state that none is available]
Visual priority: [the number, comparison, process or conclusion to show]
Source materials: [screenshot paths and sources; identify missing materials]
Style: [choose built-in palettes, at most two per episode]
Use in the edit: [full-screen cutaway or transparent overlay]
Show a storyboard, then stills for approval, then render. Do not invent missing content.

For a booking product, your script might explicitly name “choose a time, enter your details, receive confirmation.” A process template can then show those steps. Provide genuine screenshots for shot if the interface itself matters; a click-by-click demonstration is better handled with screen recording. Extracting screen text from the spoken words helps the visuals stay aligned with your explanation.

Keep the renders/ clips, plates/sheet.jpg contact sheet and STORYBOARD.md. Add your narration, music and subtitles in your video editor, then finish the full video.

For more templates and settings, consult the author’s template guide, production and troubleshooting guide and skill instructions.