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.

Jump to install Review files

Repository: Ar9av/framesmith
Last source activity: October 1, 2026 at 21:32
Detected SKILL.md language: English
Stars: 1
Forks: 1

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

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.

A direct command skips the review prompt. Inspect the source before running it.

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

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

41 files

SKILL.md

Source instructions · Read-only preview

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.

View on GitHub

Back to search Back to installation

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

View all from this repository

illustrated-explainer

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository