Install Printed Curtain Render
Pick your agent. Every command is ready to paste.
npx skills add vibe-motion/skills --skill printed-curtain-renderThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads printed-curtain-render when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the printed-curtain-render skill”. In Codex, type $printed-curtain-render.
Printed Curtain Render
Workflow
- Resolve the source image, optional text lines, palette, and output directory.
- Resolve the installed skill directory and run
scripts/create_printed_curtain.py. - Wait for
VALIDATION=PASSandOUTPUT_HTML=<absolute path>. - Serve the output directory over HTTP and inspect the result in a browser. Do not use
file://; browser canvas security can prevent local artwork pixels from being sampled. - Return the absolute HTML path, the local-server command, and the chosen artwork settings.
Quick Start
/usr/local/bin/python3 scripts/create_printed_curtain.py \
--image "/absolute/path/to/artwork.png" \
--text "VIBE MOTION" \
--output-dir "$(pwd)/out/printed-curtain"
Installed Skill Resolution
Use the installed skill copy, not a source checkout of this skill collection:
skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
if [ -d "$base/skills/printed-curtain-render" ]; then
skill_dir="$base/skills/printed-curtain-render"
break
fi
done
[ -n "$skill_dir" ] || { echo "printed-curtain-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }
/usr/local/bin/python3 "$skill_dir/scripts/create_printed_curtain.py" \
--image "/absolute/path/to/artwork.png" \
--text "VIBE MOTION" \
--output-dir "$(pwd)/out/printed-curtain"
Preview
Serve the generated directory, then open the printed URL:
/usr/local/bin/python3 -m http.server 8000 --directory "$(pwd)/out/printed-curtain"
- Move the pointer across the curtain to push individual strands aside.
- Press
Hto toggle the live controls and image picker. - Press
Rto rebuild the cloth. - Drop a PNG, JPEG, or WebP on the canvas for a temporary in-browser replacement.
Customization
- Repeat
--textto add multiple centered text lines. - Use
--image-fit contain|cover|stretchand the--image-x,--image-y,--image-width, and--image-heightartboard controls to place artwork on the 1200×1600 material canvas. - Use
--text-y,--text-width,--text-height,--text-gap,--font-family, and--font-weightto refine type. - Use
--cloth-color,--ink-color, and--background-colorwith CSS hex colors. - Use
--overwriteonly to update generated filenames in an existing output directory. It keeps unrelated files. - Edit generated
artwork.jsfor fine-grained image layers or per-line colors without forking the physics engine.
Behavior
- Copy the bundled p5.js simulation and the selected image into a portable output directory; do not upload user artwork or require a network connection.
- Bake artwork into the cloth's material coordinates so it stretches, folds, and separates with the strands instead of floating above them.
- Simulate 40 Verlet strands and interpolate the visible weave for a dense curtain at modest physics cost.
- Fit the stage to a centered 3:4 frame and preserve artwork proportions on other window shapes.
- Refuse a non-empty output directory unless
--overwriteis explicit. - Generate a text-only
VIBE MOTIONcurtain when neither--imagenor--textis supplied.
Requirements
- Python 3.9+
- A modern browser with Canvas support
License
The bundled curtain engine is adapted from Jason Labbe's Dynamic ropes 2 and remains licensed under CC BY-SA 4.0. Preserve its source attribution and share adaptations under the same license.
Tips for Printed Curtain Render
- • Start a fresh session after installing so your agent picks up the new skill.
- • This skill ships scripts. Read them before the first run, and run it in a project without secrets first.
- • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
- • It is part of a pack with 15 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Printed Curtain Render
What does the Printed Curtain Render skill do?
Generate a browser-based p5.js curtain simulation that weaves user-supplied PNG, JPEG, or WebP artwork and optional text into individually moving strands. Use when users ask for an interactive curtain or thread simulation, artwork woven into cloth or ropes, image-bearing fabric motion, 可交互线帘/幕布, 图片织入布料, printed curtain effects, or a customizable browser-based fabric reveal.
How do I install Printed Curtain Render?
Run "npx skills add vibe-motion/skills --skill printed-curtain-render" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Printed Curtain Render work in Cursor and Codex?
Yes. Printed Curtain Render uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Printed Curtain Render free?
Printed Curtain Render is open source on GitHub. It is free to install; check the license before commercial use.
Who made Printed Curtain Render?
Printed Curtain Render is published by vibe-motion in the vibe-motion/skills repository, together with 14 other skills.





