claude-typer — Claude Code skill: prompt typing video
Renders a clip where a line of text types itself out in a Claude-style window, then returns the path to the .mov it wrote.
npx skills add vibe-motion/skills --skill claude-typer -a claude-codeWhat claude-typer does
Hand it the text you want on screen and it calls scripts/render_claude_typer.py with /usr/local/bin/python3. That script points Remotion CLI at the hosted Typer30fps composition on www.laosunwendao.com and drops a video into the current directory. The filename comes from the prompt itself: opening requests get stripped, characters the filesystem rejects get cut.
Stock output is a transparent MOV at 30 fps — prores, profile 4444, yuva444p10le, --scale 2. Frame dimensions and the width of the text window are yours to move with --video-width, --video-height, --claude-width. A local Chrome or Chromium is found and passed as --browser-executable; concurrency stays at 1 with a 300000 ms timeout, and anything the script doesn't recognise lands on remotion render as is.
First choice of runner is bunx @remotion/cli, with a pinned npx call as backup, so Node.js and npm reachability are the floor. Nothing renders without a network path to www.laosunwendao.com, since the composition sits there. Hitting a delayRender() timeout? Raise --timeout-ms and keep --concurrency=1.
What it helps with
- render a clip of a prompt typing itself out
- produce a transparent MOV for compositing
- set frame size and text-window width for the edit
- render on a machine without a global Remotion install
- name the output file after the prompt text
Example prompts for the agent
- Make a typing-animation video of this prompt:
ship the changelog before Friday. - Render the same text square at 1080×1080, text window 880 wide.
- Re-render with codec
proresand profile4444, timeout bumped to 600000.
How to install claude-typer
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill claude-typer -a claude-code2Manually: put the files in place
~/.claude/skills/claude-typer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/claude-typer/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill claude-typer -a codex2Manually: put the files in place
.agents/skills/claude-typer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill claude-typer -a cursor2Manually: put the files in place
.cursor/skills/claude-typer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills claude-typer2Manually: put the files in place
.github/skills/claude-typer/SKILL.md1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill claude-typer -a gemini-cli2Platform CLI
gemini skills install https://github.com/vibe-motion/skills --path claude-typerManually: put the files in place
.devin/skills/claude-typer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill claude-typer -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about claude-typer
How do I install claude-typer in Claude Code?
Run npx skills add vibe-motion/skills --skill claude-typer -a claude-code. The skill then sits at ~/.claude/skills/claude-typer/SKILL.md.
What does claude-typer do?
It takes a text prompt and renders a video of that text being typed in a Claude-style window, by driving Remotion CLI against a composition hosted on www.laosunwendao.com. You get back the path to a .mov.
What has to be in place before it renders?
/usr/local/bin/python3 for the script, Node.js with npm access for the runner, and a working connection to www.laosunwendao.com. Chrome or Chromium is detected automatically.
