skill

launchflim-skills

Claude Code skills for motion design written in code — logo-layers: logo picture → animatable layered SVG parts + pen centre lines, rendered to MP4/GIF.

Lother13501350/launchflim-skillscommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/Lother13501350/launchflim-skills itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 30, 2026

LaunchFlim Skills

Open-source Claude Code skills for motion design written in code — the tools behind LaunchFlim's logo animations and brand films, packaged so Claude can use them in any project.

Skill	What it does
`logo-layers`	A logo picture → layered, animatable SVG parts (mark vs wordmark), pen centre lines in writing order, blob/plate detection, a fidelity check, and a plain SVG/JS animation rendered to MP4/GIF.

More are on the way (kinetic type, film QC, HTML → MP4 rendering).

logo-layers

Give Claude a logo and ask for an animation:

Animate brand/logo.png — write it on stroke by stroke and give me a GIF and an MP4.

Under the hood:

vectorize.py removes a flat background, finds the logo's few flat colours, splits each into its connected pieces (letters, strokes, the parts of a mark), traces each with potrace, and groups them into mark and wordmark.
lines.py thins every part to a skeleton, joins it into strokes, orders them the way a hand writes and measures the pen width — and refuses to "write" dots, blobs and plates, which are wiped in instead.
fidelity.py compares the trace with the original (shape overlap and colour error), so a gradient logo is never replaced by a wrong trace.
build_demo.py + demo/render.mjs play the parts in plain SVG (mask + dash writing, deterministic seek(t)) and render MP4/GIF with headless Chromium and ffmpeg. motion_checks.py confirms the last frame is exactly the logo at rest.

The output, layers.json, is plain data — use it from CSS, GSAP, Remotion, Motion Canvas or anything else that draws SVG paths.

Install

As a Claude Code plugin (recommended)

In Claude Code:

/plugin marketplace add Lother13501350/launchflim-skills
/plugin install launchflim-skills@launchflim

Skills then show up namespaced, e.g. /launchflim-skills:logo-layers; Claude also picks them up on its own when a task matches.

Copy a skill into your skills folder

git clone https://github.com/Lother13501350/launchflim-skills.git
mkdir -p ~/.claude/skills
cp -R launchflim-skills/skills/logo-layers ~/.claude/skills/

Use .claude/skills/ inside a project instead of ~/.claude/skills/ to share it with that project only.

Dependencies (logo-layers)

pip install -r skills/logo-layers/requirements.txt      # numpy, scipy, Pillow
brew install potrace ffmpeg                             # macOS
sudo apt install potrace ffmpeg                         # Debian / Ubuntu
cd skills/logo-layers/demo && npm install && npx playwright install chromium   # only for MP4/GIF rendering

Claude checks for these and asks before installing anything.

Run it by hand

cd skills/logo-layers
python3 scripts/vectorize.py examples/test-badge/logo.png /tmp/badge
python3 scripts/lines.py /tmp/badge/layers.json
python3 scripts/fidelity.py /tmp/badge --preview /tmp/badge/trace.png
python3 scripts/build_demo.py /tmp/badge/layers.json /tmp/badge/animation.html
cd demo && node render.mjs /tmp/badge/animation.html --mp4 /tmp/badge/logo.mp4 --gif /tmp/badge/logo.gif

Licence

Code: MIT. The LaunchFlim logo in skills/logo-layers/examples/launchflim/ and the media built from it are trademarks of LaunchFlim and are included only as examples; they are not covered by the MIT licence. The test logo in examples/test-badge/ is made-up art drawn by make_logo.py, set in Aileron (CC0), the font bundled with Pillow.