eian-riso-broll README

The project's README from github.com/YIAN6557/eian-riso-broll. As one markdown file: README.md.

eian-riso-broll

Risograph-style info animations for talking-head videos · an AI coding-assistant workflow

Works with Claude Code, Codex, Cursor, Gemini CLI, and other agents.

简体中文 · English

Hand your AI assistant the script of your talking-head video. It picks the lines worth visualizing and turns them into vertical info animations (1080×1920 mp4) in a two-color risograph print style, ready to drop into your editor.

Big number Many → few Before / after Key quote

Ten animations made from one minute of script (the last frame of each):

Ten animations from one script

The copy comes from a fictional sample script (in Chinese); every word on screen is lifted from what's said. GIFs are compressed; the real output is 30fps HD mp4.

Who it's for

Creators who make talking-head, explainer or knowledge videos for short-video platforms. While your viewers hear you, this skill makes them see the number, the comparison or the conclusion you're talking about.

The typography is designed for Chinese (serif display type, Chinese line limits). Latin text renders fine too.

Why use it

Install

First install Node.js 22+, Chrome (Edge or Chromium also work), and ffmpeg (on macOS: brew install node ffmpeg).

Then paste the message below to your AI coding assistant (Claude Code, Codex, Cursor, Gemini CLI — any of them), and it will install itself:

Install the eian-riso-broll skill for me. Repo: https://github.com/YIAN6557/eian-riso-broll . Clone it to wherever you load skills or rules (if you're Claude Code, use ~/.claude/skills/eian-riso-broll; otherwise clone it to a suitable working directory — its AGENTS.md at the repo root is the guide for you). Then check that Node.js 22+, Chrome and ffmpeg are installed, run its scripts/check_setup.mjs, and once everything passes, tell me how to use it.

When it says everything passed, you're ready.

Manual install (click to expand)

Claude Code:

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

On Windows, use %USERPROFILE%\.claude\skills instead of ~/.claude/skills. Claude picks it up from SKILL.md and triggers from any project once you ask.

Codex / Cursor / Gemini CLI and others: clone it anywhere and work inside that folder; the assistant reads AGENTS.md at the repo root:

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

How to use it

Just ask your AI assistant, for example:

For a whole episode, the assistant works in three steps and stops for your OK after each:

  1. Storyboard: which line gets which visual, the exact on-screen text and the duration. This is the cheapest moment to drop or swap shots.
  2. Stills: the last frame of every animation, laid out on one sheet. Fix layout or wording here.
  3. Final render: the mp4s, checked again for length and size.

If you give it a single line or say "render it straight away", the assistant merges the steps, but never skips the checks.

Finished files go to ~/eian-riso-broll-projects/<project name>/renders/, one mp4 per animation.

The ten templates

Numbers match the contact sheet above.

# Template Use it when Line from the sample
01 Myth vs. fact versus "Most people think… actually…" Good motion graphics need a hired animator → a script is enough
02 Chapter card title Part one, part two…; an opening title Part one: see the results
03 Big number number One number strong enough to fill the frame 12 lines worth visualizing
04 Before / after compare Two values of the same thing, bars drawn to true scale 40 minutes before, 2 minutes now
05 Many → few converge Lots of things narrowing down to a few 30-plus projects → 4 kinds
06 Network network A count plus connection, relationships or scale 1,800 shots that read as one series
07 Pick one focus Several options with one highlighted Four palettes; 70% of videos use the first
08 Steps steps 2–6 steps in order Just 3 steps: pick lines, check stills, render
09 Screenshot shot Viewers need to see the real thing (dashboard, post, spreadsheet) Last week's storyboard (you supply the screenshot)
10 Key quote quote The hook or the conclusion, on a full dark background Visuals should follow what you say

Four palettes

Palette Mood
Ink blue × fluorescent pink (default) The most "risograph"; knowledge, tech
Deep teal × orange Warm; methods, lifestyle
Navy × vermilion Opinions, myths, warnings
Ink black × bright yellow Restrained; serious topics, data, finance

Use at most two per episode: one for the body, one for the opening and closing. To change colors, just tell Claude.

What it doesn't do

FAQ

How long does rendering take? On an Apple Silicon Mac, a 5-second animation takes about 15–20 seconds. Stills take a few seconds each.

Can I edit the text myself? Yes. Each animation is an html file under compositions/ in the project. Open it in a browser to preview (it loops). Edit the DATA block at the top, then ask Claude to render again.

What if the text is too long? Claude cuts words from what you said rather than shrinking the type; text too small to read on a phone might as well not be there.

Why do a few characters look different? The bundled Chinese fonts cover the 6,763 most common characters; rare ones fall back to a system font.

It says Chrome can't be found. Set CHROME=<path to the browser executable> and try again; check_setup.mjs tells you exactly what went wrong.

Manual use, without Claude

cd ~/.claude/skills/eian-riso-broll
P=$(node scripts/new_project.mjs episode-12)                 # create a project, prints its path
cp templates/number.html "$P/compositions/01-number.html"    # copy a template, edit DATA at the top
node scripts/render.mjs "$P"/compositions/*.html --still     # stills + contact sheet
node scripts/qa.mjs     "$P"/compositions/*.html             # automatic checks
node scripts/render.mjs "$P"/compositions/*.html             # final mp4s
node scripts/render.mjs "$P/compositions/01-number.html" --alpha   # transparent (ProRes 4444)

More detail (in Chinese): references/production.md.

Want to change the skill?

Code layout, the self-test and the maintenance scripts are in CONTRIBUTING.md.

License

For commercial licensing, contact [email protected].

The package uses the custom Eian Personal Non-Commercial License 1.0, with separate written commercial licensing. Individuals may install, run, and privately modify copies for non-commercial personal use, and share the videos they make with it in non-commercial personal accounts. Commercial use—including monetized accounts, advertising, sponsorships, client or employer projects, and organizational or group use—requires prior written authorization and a separately agreed fee. The source, templates and assets may not be redistributed.

This is a source-available license, not an OSI-approved open-source license. GSAP and the bundled fonts keep their own licenses; see third-party notices and license status.

eian-riso-broll (YIAN6557/eian-riso-broll)

Searching Database…

317 ·GitHub
Eian-riso-broll
What is this?This is an AI-assistant skill that takes the script of a talking-head video and turns the lines worth visualizing into risograph-style, two-color vertical info animations (1080x1920 mp4) you drop into your edit as b-roll.
Is this a standalone app or something my AI assistant runs?It's a skill/plugin for AI coding agents, not a standalone app — you install it as a skill folder and Claude Code, Codex, Cursor or Gemini CLI reads its SKILL.md/AGENTS.md and runs the rendering scripts for you.
How do I install and use it?Paste the install message from the README to your agent and it clones the repo itself (for Claude Code: ~/.claude/skills/eian-riso-broll, on Windows %USERPROFILE%\.claude\skills); then just hand it your script text or an SRT file and ask for animations.
What do I need installed first?Node.js 22+, Chrome (Edge or Chromium also work) and ffmpeg — on macOS that's just 'brew install node ffmpeg'. There's a checksetup.mjs script that verifies everything is in place.
What can't it do?Output is vertical-only (1080x1920) for now, picture-only with no sound, and it never invents data: anything that would need a real screenshot shows a 'to be replaced' placeholder instead of a fake UI, and text that's too long gets cut rather than shrunk.
Who is this built for?Creators making talking-head, explainer or knowledge-style videos for short-video platforms, who want synced visuals for the numbers, comparisons or conclusions they're saying out loud.
Does it need internet access to render?No — it runs fully offline with no image-generation models or network calls, and ships its own fonts so output looks identical on macOS, Windows and Linux.
Can I use this commercially?No, not without paying — the custom Eian Personal Non-Commercial License allows free personal, non-commercial use and sharing, but any monetized, client, employer or organizational use needs a separately paid written authorization.
What are the ten animation templates?They cover common info-video needs: myth vs. fact, chapter title card, big number, before/after comparison, many-to-few funnel, network/connections, pick-one highlight, numbered steps, screenshot callout, and a full-screen key quote.
How long does rendering actually take?On an Apple Silicon Mac, roughly 15-20 seconds for a 5-second animation, with stills taking just a few seconds each.
Can I edit the animation text or styling myself?Yes — each animation is an HTML file under compositions/ in your project folder; you can preview it looping in a browser, edit the DATA block at the top, then ask the agent to re-render.
What are the four color palettes and when do I use them?Ink blue x fluorescent pink (default, techy), deep teal x orange (warm, lifestyle), navy x vermilion (opinions/warnings), and ink black x bright yellow (serious/data topics) — the README recommends using at most two palettes per episode.
What are similar projects?herk-edit-kit, shuohao-skills, brag, framefields, reelmimic, saas-motion-kit, guizang-product-video-skill, huashu-art-motion
Which topics is it in?storyboarding, talking-head, short-video, motion-graphics, typography, codex-skill, gemini-cli, claude-code-skill, content-creation, ffmpeg, video-generation, skill
Creator
YIAN6557
Size
6.4 MB
Stars
317
Updated
CommitOct 16Releasev1.0.0Oct 12
Age
7d
Commits · 90 Days