Anime Cel Video Maker
edenfunf/reelmimic
Builds Japanese TV-anime style MP4 videos in code, with cel-shaded characters, painted backgrounds and staging effects, rendered in headless Chrome and encoded with ffmpeg.
Turns a text prompt, photo or short video into hand-made looking p5.js animation: self-writing handwriting, brushstroke repaints and living paintings rendered offline.
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animation --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/p5-paint-animation .claude/skills/p5-paint-animation && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "p5-paint-animation" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animation into .claude/skills/p5-paint-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5-paint-animation", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/p5-paint-animation .agents/skills/p5-paint-animation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "p5-paint-animation" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animation into .agents/skills/p5-paint-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5-paint-animation", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/p5-paint-animation .cursor/skills/p5-paint-animation && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "p5-paint-animation" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animation into .cursor/skills/p5-paint-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5-paint-animation", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/heygen-com/hyperframes-community-skills.git --path skills/p5-paint-animation--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/p5-paint-animation .gemini/skills/p5-paint-animation && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "p5-paint-animation" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animation into .gemini/skills/p5-paint-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5-paint-animation", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/p5-paint-animation .github/skills/p5-paint-animation && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "p5-paint-animation" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animation into .github/skills/p5-paint-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5-paint-animation", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/p5-paint-animation .opencode/skills/p5-paint-animation && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "p5-paint-animation" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/p5-paint-animation into .opencode/skills/p5-paint-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5-paint-animation", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
p5-paint-animationTurns a text prompt, photo or short video into hand-made looking p5.js animation: self-writing handwriting, brushstroke repaints and living paintings rendered offline.
Three flows share one engine and are chosen by input. A text phrase becomes handwriting that writes itself onto ruled paper, a photo becomes a brushstroke painting that is either still or paints itself on with a camera pull, and a video or iPhone Live Photo is repainted frame by frame over a locked stroke lattice. Everything is code, with p5.brush strokes rendered headlessly and no image models involved.
Rendering uses Node scripts such as `render-anim.mjs` in `scripts/`, headless Chromium and ffmpeg, and writes only to the output paths you give plus a sibling `.track.json`. Running again with the same `--seed` gives identical output, and a one-time `scripts/setup.sh` installs pinned dependencies from the npm registry. Sketches cannot make network or local file requests. The skill advises against it for crisp brand typography, photoreal output, footage longer than about 10 seconds, or interactive pages.
Read from SKILL.md and the folder at commit ba7a0bb. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 11 files in scripts/ (JavaScript and Shell), which the agent can run.
Shell commands in SKILL.md call:
nodeshffprobeFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
p5 Paint Animation loads about 1.8k tokens when it runs, and up to ~3.6k if it reads all its reference files. Until then it costs about 138 tokens; SKILL.md has 783 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from heygen-com/hyperframes-community-skills at commit ba7a0bb, republished under its Apache-2.0 licence (© heygen-com). 783 words, ~1,755 tokens.
.claude/skills/p5-paint-animation/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.Three flows, one engine. Pick by input:
| Input | Flow | Output |
|---|---|---|
| Text prompt / phrase | A: Write-on | Handwriting animates onto ruled paper, pen-tracked for camera |
| Photo | B: Repaint + paint-on | Brushstroke painting, still or painting-itself film, camera pull |
| Video / Live Photo | C: Living painting | Every frame repainted over a locked stroke lattice |
Use for: hand-made-looking motion — handwriting that writes itself, photos as brushstroke paintings (still or animating), short clips as living paintings. Do NOT use for: crisp typography or brand-accurate text (use real fonts), photoreal output, footage longer than ~10s (render cost scales per frame ≈ 5–20s each), or live/interactive pages (this renders offline MP4/PNG).
sh scripts/setup.sh (run manually, once) uses the committed lockfile to
download pinned dependencies from the npm registry: puppeteer 25.9.0,
p5 2.3.2 (LGPL-2.1), and p5.brush 2.2.1 (MIT). Puppeteer downloads its
pinned Chrome for Testing build from Google's download service. Read-only
downloads; no credentials, no cost, nothing uploaded.out.png / out.mp4, plus a sibling
.track.json and, with --keep-frames 1, a _frames_* directory).npx hyperframes remove-background (downloads the HyperFrames CLI from npm; local CoreML
inference, no data leaves the machine).Render any command below, then open the output: the last frame must show the
complete artwork (text fully written / painting fully covered), and re-running
with the same --seed must produce identical bytes on the canvas. The smoke
test used for review: node render-anim.mjs sketches/handwriting.anim.js /tmp/t.mp4 --size 1600x900 --seed 7 --inject 'PHRASE="go make something"'.
sh scripts/setup.shInstalls the exact dependency tree recorded in scripts/package-lock.json.
All commands below run from scripts/.
node render-anim.mjs sketches/handwriting.anim.js out.mp4 \
--size 1600x900 --fps 24 --seed 7 --hold 12 \
--inject 'PHRASE="your text here";SIZE=170'? . , - / @. Wraps automatically.--inject: SIZE, INK (hex), BRUSH ("2B" pencil, "crayon",
"charcoal"), PAPER=1 for blank paper.out.track.json — per-frame pen position. For a
camera-follows-pen move, crop each frame along the smoothed track
(exponential follow, gain ~0.14, camera y LOCKED to the baseline — never
follow the pen tip's y or the camera bounces on every ascender).Still:
node render.mjs sketches/repaint.anim.js out.png \
--size 720x900 --seed 3 --image photo.jpg --inject "STYLE=0;DETAIL=3"Paint-on film (the painting paints itself, coarse-to-fine, painter-ordered — calm regions first, the face last):
node render-anim.mjs sketches/repaint.anim.js out.mp4 \
--size 720x900 --seed 3 --image photo.jpg --fps 14 --hold 40 \
--inject 'STYLE=0;DETAIL=3;SUBJECT="0.5,0.5,0.44,0.55"'STYLE 0 pastel / 1 gouache / 2 charcoal-sketch. DETAIL 1 painterly,
2 faces resolve, 3 soft features (noses), 5 portrait-grade (adds a second
fine lap). LOOSE 0.7–1.5 stroke wildness. SAT color compensation (~1.1).SUBJECT="cx,cy,rx,ry" (image fractions) paints everything inside that
ellipse through all passes FIRST and drops a subject-done frame marker.
Camera pull-out recipe: hold tight on the subject, then at the marker frame
ease wide with ffmpeg zoompan (cosine ease, ~2s):
zoompan=z='if(lte(in,M),1.9,1.85-0.85*(0.5-0.5*cos(PI*min((in-M)/28,1))))'
(upscale 2x lanczos first so the tight phase stays sharp).node render-video.mjs clip.mov out.mp4 \
--size 720x900 --fps 12 --seed 7 --inject "STYLE=0;DETAIL=2".mov (share-sheet Options → Live Photo ON,
or Photos.app → Export Unmodified Original). If it arrives as bare JPEG the
motion was stripped in transit — ask for a 2–3s normal video instead; that's
better input anyway.ffprobe -f lavfi "movie=in.mov,signalstats" → YDIF),
paint only the calm window with --start/--dur, and ping-pong the result
(forward+reverse concat) for a seamless breathing loop.WORLD=1 tracks the camera by image correlation and
lets strokes live in world coordinates — the camera pans across one growing
painting. Translation-only; fast zooms drift.npx hyperframes remove-background), pass the matted PNGs with --frames DIR and
MASKED=1, and set BG to your paper color.eq=gamma=1.2). Never boost
saturation before painting — shadow chroma noise becomes literal teal paint.references/flows.md has full worked recipes; references/gotchas.md is the
list of failure modes already hit so you don't hit them again.
© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 13 other files (scripts, references) in skills/p5-paint-animation of heygen-com/hyperframes-community-skills.
Open the folder on GitHubat commit ba7a0bb
p5 Paint Animation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| p5 Paint Animation this skillheygen-com/hyperframes-community-skills | 187 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Anime Cel Video Makeredenfunf/reelmimic | 1.9k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Embedded Video Captionsheygen-com/hyperframes | 60k | 3 repos | ~8.6k | Automated safety check: Pass | Apache-2.0 | |
| Painted Animationtuzhechen2005/opus-video-skills | 146 | 1 repos | ~1.9k | Automated safety check: Pass | Custom licence | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 60k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Lemo-Opuscar Short Film Directorlemomo-ai/lemo-opuscar | 1.7k | — | ~596 | Automated safety check: Pass | Custom licence |
edenfunf/reelmimic
Builds Japanese TV-anime style MP4 videos in code, with cel-shaded characters, painted backgrounds and staging effects, rendered in headless Chrome and encoded with ffmpeg.
heygen-com/hyperframes
Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.
tuzhechen2005/opus-video-skills
Make hand-painted watercolour-and-ink cartoon videos (MP4) with code — p5.js + p5.brush rendered frame by frame in headless Chrome, encoded with ffmpeg — starring Clawd or any character.
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
lemomo-ai/lemo-opuscar
Directs a short film made entirely in code in one of the Lemo-Opuscar library's named visual styles, from fetching the library through production and delivery.
nateherkai/hyperframes-student-kit
Agent 1 of the video editing pipeline. An agent skill from nateherkai/hyperframes-student-kit.
heygen-com/hyperframes-community-skills
Turns your local Claude Code session history into a 60 to 75 second hand-drawn ink film about a day with your agent, with a string score and your approval of every line.
heygen-com/hyperframes-community-skills
Builds side-by-side comparison and meme videos on a fixed photo of hands holding an open foldable phone, with your own HTML playing in each screen.
heygen-com/hyperframes-community-skills
Builds a short animated posting-license card video from an X profile's name, handle, counters and avatar, using a fixed template that the agent only fills in and renders.
heygen-com/hyperframes-community-skills
Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.
heygen-com/hyperframes-community-skills
Turns a Strudel live-coding music track into a 1080x1080 HyperFrames video where the code itself is the picture and each line highlights on the note it plays.
heygen-com/hyperframes-community-skills
Turns one typical session between you and your agent into a short animated film built from your real messages, with a composed score, after you approve every line.
Categories
Turns a text prompt, photo or short video into hand-made looking p5.js animation: self-writing handwriting, brushstroke repaints and living paintings rendered offline. Three flows share one engine and are chosen by input. A text phrase becomes handwriting that writes itself onto ruled paper, a photo becomes a brushstroke painting that is either still or paints itself on with a camera pull, and a video or iPhone Live Photo is repainted frame by frame over a locked stroke lattice.
p5 Paint Animation fits situations like: making handwriting that appears to write itself onto paper; repainting a photo as a brushstroke painting with a paint-on animation; turning a short clip or Live Photo into a living painting.
Run `npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a claude-code`. Or copy the skill folder (skills/p5-paint-animation in heygen-com/hyperframes-community-skills) into .claude/skills/p5-paint-animation in your project. Claude Code loads it when a task matches its description.
Run `npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a codex`. Or copy the skill folder (skills/p5-paint-animation in heygen-com/hyperframes-community-skills) into .agents/skills/p5-paint-animation in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/p5-paint-animation, .gemini/skills/p5-paint-animation, .github/skills/p5-paint-animation and .opencode/skills/p5-paint-animation in your project.
Going by SKILL.md and its folder, p5 Paint Animation needs JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (node, sh and ffprobe). Our summary lists: Node 22.12 or newer; ffmpeg on the PATH; About 500MB of disk for Chromium; Network access once to run `scripts/setup.sh`.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
p5 Paint Animation is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.8k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.8k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with p5 Paint Animation: Anime Cel Video Maker (edenfunf/reelmimic, 1.9k stars), Embedded Video Captions (heygen-com/hyperframes, 60k stars), Painted Animation (tuzhechen2005/opus-video-skills, 146 stars) and HyperFrames Video Entry Point (heygen-com/hyperframes, 60k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes-community-skills, which has 187 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 29, 2026.
Source: heygen-com/hyperframes-community-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.