mcpField
P
printed-curtain-render

printed-curtain-render

github.com/vibe-motionCreative & media1.4k198 installsUpdated 3w ago
Repository

About printed-curtain-render

A skill for generating interactive previews of printed curtains, aimed at creators placing images or text into a cloth simulation. It bakes artwork into cloth coordinates so the design changes with the curtain's motion, folds, and strands.

Key features

  1. 01Place images and text on a cloth canvas
  2. 02Simulate 40 Verlet curtain strands
  3. 03Deform artwork with the cloth
  4. 04Create a portable local preview directory
  5. 05Replace images temporarily in the browser

Use cases

  1. 01Preview a curtain printed with a brand design
  2. 02Adjust image fit, position, and dimensions
  3. 03Create layouts with multiple text lines and colors
  4. 04Inspect curtain interactions in a browser

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vibe-motion/skills --skill printed-curtain-render

After installing, type/printed-curtain-renderin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/printed-curtain-template/
controls.js
curtain.js
index.html
NOTICE.txt
point.js
print.js
rigidBody.js
segment.js
sketch.js
style.css
scripts/
create_printed_curtain.py

Details

From the project README

Printed Curtain Render

Workflow

  1. Resolve the source image, optional text lines, palette, and output directory.
  2. Resolve the installed skill directory and run scripts/create_printed_curtain.py.
  3. Wait for VALIDATION=PASS and OUTPUT_HTML=<absolute path>.
  4. 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.
  5. 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 H to toggle the live controls and image picker.
  • Press R to rebuild the cloth.
  • Drop a PNG, JPEG, or WebP on the canvas for a temporary in-browser replacement.

Customization

  • Repeat --text to add multiple centered text lines.
  • Use --image-fit contain|cover|stretch and the --image-x, --image-y, --image-width, and --image-height artboard controls to place artwork on the 1200×1600 material canvas.
  • Use --text-y, --text-width, --text-height, --text-gap, --font-family, and --font-weight to refine type.
  • Use --cloth-color, --ink-color, and --background-color with CSS hex colors.
  • Use --overwrite only to update generated filenames in an existing output directory. It keeps unrelated files.
  • Edit generated artwork.js for 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 --overwrite is explicit.
  • Generate a text-only VIBE MOTION curtain when neither --image nor --text is 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.

Comments

Markdown supported