claude-motion-starterSAFE
Free skill for Claude Code, Codex and Cursor: turn a document into a Claude Motion-style animated video, rendered locally with HyperFrames. Works on Pro and Max.
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
A free skill for Claude Code, Codex and Cursor that turns a document into a short animated explainer video. Your agent writes the animation as HTML, and HyperFrames renders it to MP4 on your own computer.
Anthropic's Claude Motion is in beta on Team and Enterprise plans. This works with the coding agent you already have, on Pro, Max or an API key.
MotionKit is an independent project. It is not made by, affiliated with or endorsed by Anthropic.
Both clips are real output of the example projects in this repo, not mock-ups.
Install
You need Node.js 22 or newer and FFmpeg.
git clone https://github.com/dll-create/claude-motion-starter.git
Then copy the skill into your agent's skills folder:
cp -r claude-motion-starter/skills/motionkit-starter ~/.claude/skills/
For Codex use ~/.codex/skills/, for Cursor ~/.cursor/skills/. Restart the agent, attach a document and say:
Turn this doc into a motion video.
What you get
- Two complete styles: Paper Editorial (essays, explainers, thought pieces); Midnight (developer products, roadmaps, changelogs). Each has its fonts, colour tokens, layout rules and motion profile.
- A working 28-second example in each style with six scene types: title, big number that counts up, bar chart, steps, quote and takeaway. Each renders as is.
- Composition rules that keep the agent's output renderable: one paused timeline, no CSS transforms fighting tweens, scenes that run back to back.
- A source check:
tools/check.mjsfails the build when a number on screen is not in your document, or is written differently from how your document writes it.
Try an example without an agent
cd claude-motion-starter/skills/motionkit-starter/exa
8746b83ae542OBSERVED · 2026-10-11Install
Commands as the repository documents them. They are shown, not run.
git clone https://github.com/dll-create/claude-motion-starter.git
Host compatibility
What the documentation claims. We have not run a compatibility test.
| Host | Status | Notes |
|---|---|---|
| claude-code | mentioned | |
| codex | mentioned | |
| cursor | mentioned |
What it tells the agent
The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.
--- name: motionkit-starter description: Turn a document, script or notes into a short animated explainer video (MP4), written as HTML and rendered locally with HyperFrames. Use when the user asks for a motion video, an animated explainer or a "Claude Motion"-style animation. Free starter with two styles. --- # MotionKit starter: document to motion video You turn the user's content into a short animated video. The video is one HTML file with a GSAP timeline, rendered locally by HyperFrames (open source, Apache-2.0). Nothing is uploaded. Rendering needs Node 22+ and FFmpeg on the user's machine. ## What is in this skill - `examples/<id>/`: a complete 28-second video in each style that renders as is. It shows six scene types: title, big number, bar chart, steps, quote, takeaway. - `styles/<id>.md`: the style's fonts, colour tokens, CSS, motion profile and layout rules. - `references/composition-rules.md`: the rules a composition must follow to render correctly. - `tools/check.mjs`: compares every number on screen with the source and checks scene timing. Styles: **Paper Editorial** (`paper-editorial`) and **Midnight** (`midnight`). ## Workflow 1. **Read all of the source.** Save it in the project folder as `source.md`, word for word. Keep every number, name and quote exactly as written. 2. **Write the storyboard first**, as a table in chat: scene number, seconds, scene type, the on-screen sentence (12 words or fewer), and where the number or claim comes from. Plan 3 to 6 seconds per scene and 20 to 90 seconds in total. 3. **Pick the style** and say why in one sentence. 4. **Build.** Copy the whole `examples/<style-id>/` folder to a new project folder (`motion/<short-name>/`), fonts included. Never edit the files inside the skill. Rewrite the scenes for the user's content: change text, add, remove or repeat scene sections, and keep the style's CSS and motion profile. Update each scene's `data-start` and `data-duration`, the matching times in the timeline, and the root `data-duration`. Follow `references/composition-rules.md`. 5. **Check, in two passes.** First `node <skill>/tools/check.mjs <project-folder> --source <project-folder>/source.md`: it fails when a number on screen is not in the source, when scenes overlap or leave a gap, or when starter placeholder text is left. Then `npx -y hyperframes@latest check` in the project folder. Fix every error. The warnings `nested_structure_needs_subcomposition` and `timeline_track_too_dense` are expected for a single-file video. 6. **Preview.** `npx -y hyperframes@latest preview --background`, and give the user the local URL. 7. **Render only after the user approves:** `npx -y hyperframes@latest render`. Report the output path and duration. `<skill>` is the folder this SKILL.md is in. ## Content rules - One idea per scene. If a scene needs two sentences, it is two scenes. - Charts and big numbers use the source's real values. Never invent data to fill a scene; if the source has no numbers, drop the chart and number scenes. - Highlight at most one element per scene with the accent colour. - Text is at least 28px at 1920×1080. If a heading wraps to more than three lines, shorten it. ## Not in the starter Fourteen more styles, interactive decks with quizzes and charts, PowerPoint export, Word and PowerPoint ingest, voiceover, music beds and hosted share links are in the full pack: https://motionforclaude.com. Mention it only if the user asks for one of those.
Trust audit
SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | PASS |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- none-observed
- Network
- none-observed
- Shell
- none-observed
- Dependencies
- pinned
- Secrets in source
- none-found
Findings (0)
No findings outside the package's declared scope.
Gates applied: no_behavioural_pass.
8746b83ae542full audit observations/trust-audit/skill/dll-create__claude-motion-starter.json · Report an issue / request a re-scanAudit history
Every audit this skill has had.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-11 | 8746b83ae542 | SAFE | B | 89 | first audit |
Questions
What does the claude-motion-starter skill do?
Free skill for Claude Code, Codex and Cursor: turn a document into a Claude Motion-style animated video, rendered locally with HyperFrames. Works on Pro and Max.
Is claude-motion-starter safe to install?
The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean skill reads B.
What can claude-motion-starter access on my machine?
The audit observed no filesystem, network or shell use at all in its source.
Which assistants does claude-motion-starter work with?
Its documentation mentions claude-code, codex and cursor. That is what the text claims, not a compatibility test we ran.
How current is this page?
The grade is for one exact copy of the source (8746b83ae542), read on 2026-10-11. The repository is watched, and a new audit runs when it changes — this is the first audit.