P5 Paint Animation

Name: p5-paint-animation
Author: heygen-com

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.

★ 49 Synced 1 hour ago View SKILL.md

At a glance

Design Manual install

This skill is for Design and helps you create handwritten text animations, paint a photo with brush strokes, and convert videos to painted animations.

Install

git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills
cp -r hyperframes-community-skills/skills/p5-paint-animation ~/.claude/skills/p5-paint-animation

Can use Not declared by the author

Good for Create text animations Paint a photo with brush strokes Convert videos to painted animations Add sketch effects to images Animate live photos as paintings Generate write-on text effects

p5js animation Brush Strokes Video Processing Hand Drawn creative-coding

Also in heygen-com/hyperframes-community-skills

View the repo

Vox Explainer Presentations

Create a 60–90 second, collage-style HyperFrames explainer from a hiding-in-plain-sight topic or supplied documents and links. Use for reque...

X Posting License Presentations

Turn any X (Twitter) profile into a 10.3s animated "POSTING LICENSE" card video — a fake driver's license in X's branding: the card slides i...

Other Design skills

Frontend Design anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...

Algorithmic Art anthropics/skills

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...

Prototype mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...

Design An Interface mattpocock/skills

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...

Wireframe Sketch nexu-io/open-design

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...

Wireframe Annotated nexu-io/open-design

An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...