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…

322 ·GitHub
Eian-riso-broll
Что это такое?Это скилл для ИИ-ассистента, который берёт текст видео с говорящей головой и превращает фразы, которые стоит показать визуально, в вертикальные информационные анимации в стиле ризографа в два цвета (mp4 1080x1920) — их вы вставляете в монтаж как b-roll.
Это отдельное приложение или то, что запускает мой ИИ-ассистент?Это скилл/плагин для ИИ-агентов, а не отдельное приложение — вы устанавливаете его как папку-скилл, и Claude Code, Codex, Cursor или Gemini CLI читает его SKILL.md/AGENTS.md и сам запускает скрипты рендеринга.
Как его установить и пользоваться?Вставьте сообщение по установке из README своему агенту — он сам склонирует репозиторий (для Claude Code: ~/.claude/skills/eian-riso-broll, на Windows %USERPROFILE%\.claude\skills); затем просто передайте ему текст вашего сценария или SRT-файл и попросите сделать анимации.
Что нужно установить заранее?Node.js 22+, Chrome (подойдёт и Edge или Chromium) и ffmpeg — на macOS это просто 'brew install node ffmpeg'. Есть скрипт checksetup.mjs, который проверит, что всё на месте.
Чего он не умеет?Пока вывод только вертикальный (1080x1920), только картинка без звука, и он ничего не выдумывает: всё, что требовало бы реального скриншота, показывается заглушкой 'to be replaced' вместо фейкового интерфейса, а слишком длинный текст обрезается, а не ужимается.
Для кого это сделано?Для авторов видео с говорящей головой, объясняющих или обучающих роликов для платформ коротких видео, которым нужны синхронные визуалы для чисел, сравнений или выводов, которые они произносят вслух.
Для рендеринга нужен интернет?Нет — он полностью работает офлайн, без моделей генерации картинок и сетевых запросов, и поставляется со своими шрифтами, поэтому результат выглядит одинаково на macOS, Windows и Linux.
Можно ли использовать это в коммерческих целях?Нет, только за деньги — пользовательская лицензия Eian Personal Non-Commercial License разрешает бесплатное личное некоммерческое использование и распространение, но любое монетизируемое использование, работа на клиента, работодателя или организацию требует отдельного платного письменного разрешения.
Какие десять шаблонов анимации есть?Они покрывают типовые задачи информационных видео: миф против факта, титульный слайд главы, крупное число, сравнение до/после, воронка «из многих в немногих», сеть/связи, выделение одного варианта из списка, нумерованные шаги, выноска на скриншоте и полноэкранная ключевая цитата.
Сколько реально занимает рендеринг?На Mac с Apple Silicon — примерно 15–20 секунд на 5-секундную анимацию, а статичные кадры занимают всего несколько секунд каждый.
Могу ли я сам отредактировать текст или оформление анимации?Да — каждая анимация это HTML-файл в папке compositions/ вашего проекта; можно посмотреть её зацикленное превью в браузере, отредактировать блок DATA в начале файла и попросить агента отрендерить заново.
Какие четыре цветовые палитры и когда какую использовать?Чернильно-синий x флуоресцентно-розовый (по умолчанию, техно-стиль), тёмно-бирюзовый x оранжевый (тёплый, лайфстайл), тёмно-синий x киноварный (мнения/предупреждения) и чернильно-чёрный x ярко-жёлтый (серьёзные темы/данные) — в README советуют использовать не больше двух палитр на один выпуск.
What are similar projects?herk-edit-kit, shuohao-skills, brag, framefields, reelmimic, huashu-motion, saas-motion-kit, guizang-product-video-skill
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
322
Updated
CommitOct 19Releasev1.0.0Oct 12
Age
8d
Commits · 90 Days