SKILL0:56HyperFrames: write HTML, get a video
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k/
Get Friday PicksSubmitWhiteboard video skill: hand-drawn explainers from images
A Codex skill wrapping a local engine that turns images, SVGs, line art or scripts into hand-drawn whiteboard animation videos.
In short: A Codex skill wrapping a local engine that turns images, SVGs, line art or scripts into hand-drawn whiteboard animation videos. It is a free skill for people who use Codex and want help with motion graphics.
Checked on · Added
Works with
| Agent / tool | Access / cost | Link |
|---|---|---|
| Codex | ChatGPT plan or API | openai.com/codex |
| GitHub repo | Open source · ★ 334 | gnipbao/codex-whiteboard-video-skill |
Try it in 60 seconds
git clone https://github.com/gnipbao/codex-whiteboard-video-skill.git \
Install command copied from the project README. Check the README for the latest version.
What it does
A Codex skill wrapping a local engine that turns images, SVGs, line art or scripts into hand-drawn whiteboard animation videos.
whiteboard-video-engine 的 Codex Skill 适配层。安装后，Codex 可以直接调用本地引擎，把图片、SVG、线稿或脚本转换成白板手绘视频，并从 30 种内置视觉风格中选择、推荐或扩展配方。
Short excerpt from the README of gnipbao/codex-whiteboard-video-skill. Read the full README on GitHub.
Inside the repo
仓库分工效果演示安装在 Codex 中使用视觉风格本地模型仓库内容不包含许可证
A prompt to try
Using the whiteboard video skill, turn these 4 diagrams into a hand-drawn whiteboard explainer: [files]
Using the whiteboard video skill, turn these 4 diagrams into a hand-drawn whiteboard explainer: [files]
Written by us so you can reuse it. Replace each [bracket] with your details.
Step by step
- Open the GitHub repo and read the README (install commands change often).
- Install it with the command in the README, or copy the skill folder into ~/.claude/skills/ (Claude Code) or ~/.codex/skills/ (Codex).
- Restart your agent so it picks the skill up.
- Ask for the video in plain words and review drafts before the final render.
Docs, demos & materials
Sources & credit
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
Related skills and use cases in Motion Graphics
- HyperFrames: write HTML, get a video Skill
- /brag: turn a finished project into a launch video Skill
- Anatomy: interactive isometric illustrations Skill
- huashu-art-motion: animate artwork in 35 art styles Skill
- GSAP official agent skills Skill
- lemo-opuscar: short films in 51 styles, no video model Skill
- motion-skills: 50 packs (Reels, explainers, data-viz, Manim) Skill
- guizang product video: update promos from your real UI Skill
Related
SKILL0:56Claude Code +1★ 63.8k
SKILL0:34/brag: turn a finished project into a launch video
Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Anatomy: interactive isometric illustrations
Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILLhuashu-art-motion: animate artwork in 35 art styles
Brings paintings and illustrations to life with code, offering dozens of art styles and several narration patterns for art-explainer videos.
Claude Code +1★ 4.2k
SKILLGSAP official agent skills
Official skills from GreenSock that teach agents to write correct, smooth GSAP animations.
Claude Code +1★ 16.4k
SKILLmotion-skills: 50 packs (Reels, explainers, data-viz, Manim)
Install a pack and your agent works like a motion designer for TikTok/Reels, explainers, charts and WebGL.
Claude Code +2★ 812Free newsletter
Friday Picks
New AI tools you can use right away, in plain words. Every Friday.