Slice & Stitch

Pick your path using the Workflow guide above:

Path 1 — Flipbook Player (finished poses)

1. Open Flipbook Player v2
2. Drag and drop your pose images (PNG/WebP) — they are sorted by file name automatically
3. Drag frames to reorder them; add a per-frame transform (X/Y/Scale/Rotation/Flip/Alpha) and Lock/Hold where needed
4. (Optional) Multi-character scene: add characters with + Add → z-order, parent/child, camera and audio
5. Press Space to play → export as WebM / GIF / PNG / Frames / Sprite Atlas

Path 2 — PNG Rigger (Pose mode, one T-pose, mesh deform)

1. Open PNG Rigger v2 → drop your T-pose image
2. In Skeleton mode, place the 17 points (Auto Fit, then correct by hand)
3. (Optional) In Paint mode, clean stray pixels with "Remove"
4. Switch to Pose mode → select a bone, rotate it with the slider or by dragging (the mesh deforms)
5. Pose a frame → Add Keyframe → another frame → another pose → repeat
6. Play → export as WebM / GIF / Frames

Path 3 — PNG Rigger → Cutout Animator (detailed cutout)

1. Open PNG Rigger v2 — drop your T-pose character. A solid-color background (black, white, green…) is removed automatically; a transparent PNG works as is. If part of the background stays (brush strokes, a shadow, a second color), press Something left? Click it away and click what is left. Two figures on one sheet, or a stray object next to yours? Keep only one figure, then click the one you want
2. Place the 17 skeleton points automatically or by hand
3. Press Preview to see which part each area goes to. If something is wrong, switch to Paint mode: paint it into the right part, or erase stray pixels with "Remove". Smart select does a whole area in one click — choose Head and click the hair lying on a shoulder, and all of it moves to the head
4. Save Rig → a rig file you can keep or share. The browser also remembers the rig by itself: open the same image again and the skeleton, mask and face points come back
5. Split into Parts → 10 PNGs + a meta JSON are downloaded (Cut style: Clean, the default). The older Classic style with 9 extra joint patches is still available
6. (Optional) Use Batch to slice 200 different pose images with the same bones in one go (ZIP)
7. Switch to Cutout Animator v2 — drag the meta JSON and all PNGs onto the canvas
8. Select a part in the left panel; use the Transform sliders on the right, or drag / rotate / scale on the canvas
9. Add several variants of the same body part (Head-Neutral, Head-Smiling, Head-Surprised) → swap sprites by toggling visibility per frame
10. Pick a frame → press K to add a keyframe → another frame → another pose → K again
11. Press Space to play; export with the WebM / GIF / PNG / Frames buttons

Path 4 — PNG Rigger → Live Puppet (perform with camera or video)

1. Slice your character in PNG Rigger v2 (Path 3, steps 1–5). For an animated face, open Face mode before splitting: press Add face points, drag the blue ovals onto the eyes, put the red oval on the mouth and size it to the widest open mouth you want, then press Find irises
2. Open Live Puppet — drop the meta JSON and all PNGs onto the page (or press Load sample character to try it first)
3. Press Start camera and allow camera access — or choose Use a video file
4. Step back so your shoulders and arms are in view. Arms, torso, head tilt and legs follow you; if your body is out of view the arms rest at the sides
5. Look straight ahead and press Re-center head if the head sits off-center. Open Tips for best results in the side panel for framing and lighting advice
6. Start recording → perform → stop. The video contains only the puppet, never your camera image

3D — 3D Rigger v2 (GLB/FBX)

1. Open 3D Rigger v2 → drop a GLB/FBX model
2. If it is pre-rigged, pose it right away; if not, use Auto-Skin (source rig) or the manual 17 points + Bake
3. Rotate bones → add a Keyframe (or load a Mixamo clip) → Play
4. Export: WebM / .glb / OBJ (Mixamo) / PNG

🎭 Live Puppet — next steps:

• ✅ Cleaner parts from PNG Rigger — DONE. Background removal, solid single-owner parts, hair staying with the head, soft round joint caps (Cut style: Clean). Still open: cropping parts to their own box. The crotch is handled in the cut itself: the inner thigh belongs to the leg and a soft fan on top of the leg closes the gap when it swings out, in Cutout Animator as well as Live Puppet. (Skipped when the torso overlaps the legs like a hem.)
• ✅ Arm-spin fix + joint limits — DONE. A limb pointing at the camera holds its last angle, tracking glitches are rejected, angles are speed-limited, elbows and knees cannot fold completely. Still open: using depth to shorten a limb that points at the camera.
• ✅ Face — DONE (first version). Eye and mouth points in PNG Rigger's Face mode; blinking, gaze, eyelid moods, optional eyebrows and a mouth with speech shapes, teeth and tongue in Live Puppet. Still open: a character's own mouth and brow art, automatic eye detection.
• Missing-part completion — eyelids, mouth interior, the torso area hidden behind an arm.
• Write tracking to keyframes — send a live performance to Cutout Animator as an editable animation.

📖 Flipbook Player — possible next improvements (optional, deliberately postponed):

• 📜 Bottom UI vertical scroll fix — a bottom-shell wrapper (max-height: 50vh, overflow-y: auto) was added but no scrollbar shows on the user's screen. Likely cause: the shell's content is already under 50vh (so scrolling never triggers), or inner elements mask the shell's scroll. Directions: (1) create real overflow with min-content + flex-shrink, (2) make the shell a CSS Grid with auto-rows: minmax(0, max-content), (3) make the scrollbar always visible. ~30 lines.
• 🎞️ Screen-aware thumbnail strip — frame thumbnails are not shrunk to the timeline track height and can be cut off when there is a lot of content. Fix: dynamic thumbnail size based on track height + frame count, with a max-thumbs limit — or horizontal scroll inside the strip. ~80 lines.
• 💬 Text overlays — remaining extras:
  • 🎨 Rich text spans — inline formatting inside one overlay (multi-segment color/bold/italic). ~120 lines.
  • 🔊 Typewriter sound — a click every N letters during the typewriter animation (bound to an SFX). ~40 lines.
  • ⏱️ Per-character speed curve — pause at periods and commas, speed up after "!" (natural reading rhythm). ~60 lines.
• Continuous ambient camera shake — besides per-frame and SFX-bound shake: an "always slightly shaky" handheld-camera mode with a global toggle + intensity slider. For found-footage, earthquake or panic scenes. ~50 lines.
• Mobile touch support — touch events for canvas drag and frame-list reorder. ~100 lines.
• WebGL renderer — Canvas2D can slow down at 500+ frames or on a 4K canvas. A big port, but it buys scalability. ~600 lines.
• ✅ Multi-character / scene layers (large refactor) — DONE in v0.4. 2+ characters in one scene, separate timelines, parent/child puppet follow, triggered keyframes, shared SFX, cinematic camera follow, onboarding tour, debug HUD. Details in docs/multi-character-design.md.

🎯 Multi-character — possible polish and extras (Phase 6+):

• 👋 Audio track replace — swap the file of a loaded track while keeping its volume/trim/fade settings. ~40 lines.
• 🧹 Project gallery cleanup — "Delete all", "Delete older than 30 days" and "Keep only the open one" buttons in the gallery, for users whose auto-saves pile up. ~80 lines.
• 🎨 Per-entity lighting tint — a lighting override per character ("A in warm light, B in cool light, same scene"). ~120 lines.
• 🌑 Per-entity drop/ground shadow — today the shadow is global; give each entity its own (color/intensity/offset). ~80 lines.
• 🧅 Multi-entity onion skinning — onion skin currently works for the active entity only; add a per-entity toggle. ~60 lines.
• 🔲 Camera bounds / clamp — keep the camera inside the scene (clamp to the background image size) so a wide pan never runs out of background. ~40 lines.
• 🎯 Solo entity export — export a single character from the scene (one-click solo, others muted). ~30 lines.
• 📁 2-character starter template — "+ New 2-char scene" in the toolbar: an empty project with two entities side by side at different z. ~50 lines.
• 📐 Smart Add Character defaults — place each new character next to the previous one automatically, avoiding overlap. ~25 lines.
• 🎥 Trigger action: set-active-entity — when character A reaches frame X, B becomes active and the camera switches to B. ~50 lines.
• ♻️ SFX/trigger behavior on frame reorder — SFX and triggers are anchored to a frame index and do not follow the frame's content when frames are reordered. A frame-id-anchored alternative is worth evaluating. Design + tests.
• 🚀 Performance audit — profile a large project (3+ entities, 50+ frames) with the Debug HUD, find the bottleneck and optimize. ~150 lines + measurements.
• 🎬 Multi-entity export validation suite — systematically verify that camera follow, parent/child and triggers show up correctly in the WebM export (3–4 scenarios, frame by frame). ~100 lines.

🎬 Video / clip editor extensions — would turn Flipbook into a mini video editor:

• Single video clip layer (light) — one video layer, like an audio track: drag-drop MP4/WebM, start time + trim + x/y/scale + volume, overlaid on the flipbook frames and exported. Limits: one track, not frame-accurate (±1 frame drift), no multi-track or copy-paste. ~500–700 lines.
• Multi-clip on a single track — several clips in a row on the same track (drag to arrange); move, trim, copy-paste and delete clips. ~+400–500 lines on top of the above.
• Cross-clip transitions — cross-fade / wipe / fade-to-black where adjacent clips overlap, with a per-transition duration. ~+200 lines.
• Full NLE (a separate tool: Stitch Editor) — multi-track timeline, picture-in-picture, frame-accurate cuts (WebCodecs API), audio automation, color-correction primitives. Outside Flipbook's scope; mostly Chrome/Edge (WebCodecs is partial in Safari, experimental in Firefox). ~2000–3000+ lines, a separate application.

Cutout Animator v2 — possible next improvements:

• Multiple animation clips — store "walk", "jump", "sad" and other animations for one character in the same file and pick one at playback. (Cutout is the primary animator; this also applies to the PNG Rigger timeline.)
• Sprite atlas export — one image + a JSON map for game engines (Unity, Phaser, Godot). (Flipbook already has a rendered-frame atlas; in Cutout a "Spine-style" parts + skeleton/keyframe export makes sense.)

PNG Rigger v2 — possible next improvements:

• Mirroring — automatically flip a left-arm animation for the right arm. Gold for walk cycles.
• Bone constraints — limits such as "the elbow cannot bend past 180°", to prevent backward bending.
• Inverse Kinematics (worth considering) — put the hand where you want it and have the elbow/shoulder angles computed.
• Mesh deformation for facial expressions — blinking, mouth movement. (Simple needs are already covered by Cutout's sprite swap; this is for finer control.)

Shared (2D tools):

• (Later) WebGL rendering — all 2D tools use Canvas2D today; WebGL would help on 4K+ canvases or with many layers. (PNG Rigger benefits most because of mesh deformation.)
• Bundle the export libraries — ship gif.js, JSZip and pako with the site instead of loading them from a CDN, so every export works offline.

3D Rigger v2 — skipped / optional:

• Mask brush (skipped) — hiding halos/artifacts baked into the texture. Five geometry-based attempts failed; texture painting needs a separate system (~300 lines). Joint Edit + Re-bind + Global skeleton adjust cover about 90% of the need, so this is low priority.
• Topology-aware auto-skin retargeting (optional) — for winged, four-legged or otherwise atypical characters: detect the target mesh's extremities and pick a matching sub-skeleton. An edge case today.
• Precision of the automatic test poses — on manually rigged characters the test poses (Sit, Jump, Wave) depend on the bone local-axis convention; if the character is oriented differently they can tilt sideways. The Rotate Model buttons are the short-term fix; bone-axis auto-detect is the long-term one.
• Pose album v1 (optional) — Save/Load Pose is file-based today. v1: an in-browser IndexedDB album with a grid view (name + thumbnail + date + Apply/Delete). ~150–200 lines.
• Pose album v2 (optional) — v1 + export/import the album as JSON (move between devices) + tags (walk / fight / expression groups). ~250–300 lines.
• Real shadows / shadowMap (optional) — the directional lights cast no shadows today. Has a performance cost. ~50 lines + performance testing.
• Per-light color picker (optional) — key is white and fill is warm orange today; a picker would allow sunset / blue hour / studio looks. ~30 lines.
• Spot/Point light types (optional) — today only directional lights. Niche use. ~40 lines.
• ✓ Multi-character scenes (DONE — Phase 0–4) — 2+ characters in one scene, late entry (sceneOffsetSec), per-character transform/keyframes/visibility, .rigz v3 save/load + auto-save. Docs: docs/3d-rigger-multi-character-design.md. Safe rollback: the 3d-rigger-pre-multichar tag.
• Manual rig for multi-character scenes (optional — low priority) — the 17-point manual placement + bake flow assumes a single character throughout. Converting it is ~8–10 hours with a high regression risk; pre-rigged GLB + Auto-Skin cover most cases. For now: manual rig is single-character only.
• Animation clip import for test poses — Idle/Walk are static single-frame presets today. Improvement: a "Preset Animations" menu that loads full Mixamo FBX clips onto the timeline as keyframes (breathing loop, walk cycle). ~250 lines; medium-high complexity.