@lovelace_lol/loom3 1.0.16 → 1.0.18

package/README.md

@@ -33,6 +33,8 @@ Loom3 provides mappings that connect [Facial Action Coding System (FACS)](https:
 
 ## 1. Installation & Setup
 
+Production demo: [Open LoomLarge](https://loomlarge.web.app/?drawer=open&tab=animation)
+
 ![Project structure with Loom3 installed](./assets/readme/project-structure.svg)
 
 ### Install the package
@@ -136,6 +138,8 @@ const meshes = collectMorphMeshes(gltf.scene);
 
 ## 2. Using Presets
 
+Production demos: [Properties](https://loomlarge.web.app/?drawer=open&tab=properties) | [Mappings](https://loomlarge.web.app/?drawer=open&tab=mappings)
+
 ![Diagram showing how Loom3 presets connect AUs to morphs and bones](./assets/readme/preset-au-flow.svg)
 
 Presets define how FACS Action Units map to your character's morph targets and bones. Loom3 ships with `CC4_PRESET` for Character Creator 4 characters.
@@ -225,9 +229,14 @@ Other `Profile` fields that are easy to miss:
 - `auMixDefaults` sets the default morph/bone blend weight per AU.
 - `compositeRotations` defines the per-node pitch/yaw/roll axis layout used by the composite rotation system.
 - `continuumPairs` and `continuumLabels` describe bidirectional AU pairs and their UI labels.
-- `annotationRegions` defines the regions used by the marker and camera tooling.
+- `annotationRegions` defines the regions used by the marker and camera tooling, including per-region framing via `paddingFactor`.
 - `hairPhysics` stores the mixer-driven hair defaults, including direction signs and morph target mappings.
 
+For `annotationRegions`, `paddingFactor` is the camera framing multiplier for that region:
+- values below `1` zoom in tighter
+- values above `1` pull back to show more surrounding context
+- profile overrides can replace it per region by name without copying the whole preset
+
 ### Passing a preset to Loom3
 
 ```typescript
@@ -263,6 +272,8 @@ const DAISY_PROFILE: Profile = {
   morphToMesh: { face: ['Object_9'] },
   annotationRegions: [
     { name: 'face', bones: ['CC_Base_Head'] },
+    { name: 'left_eye', paddingFactor: 0.9 },
+    { name: 'right_eye', paddingFactor: 0.9 },
   ],
 };
 
@@ -278,6 +289,8 @@ const loom = new Loom3({
 
 ## 3. Getting to Know Your Character
 
+Production demos: [Meshes](https://loomlarge.web.app/?drawer=open&tab=meshes) | [Bones](https://loomlarge.web.app/?drawer=open&tab=bones) | [Mappings](https://loomlarge.web.app/?drawer=open&tab=mappings)
+
 ![Console-style diagram showing Loom3 mesh and morph target inspection output](./assets/readme/console-mesh-output.svg)
 
 Before customizing presets or extending mappings, it's helpful to understand what's actually in your character model. Loom3 provides several methods to inspect meshes, morph targets, and bones.
@@ -438,6 +451,9 @@ This is especially useful for:
 
 ## 4. Extending & Custom Presets
 
+Production demos: [Properties](https://loomlarge.web.app/?drawer=open&tab=properties) | [Mappings](https://loomlarge.web.app/?drawer=open&tab=mappings)
+
+![Diagram showing preset inheritance and mergePreset overrides](./assets/readme/preset-inheritance.svg)
 ![Diagram showing preset inheritance and profile override merging](./assets/readme/preset-inheritance.svg)
 
 ### Extending an existing preset
@@ -515,6 +531,8 @@ const current = loom.getProfile();
 
 ## 5. Creating Skeletal Animation Presets
 
+Production demos: [Bones](https://loomlarge.web.app/?drawer=open&tab=bones) | [Action Units](https://loomlarge.web.app/?drawer=open&tab=action-units) | [Animation](https://loomlarge.web.app/?drawer=open&tab=animation)
+
 ![Betta fish model with bones panel visible](./assets/readme/fish-bones-ui.webp)
 
 Loom3 isn't limited to humanoid characters with morph targets. You can create presets for any 3D model that uses skeletal animation, such as fish, animals, or fantasy creatures. This section explains how to create a preset for a betta fish model that has no morph targets—only bone-driven animation.
@@ -796,6 +814,8 @@ async function swimCycle() {
 
 ## 6. Action Unit Control
 
+Production demo: [Action Units](https://loomlarge.web.app/?drawer=open&tab=action-units)
+
 ![Grid of Loom3 Action Unit examples on a character](./assets/readme/au-values-grid.webp)
 
 Action Units are the core of FACS. Each AU represents a specific muscular movement of the face.
@@ -872,6 +892,8 @@ loom.setAU(12, 0.8, 1);    // Right side only
 
 ## 7. Mix Weight System
 
+Production demo: [Action Units](https://loomlarge.web.app/?drawer=open&tab=action-units)
+
 ![Comparison of morph-only, mixed, and bone-only AU results](./assets/readme/mix-weight-comparison.webp)
 
 Some AUs can be driven by both morph targets (blend shapes) AND bone rotations. The mix weight controls the blend between them.
@@ -919,6 +941,8 @@ if (isMixedAU(26)) {
 
 ## 8. Composite Rotation System
 
+Production demos: [Action Units](https://loomlarge.web.app/?drawer=open&tab=action-units) | [Bones](https://loomlarge.web.app/?drawer=open&tab=bones)
+
 ![Diagram showing pitch, yaw, and roll axes on the head](./assets/readme/head-axes-diagram.svg)
 
 Bones like the head and eyes need multi-axis rotation (pitch, yaw, roll). The composite rotation system handles this automatically.
@@ -979,6 +1003,8 @@ loom.setAU(64, 0.4);
 
 ## 9. Continuum Pairs
 
+Production demo: [Action Units](https://loomlarge.web.app/?drawer=open&tab=action-units)
+
 ![Continuum slider UI for paired Loom3 AUs](./assets/readme/continuum-slider-ui.webp)
 
 Continuum pairs are bidirectional AU pairs that represent opposite directions on the same axis. They're linked so that activating one should deactivate the other.
@@ -1079,6 +1105,8 @@ const pair = CONTINUUM_PAIRS_MAP[51];
 
 ## 10. Direct Morph Control
 
+Production demos: [Meshes](https://loomlarge.web.app/?drawer=open&tab=meshes) | [Mappings](https://loomlarge.web.app/?drawer=open&tab=mappings)
+
 ![Direct morph control screenshot with a live morph preview](./assets/readme/direct-morph-control.webp)
 
 Sometimes you need to control morph targets directly by name, bypassing the AU system.
@@ -1120,6 +1148,8 @@ Loom3 caches morph target lookups for performance. The first time you access a m
 
 ## 11. Viseme System
 
+Production demos: [Visemes](https://loomlarge.web.app/?drawer=open&tab=visemes) | [Speech](https://loomlarge.web.app/?drawer=open&tab=speech)
+
 ![Grid of all 15 Loom3 viseme mouth shapes](./assets/readme/viseme-grid.webp)
 
 Visemes are mouth shapes used for lip-sync. Loom3 includes 15 visemes with automatic jaw coupling.
@@ -1202,6 +1232,8 @@ speak([5, 0, 10, 4]);
 
 ## 12. Transition System
 
+Production demo: [Animation](https://loomlarge.web.app/?drawer=open&tab=animation)
+
 ![Diagram showing a Loom3 transition timeline with easing and handle methods](./assets/readme/transition-timeline-easing.svg)
 
 All animated changes in Loom3 go through the transition system, which provides smooth interpolation with easing.
@@ -1284,6 +1316,8 @@ loom.clearTransitions();
 
 ## 13. Playback & State Control
 
+Production demo: [Animation](https://loomlarge.web.app/?drawer=open&tab=animation)
+
 ![Playback controls UI showing Loom3 pause and resume controls](./assets/readme/pause-resume-controls.webp)
 
 ### Pausing and resuming
@@ -1341,6 +1375,8 @@ loom.dispose();
 
 ## 14. Hair Physics (Mixer-Driven)
 
+Production demo: [Hair](https://loomlarge.web.app/?drawer=open&tab=hair)
+
 ![Animated GIF showing Loom3 hair physics reacting to head motion](./assets/readme/hair-physics.gif)
 
 Loom3 includes a built-in hair physics system that drives morph targets through the AnimationMixer.
@@ -1496,6 +1532,8 @@ Loom3 also logs a warning the first time it encounters a missing hair morph key.
 
 ## 15. Baked Animations
 
+Production demo: [Animation](https://loomlarge.web.app/?drawer=open&tab=animation)
+
 Loom3 can play baked skeletal animations from your GLB/GLTF files using Three.js AnimationMixer. This allows you to combine pre-made animations (idle, walk, gestures) with real-time facial control.
 
 ### Loading animations

package/dist/index.cjs

@@ -2104,13 +2104,13 @@ var CC4_PRESET = {
     {
       name: "left_eye",
       bones: ["CC_Base_L_Eye"],
-      paddingFactor: 1.2,
+      paddingFactor: 0.9,
       parent: "head"
     },
     {
       name: "right_eye",
       bones: ["CC_Base_R_Eye"],
-      paddingFactor: 1.2,
+      paddingFactor: 0.9,
       parent: "head"
     },
     {