illustrated-explainer

Render a narrated, flat-vector corporate explainer video (about 60–100 s, 16:9). It uses a soft pastel office illustration style generated with gpt-image-2 in one consistent house style, and every beat is cut on a spoken cue from an OpenAI TTS voiceover. Scene types are slow camera pans across wide illustrations with a small-caps caption at the top, bullet lists over a faded scene, a split screen, a zoom-blur whoosh into the logo on a hub ring, a world map with pins and links, floating product cards, and a CTA. Use when the user wants an animated explainer, a "problem, meet X, benefits, CTA" narrated video, a B2B services or SaaS explainer in the flat illustration style, or shares a reference like a corporate animated explainer.

インストールへ移動ファイルを確認

リポジトリ: Ar9av/framesmith
ソースの最終更新活動: 2026年10月1日 21:32
検出された SKILL.md の言語: 英語
スター: 1
フォーク: 1

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

AI アシスタントでインストール

このプロンプトをコピーして、使用中の AI アシスタントに送ってください。

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/Ar9av/framesmith/tree/main/skills/illustrated-explainer.

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/Ar9av/framesmith --skill illustrated-explainer

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

41 ファイル

SKILL.md

ソースの指示 · 読み取り専用プレビュー

name: illustrated-explainer
description: Render a narrated, flat-vector corporate explainer video (about 60–100 s, 16:9). It uses a soft pastel office illustration style generated with gpt-image-2 in one consistent house style, and every beat is cut on a spoken cue from an OpenAI TTS voiceover. Scene types are slow camera pans across wide illustrations with a small-caps caption at the top, bullet lists over a faded scene, a split screen, a zoom-blur whoosh into the logo on a hub ring, a world map with pins and links, floating product cards, and a CTA. Use when the user wants an animated explainer, a "problem, meet X, benefits, CTA" narrated video, a B2B services or SaaS explainer in the flat illustration style, or shares a reference like a corporate animated explainer.
license: MIT
metadata: {"framework":"framesmith","version":"0.1.0"}

# Illustrated explainer Built with `video-to-template` from a narrated flat-illustration explainer. The example `examples/prismor-enterprise/` uses full-frame illustrations with camera pans. For characters, props and icons that animate independently, use the `animated-character-explainer` skill, which shares this engine. ## Workflow 1. **Script** (`vo.txt`): follow the classic arc: the reader's pain as questions, then "you are not alone", then "Here comes <product>", what it does, how it works, benefits, and a CTA. Run it through the `no-ai-slop` skill, and keep every claim sourced from the product's docs. 2. **Voice:** `python3 scripts/main.py voice` (OpenAI TTS plus Whisper word timings). 3. **Illustrations:** list scenes in `assets.json`. Each prompt starts with `STYLE` and describes one scene; the brief's `style` string (or the example's) replaces it, which keeps every image in one house style. Then run `python3 scripts/main.py assets` (1536×1024, medium quality; the hub ring on a transparent background). Leave the top edge calm for captions, and ask for no text in images: all words are typeset. 4. **Beats:** in `brief.json`, each beat starts on a cue phrase (`at`). Cards and bullets can have their own cues. The real logo goes in `assets/logo.png`. 5. **Check, stills, render:** the voiceover is muxed automatically. ## Beat types | type | shows | keys | |---|---|---| | `scene` | a Ken Burns pan across one illustration plus a caption | `image`, `caption` (`\n` for two lines), `move: [z0, z1, fx0, fx1, fy0, fy1]` | | `bullets` | faded illustration, bullet items on cues | `image`, `caption`, `items: [{text, at}]` | | `split` | two illustrations with a sliding divider | `left`, `right`, `caption` | | `logo` | hub ring spins in, real logo in the centre, name rises | `ring`, `caption`, `name`, `name_at` (use `"tr": "whoosh"`) | | `map` | world map, pins drop, optional links from the first pin | `pins` (city keys), `links`, `caption` | | `cards` | product decision cards float up over a soft backdrop | `cards: [{verdict, title, detail, at}]` | | `cta` | logo, name, line, URL over a calm illustration | `image`, `name`, `line`, `url`, `url_at` | Transitions: a crossfade by default, or `"tr": "whoosh"` for a zoom-blur flash. ## Rules - Captions are plain small caps between thin rules, never boxed. There are no trailing periods on screen. - Use the product's own events for cards. Never invent testimonials or quote made-up customers. - The logo is always the real file. AI voices should be disclosed.

GitHubで見る

検索に戻るインストールに戻る

cartoon-launch-film

Render a music-only, hand-drawn cartoon launch film (about 45 s, square 1080, 30 fps) for an X, LinkedIn or Threads post. It has boiling ink linework, a mascot with on-model poses, squash and stretch, a paper-and-grass world and a synthesised 120 BPM score with cartoon SFX. Beats are a dark terminal cold open where the agent forgets, a comic burst, a notebook slam title, the mascot eating old chats and docs, a linked-notes graph, a grid of the agents it works in, a hand-drawn Chrome window where a browser extension captures a page and fills a form with sourced answers, a cited answer note, a speed gauge, a star counter and an end card. Use for a GitHub-stars milestone post, open-source launch, devtool or AI-agent feature announcement, Chrome extension demo, or when the user wants a playful cartoon / indie-animation style instead of a polished SaaS look.

2026-10-08

framesmith

Start here for any framesmith request. framesmith is a library of motion-graphics, video and visual-design skills for AI agents; each template is driven by a brief and renders deterministically with Python and ffmpeg. Use this skill to pick the right template for a request (product promo, launch video, kinetic typography, spec-sheet motion graphic, brutalist or glitch visuals, gpt-image-2 asset pipelines) or to build a new template on the framesmith engine. Triggers include "make a promo video", "motion graphics for my product", "animated spec sheet", "turn this style/video into a template", and "which framesmith skill should I use".

2026-10-08

abstract-journey-film

Render a music-only abstract title film (about 80 s, 16:9, 24 fps) in which a small glowing orb travels through a chain of worlds and lands on the logo. The worlds are a dark glitch data field, a UI card in a lit chamber, wireframes that fill into a web page, a flythrough of 3D app panels, a bubble-sky horizon, a spiral vortex of gradient cards, neon diamonds, a construction grid that builds a sphere and bursts it into glossy spheres, a sphere room, isometric glass objects, pastel light pillars, ribbons and glass, a frosted sphere, nested frames, a pastel world, a portal of rings, an illustrated sunset landscape and space with planets. Image assets come from gpt-image-2.5 (transparent spheres, planets, clouds, ribbon, isometric objects and four backdrops); the rest is procedural, and the score is synthesised in code. Use for a conference opener, brand title sequence, product "sizzle" intro, event teaser, or to recreate a dreamy no-text motion-design journey (the Webflow No Code Conf opener style) for a brand.

2026-10-01

このリポジトリのすべてを見る

illustrated-explainer

ソース情報

インストール方法

AI アシスタントでインストール

ソースファイルを確認

このリポジトリの他の Skills

AI アシスタントでインストール

このリポジトリの他の Skills