The fastest way to rig and animate "See-Through" SOTA character models.

Stretchy Studio is a high-performance 2D animation tool designed to turn static layers into expressive, mesh-deformed animations. We are built specifically to bridge the gap between AI-driven layer decomposition (like the See-Through SOTA model) and professional-grade animation.

Unlike traditional bone-based systems, Stretchy Studio combines AI-powered auto-rigging with a timeline-first, direct-deformation workflow. Letting you go from a flat PSD to a fully rigged character in seconds.

🚀 Launch the Editor | 💬 Join the Discord | 🌐 Visit the Website

Optimized for characters generated via SOTA layer decomposition models like See-Through. Import your segmented PSDs and let Stretchy Studio handle the complex occlusions, depth layering, and mesh generation automatically.

Stretchy Studio is designed to be an animation engine for the See-Through model. While traditional 2D animation requires manual layering and inpainting, See-Through automates this process using a single static illustration.

See-Through is a SOTA framework that transforms a single anime illustration into a manipulatable character model by decomposing it into fully inpainted, semantically distinct body-part layers.

• Official Repository: shitagaki-lab/see-through
• Academic Paper: "See-through: Single-image Layer Decomposition for Anime Characters"

Quick Start (Recommended): Use the Free Hugging Face Demo to quickly run the model on your character.

See-Through is specifically trained on anime and VTuber-style illustrations. Realistic or non-anime styles may not decompose correctly.

Rigging doesn't have to be a chore. Use AI-powered pose detection (DWPose) to automatically generate a skeleton for your character, or use our instant "heuristic" method to get moving in seconds.

Don't just rotate layers—warp them! Animate individual mesh vertices to create organic, fluid motion. Perfect for breathing effects, flowing hair, and those subtle "Live2D-style" micro-expressions.

• Automatic Eye Clipping: Irises stay perfectly contained within the eyes—no complex masking required.
• Realistic Limb Bending: Built-in vertex skinning for arms and legs so they bend exactly how they should.
• Blender-Style Shape Keys: Create complex deformations (like smiles or blinks) once and blend them anyway you like via influence sliders.
• Synced Audio Tracks: Layer background music and SFX directly in the timeline. Trim, position, and sync audio clips with your animations for a complete multimedia experience.
• Spine 4.0 Export: Export your rigs and animations directly to Spine JSON format for use in game engines and professional production pipelines.

1. Open the App: Head to editor.stretchy.studio.
2. Drop your Art: Drag a .stretch project, PSD, or PNG file into the workspace.
3. Auto-Rig: Follow the streamlined setup wizard to map layers and establish your character skeleton.
4. Animate: Switch to Animation mode and start creating keyframes!

1. Import: Drag a PSD into the editor viewport.
2. Organize: Use the Groups tab to parent layers and adjust pivot points.
3. Mesh: Click "Generate Mesh" on any part to enable organic warping.
4. Animate: Switch to Animation mode, create a clip, and start keyframing!

1. Import: Drag your decomposed "See-Through" PSD into the editor.
2. Auto-Rig: Launch the Rigging Wizard. Stretchy Studio uses AI to map your layers to a skeletal structure instantly.
3. Refine: Adjust joint positions and mesh density to handle occluded areas (like hair behind the neck).
4. Animate: Create fluid, multi-layered animations that take full advantage of the "See-Through" depth data.

src/
├── app/layout/          # 4-zone UI layout (Canvas, Layers, Inspector, Timeline)
├── components/
│   ├── canvas/          # WebGL Viewport, Gizmos, and Picking logic
│   ├── layers/          # Hierarchical draw order and grouping management
│   ├── inspector/       # Node properties and mesh generation controls
│   └── timeline/        # Playhead, Keyframe tracks, and Animation CRUD
├── renderer/
│   ├── transforms.js    # Matrix math & world matrix composition
│   ├── scenePass.js     # Hierarchical draw-order rendering
│   └── partRenderer.js  # GPU buffer management (VAO/EBO)
├── store/
│   ├── projectStore.js  # Scene tree and persistent node state
│   ├── animationStore.js # Playback state, interpolation, and pose overrides
│   └── editorStore.js   # UI state, selection, and viewport settings
├── mesh/                # Auto-triangulation and mesh editing algorithms
└── io/                  # PSD parsing and export utilities

• Node.js (v18+)
• pnpm (Recommended)

# Install dependencies
pnpm install

# Run the development server
pnpm dev

Open http://localhost:5173 to view the app locally.

Join our Discord to share your animations, get help, or suggest new features!

This project is licensed under the MIT License - see the LICENSE file for details.