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 minutes.
🚀 Launch the Editor | 💬 Join the Discord | 🌐 Visit the Website
Optimized for characters generated via SOTA layer decomposition models. Import your segmented PSDs and let Stretchy Studio handle the complex occlusions, depth layering, and mesh generation automatically.
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.
- 2D Iris Trackpad: Move eyes naturally with a dedicated, intuitive control pad.
- 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.
- Open the App: Head to editor.stretchy.studio.
- Drop your Art: Drag a PSD or PNG file into the workspace.
- Auto-Rig: Follow the 3-step wizard to setup your character skeleton.
- Animate: Switch to Animation mode and start creating keyframes!
- Import: Drag a PSD into the editor viewport.
- Organize: Use the Groups tab to parent layers and adjust pivot points.
- Mesh: Click "Generate Mesh" on any part to enable organic warping.
- Animate: Switch to Animation mode, create a clip, and start keyframing!
- Import: Drag your decomposed "See-Through" PSD into the editor.
- Auto-Rig: Launch the Rigging Wizard. Stretchy Studio uses AI to map your layers to a skeletal structure instantly.
- Refine: Adjust joint positions and mesh density to handle occluded areas (like hair behind the neck).
- 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# Install dependencies
pnpm install
# Run the development server
pnpm devOpen http://localhost:5173 to view the app locally.
Join our Discord to share your animations, get help, or suggest new features!