Agent skill

p5 Paint Animation

by heygen-com in heygen-com/hyperframes-community-skills

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.

Apache-2.0Auto-check passedMedia & Creative

Install p5 Paint Animation

skills CLI
$ npx skills add heygen-com/hyperframes-community-skills --skill p5-paint-animation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes-community-skills p5-paint-animation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
p5-paint-animation
GitHub stars
187
Token cost
~1.8k tokens
SKILL.md length
783 words
Files
14 (incl. scripts, references)
Skills in repo
8
Repo updated
First seen
Licence
Apache-2.0

At a glance

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.

  • Making handwriting that appears to write itself onto paper
  • SKILL.md covers When to use / when not, Requirements and side effects, Verify success and Setup (once), plus 4 more sections
  • Runs JavaScript and Shell scripts from its folder; calls node, sh and ffprobe
  • Repainting a photo as a brushstroke painting with a paint-on animation

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Animate the phrase go make something as pencil handwriting on ruled paper.”
  • “Repaint this photo as a brushstroke painting that paints itself on.”
  • “Turn my iPhone Live Photo into a living painting.”

Requirements

  • Node 22.12 or newer
  • ffmpeg on the PATH
  • About 500MB of disk for Chromium
  • Network access once to run `scripts/setup.sh`

What it can do on your machine

Read from SKILL.md and the folder at commit ba7a0bb. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Ships 11 files in scripts/ (JavaScript and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • sh
    • ffprobe

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~138
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.6k

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.

Safety

Auto-check passed

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.

SKILL.md

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.

Download SKILL.mdSave it as .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.
name
p5-paint-animation
description
Turn a text prompt, a photo, or a live video clip into hand-made-looking p5.js animation — pencil handwriting that writes itself, photos repainted as brushstroke art with paint-on animation and camera moves, and short videos (iPhone Live Photos included) repainted frame-by-frame as a living painting. Trigger on: "handwritten text animation", "paint this photo", "painted video", "sketch effect", "turn my live photo into a painting", "write-on effect". Everything is 100% code: p5.brush strokes rendered headlessly, no image models.

p5 Paint Animation

Three flows, one engine. Pick by input:

InputFlowOutput
Text prompt / phraseA: Write-onHandwriting animates onto ruled paper, pen-tracked for camera
PhotoB: Repaint + paint-onBrushstroke painting, still or painting-itself film, camera pull
Video / Live PhotoC: Living paintingEvery frame repainted over a locked stroke lattice

When to use / when not

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).

Requirements and side effects

  • Requires: Node 22.12+, ffmpeg on PATH, ~500MB disk (Chromium).
  • 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.
  • Renders launch sandboxed headless Chromium on a blank page. Network and local file requests from sketches are blocked; sketches receive inputs as data URLs.
  • Writes only inside paths you pass (out.png / out.mp4, plus a sibling .track.json and, with --keep-frames 1, a _frames_* directory).
  • Optional, only for flow C subject matting: npx hyperframes remove-background (downloads the HyperFrames CLI from npm; local CoreML inference, no data leaves the machine).

Verify success

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"'.

Setup (once)

sh scripts/setup.sh

Installs the exact dependency tree recorded in scripts/package-lock.json. All commands below run from scripts/.

Flow A — prompt → write-on animation

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'
  • Full alphabet: lowercase, caps, digits, ? . , - / @. Wraps automatically.
  • Dials via --inject: SIZE, INK (hex), BRUSH ("2B" pencil, "crayon", "charcoal"), PAPER=1 for blank paper.
  • The run writes 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).
  • For scraggly/messy writing raise the per-letter jitter in the sketch; for word-sync to a voiceover, transcribe first and start each word's strokes at its spoken time.

Flow B — photo → painting (+ paint-on film + camera)

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"'
  • Crop to the subject first. Face size in frame is destiny: selfie-distance faces resolve beautifully; small faces stay figures. Portrait 4:5 or 9:16.
  • Dials: 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).
Show full SKILL.md (255 more words)Show less

Flow C — video / Live Photo → living painting

node render-video.mjs clip.mov out.mp4 \
  --size 720x900 --fps 12 --seed 7 --inject "STYLE=0;DETAIL=2"
  • The stroke lattice is built ONCE from frame 1 and locked; only colors and orientations resample per frame. Strokes hold still — the painting never "boils" while the subject moves.
  • Live Photos: get the paired .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.
  • Motion triage first. Live Photos include the phone swinging. Measure per-frame motion (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.
  • Big camera motion? 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.
  • Subject-only painting: matte frames first (npx hyperframes remove-background), pass the matted PNGs with --frames DIR and MASKED=1, and set BG to your paper color.
  • Dark footage: grade with gamma only (eq=gamma=1.2). Never boost saturation before painting — shadow chroma noise becomes literal teal paint.

QC gates (all flows)

  • Read the actual output frames; never ship on intent. Check: faces resolve, no bare-canvas gaps, first/mid/last frames coherent.
  • Same seed = identical render. Iterate one dial at a time against a fixed seed.
  • For anything joining a larger film, verify seams numerically per motion-doctrine — this skill produces material, not final grammar.

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

Files

SKILL.md and 13 other files (scripts, references) in skills/p5-paint-animation of heygen-com/hyperframes-community-skills.

  • SKILL.md
  • references/flows.md
  • references/gotchas.md
  • scripts/lib/inject.mjs
  • scripts/lib/page-safety.mjs
  • scripts/package-lock.json
  • scripts/package.json
  • scripts/render-anim.mjs
  • scripts/render-video.mjs
  • scripts/render.mjs
  • scripts/setup.sh
  • scripts/sketches/handwriting.anim.js
  • scripts/sketches/repaint-video.js
  • scripts/sketches/repaint.anim.js

Open the folder on GitHubat commit ba7a0bb

Compare with similar skills

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.

p5 Paint Animation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
p5 Paint Animation this skillheygen-com/hyperframes-community-skills187—~1.8kAutomated safety check: PassApache-2.0
Anime Cel Video Makeredenfunf/reelmimic1.9k—~1.6kAutomated safety check: PassMIT
Embedded Video Captionsheygen-com/hyperframes60k3 repos~8.6kAutomated safety check: PassApache-2.0
Painted Animationtuzhechen2005/opus-video-skills1461 repos~1.9kAutomated safety check: PassCustom licence
HyperFrames Video Entry Pointheygen-com/hyperframes60k3 repos~5.2kAutomated safety check: PassApache-2.0
Lemo-Opuscar Short Film Directorlemomo-ai/lemo-opuscar1.7k—~596Automated safety check: PassCustom licence

Similar skills

  • 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.

    1.9k GitHub stars~1.6k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Embedded Video Captions

    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.

    60k GitHub starsUsed in 3 repos~8.6k tokens
    Media & CreativeAuto-check passed
  • Painted Animation

    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.

    146 GitHub starsUsed in 1 repo~1.9k tokens
    Media & CreativeAuto-check passed
  • HyperFrames Video Entry Point

    heygen-com/hyperframes

    Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.

    60k GitHub starsUsed in 3 repos~5.2k tokens
    Media & CreativeAuto-check passed
  • Lemo-Opuscar Short Film Director

    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.

    1.7k GitHub stars~596 tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Cut Silences

    nateherkai/hyperframes-student-kit

    Agent 1 of the video editing pipeline. An agent skill from nateherkai/hyperframes-student-kit.

    1.3k GitHub stars~1.2k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes-community-skills

All 8 skills in this repo
  • Day in My Life Agent Film

    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.

    187 GitHub stars~1.7k tokensUpdated 11 days ago
    Auto-check passed
  • Duo Foldable Phone Comparison

    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.

    187 GitHub stars~2k tokensUpdated 11 days ago
    Auto-check passed
  • X Posting License Video

    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.

    187 GitHub stars~1.2k tokensUpdated 11 days ago
    Auto-check passed
  • 3D Camera Captions for HyperFrames

    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.

    187 GitHub stars~2.3k tokensUpdated 11 days ago
    Auto-check passed
  • Strudel Live-Coding Video Producer

    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.

    187 GitHub stars~1.3k tokensUpdated 11 days ago
    Auto-check passed
  • Session Story Film

    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.

    187 GitHub stars~1.8k tokensUpdated 11 days ago
    Auto-check passed

Works with

Questions about p5 Paint Animation

What does p5 Paint Animation do?

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.

When should I use p5 Paint Animation?

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.

How do I install p5 Paint Animation in Claude Code?

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.

How do I install p5 Paint Animation in Codex?

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.

Can I use p5 Paint Animation in Cursor, Gemini CLI or GitHub Copilot?

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.

What does p5 Paint Animation need to run?

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`.

Does p5 Paint Animation access the network?

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.

Is p5 Paint Animation safe to install?

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.

What licence does p5 Paint Animation use?

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.

How many tokens does p5 Paint Animation use?

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.

What are the alternatives to p5 Paint Animation?

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.

Who maintains p5 Paint Animation?

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.